« ブログ便利ツール:「Click Track」 | トップページ | 第32回:自分専用のfavicon(ファビコン)を付けてみよう »

2006/06/04

カスタマイズ・サンプル<No.3:sea glass>

デザインを変更しました。

といっても画像を差し替えたくらいしか大きな変更はないので、わざわざ「サンプル」として記事を書くほどでないのですが… ^^;
取りあえず、キャプチャー画像と簡単なポイントだけ書いておきます。

sea_glass


今回は画像はすべて写真ではなくてイラスト素材を使用しました。
透明感のある丁寧で美しいイラストのセット素材が豊富な『季節素材 雲水亭』さんからお借りしました。

■壁紙

body部分に横長で左端だけにイラストが入った壁紙を敷き詰めています。

今回使ったような画面の端に一列にならぶタイプの壁紙はよくありますが、ブログの壁紙として使う場合サイドバーにイラストがかぶってしまうことがあります。
ブログは「記事を読んでもらうこと」が目的の第一だと思いますので、それによって文字が読みにくくならないような素材を選ぶのが重要です。
例えば、今回ここで使った壁紙のように文字が沈まないような淡い色を使ったイラストを選択するのも一つの方法です。
濃い色の素材を利用する場合は加工が可能な素材ならば画像ソフトを使って元画像の色を多少調整するか、思い切ってサイドバー部分は透明にせず背景色を指定して壁紙は消してしまうなどテキストの可視性を高めるための工夫をしましょう。

■タイトル画像

タイトルの右側の画像は、バナー用の画像を作ったのではなく『雲水亭』さんからお借りした画像(190px×145px)を#bannerのbackground-imageとしてそのまま指定して表示しています。
タグはこんな↓感じです。

#banner{
padding-top:10px;
padding-left:80px;
background-image:url(画像のアドレス);
background-repeat:no-repeat;
background-position:right top;}

この方法は簡単ですが、大きな(高さのある)画像を表示するには#banner部分にもそれ以上の高さを確保しないと途中で切れてしまう場合があるので注意しましょう。
当ブログの場合はサブタイトルが5行分もあるのでそれだけで高さは充分でしたが、普通はこんなにサブタイトルが長いブログはあまりないと思うので(笑)その場合は上記の#bannerへ指定したタグの中に

height: ●px;

を追加すれば高さが調整できます。
※●は画像の大きさ(高さ)に合わせて数字を入力。
試してみて下さい。

ちなみに、上の方に記述してあるpaddingは文字位置の調整です。
壁紙がタイトル部分にも食い込んで来ていたので、壁紙にかからないように左に余白を取って文字位置をずらしました。

…と、前回のデザインから変更したのはこのくらいです。
他には素材に合わせてスクロールバーと、タイトル行頭のラインの色を変えたくらい。
それでも、かなりイメージが変わってみえるのはひとえに素敵な素材を提供してくださる素材サイトさんのおかげです。
ありがとうございます(^^)

お世話になりました

■素材サイト「季節素材 雲水亭」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« ブログ便利ツール:「Click Track」 | トップページ | 第32回:自分専用のfavicon(ファビコン)を付けてみよう »

カスタマイズ」カテゴリの記事

デザイン・サンプル」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

質問なのですが・・・
ココログフリーで、リッチテンプレートを使用しています。
プロフィールの画面だけデザインが単純なので変えたいな、
と思っているのですが、それは可能なのでしょうか?

投稿: miho | 2006/06/04 03:46

■mihoさん
こんにちは。

ご質問の件ですが、可能ですよ。
変更方法は下記の通りです。

1.「管理画面」→「コントロールパネル」→(便利メニューから)「プロフィールページの表示項目の変更」を開きます。

2.開いたページを一番下までスクロールすると「プロフィールページのテンプレートを選んで下さい」という項目がありますので、ここのダウンリストから好きなテンプレートを選択して「保存」ボタンを押して下さい。

以上で変更できます。
試してみて下さい。

投稿: tako→mihoさん | 2006/06/04 10:00

なるほど。
簡単なことだったんですね、
すみません。

ありがとうございました。

投稿: miho | 2006/06/04 12:36

takoさん、こんにちは。
“ココログ favicon”とGoogleで検索し、やってきました。
ココログのロゴが好きなので、faviconもココログにしましたが、
こちらの解説がとても役に立ちました。

投稿: くろ | 2008/12/24 14:54

■くろさん
こんにちは。

favicon設置のお役に立てたようで何よりです。
今後も楽しくブログを続けて下さいね。

コメントありがとうございました。

※返信が遅くなりまして申し訳ございませんでした。

投稿: tako→くろさん | 2009/01/14 21:47

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/2059440

この記事へのトラックバック一覧です: カスタマイズ・サンプル<No.3:sea glass>:

« ブログ便利ツール:「Click Track」 | トップページ | 第32回:自分専用のfavicon(ファビコン)を付けてみよう »