Skip to content

タイトル周りと商品ページ

2009年 3月 31日

諸事情により、ここ二日ほどWPの作業ができず。
頭の中では、いろいろと考えていたのですが、
目に見えるカタチにならないうちは、
なかなかその先に進めず。

とりあえず、またタイトル周りで気になっていたことを。
会社の連絡先画像&小さなメニュー部分のdivボックス。
右端に配置していたのですが、ブラウザ幅を縮めると、
タイトル背景画像の上にズズーッとずれてきます。

あえて幅を固定しないレイアウトにしているので、
そのボックス部分も可動性を重視したのですが、
連絡先画像の作りが甘いせいか(自己責任)、
タイトル背景画像の上に載ると、文字の周囲がすごく汚い(–;

いっそのこと、そのボックス部分に背景色をつけてしまえ!
ということで、白の背景色を指定。
 

タイトル画像の上に来ると、
背景色に遮られて連絡先のボックスしか見えなくなるのですが、
その方がスッキリです。
最近はモニター画面も大きいのが一般的ですし、
そこまで縮めてみる人も少ないかなと思うのですけど。

 
それから、バラバラと進めている個別の投稿ページへ。
サイトに掲載する商品説明のページについて、
ひな形的なものを作ってしまいたいところ。
一般消費者向けと業者向けがあるのですが、
極力共通のレイアウトで進めたいなと試行錯誤中。
 

一般消費者向けについては、一部、サイトで販売する計画があり、
オンラインshopのページもサイト内に作る方向で進めています。
カートのシステムは、市販パッケージを利用予定。
[カートに入れる]ボタンパーツを、カートシステムで発行し、
一般消費者向け商品説明ページに貼り付けるという手順で検討中。
 


iPC ダヴィンチ・カート


インクリメント・ダヴィンチ・カート2
 
カートシステムのメーカーサイトでは、
サンプルとして実際に動作確認のできるボタンパーツタグが提供されているので
それを貼り付けての表示&動作確認はすませています。
本番サイトに導入しても、たぶん大丈夫だと思うんですけどね。
そこは、もっと後でするとして、器部分を早く仕上げないと。

4月中には、商品登録とカートシステム以外を仕上げられたらいいなあ。
と、ぼんやり考えています。

広告

今日も読む

2009年 3月 29日

諸事情によりPCに向かっての作業はあまりできなかったので、
今日もひたすら読んでました。

昨日、図書館で借りてきた、買ってもらったばかりのコレ。
WordPressレッスンブック

書評はAmazonで見ていたのですが、たしかにかなりわかりやすかった。
手順を追って、実践的に基礎から身につく感じ。
これなら、自分なりに応用もできるかも。
2週間借りられるので、じっくり読んで作業してみたいと思います。

とりあえず読んでみる

2009年 3月 28日

週末は、なかなかじっくり作業ができない場合が多い。
ということで、空き時間に関連書籍でお勉強。

こういうの↑を図書館にリクエストして、買ってもらいました。
WPの本って、市内全部の図書館を探しても、たった1冊しかなかったので。
…ここの市民は、誰も読まないのかな?
MT関連の本はいっぱいあるのに。
まだまだ知名度低いのかね、WP。
結局、ひとりで5冊くらいお願いしちゃいました(>▽<)

トレースに挑戦

2009年 3月 27日

引き続き、会社ロゴ。
原案はエクセルで作ったモノだったので、
画像としてはエッジもギザギザだし、
いろいろと扱いにくい部分もあり。

なので、トレースしてみることに。
画像処理って、今までさほど経験もなく、
トレースなんていうのも初めてです。

検索してみると、無料の高性能なソフトがあるというので、
とりあえず入れてみました。

potrace

海外のソフトですが、日本語で説明してくれている親切なサイトがあり、
その手順を参考にしました。

いやぁ、驚きです。
一瞬にして、落書きのような元画像がトレースされて
ベクトルデータになって出てきます。

「ベクトルデータって何?」
初心者には当然の疑問。
コンピュータで扱う画像には、「ベクトルデータ」「ラスタデータ」の2種類があるそうです。
●ラスタ
 ビットマップ(bmp)などのように、たくさんの点(ピクセル)で表した画像。
 解像度に左右されるため、一見なめらかに見えても拡大するとギザギザが目立つようになります。
●ベクトル
 数学的な計算から算出された線とカーブから、ズームするたびに書き直されるらしい。
 つまり、拡大しても粗くならないわけです。
 何百万のピクセルによって構成されるラスタよりも、ファイルのサイズは小さくなるんだって。

へぇ~、です。
世の中にはまだまだ知らないことがたくさんありますね。

参考にしたのは、以下のサイト。
本当にありがとうございますm(__)m

最強トレースソフト「potrace」
ラスべク変換・Potrace

会社ロゴ

2009年 3月 26日

まだ、タイトル周りをごちゃごちゃやっています。
企業サイトなら、やはりCIが大事でしょ。
とゆーことで、今まではなかった会社ロゴを本格的に作ることに。
以前から、ロゴ案はあったので、
それを元にややアレンジしてヘッダーに放り込んでみました。

おぉ。

会社ロゴひとつで「いかにもそれらしく」なるのが不思議。
  逆に言えば、こうすると、あやしいサイトだって信用しちゃうかも。
  気をつけないと(–;

あとは、サイト名。
会社名とそのキャッチコピーをテキストで入れているのですが、
画像にしちゃうかどうか。
そこのところでまだ悩み中。
とりあえず検討事項のママ、他を先に進めていこうと思ってます。

タイトル画像

2009年 3月 25日

タイトル周りのグリーンがちょっと渋すぎたかな、と思ったので、
明るい黄緑系に変更。
それだけで、全体も明るくなりました。

さらに、商品の写真も入れてみたら、かなり「それらしく」。
どういう関係の企業か、ひと目でわかるようになったと思います。
さらに企業ロゴ的なモノも入れてみました。

サイト全体のイメージを左右するTOPページ。
でも、最近は検索システムの浸透により、
個別ページから入ってくる人も多いですよね。
その人達にも、サイト全体のイメージが伝わるように考えなくては。

タイトル周りのカスタマイズ

2009年 3月 24日

タイトル周り、いわゆるヘッダーと言われている部分。
とりあえず、ここから手をつけてみることにしました。
なんといっても、サイトの第一印象を左右する大きなデザインポイントになるので。

今のところのイメージカラーはグリーン。
で、カラム指定を“eye-h double”にし、
Eye catch画像を作って入れてみました。

画像自体、今はモノクロのものを使っているので、
画像の上に40pxのグリーンのボーダーを。

当初、ボーダーも画像に含めていたのですが、
今選択している仕様では、ブラウザで幅を広げると
かなり大きな範囲で横に伸びることになります。
画像にしてしまうと幅が固定されるため、
せっかくの可動性をそこなうことになるのでやめました。

サイト名は今のところテキストで表示していますが、
画像に入れてしまおうかとも考えています。
SEO的、ユーザビリティ的には、テキストなんでしょうかね。

配色については、あまり多くの色は使わないように、
でも、食品関連のサイトなので、赤をポイントに使ってみようかなと考え中。

ビジュアル的に、おいしそうな調理例の写真を
効果的に配置したいと思っています。

デザインって、非常に奥が深いですね。
いろんなサイトを見て、日々研究です。