« 第33回:カレンダーの背景に画像を表示してみよう | トップページ | 第34回:ココログを携帯で閲覧してみよう »

2006/08/06

カスタマイズ・サンプル<No4:金魚>

ご無沙汰しています。久々の更新です^^;

前回デザインを変更してから2ヶ月も放っておいたので、取りあえずデザインのみ変えてみました。
「カスタマイズ方法」でなくてゴメンナサイ。

今回は「金魚」です。
ちょっと涼しげに…と思ったのですが、大きなアイコンを使いすぎて却って暑苦しくなってしまったかな?^^;
素材は前回のデザイン同様『季節素材 雲水亭』 様からお借りしました。

kingyo


相変わらずそんなに凝った技は使っていません。
強いていえば下記2点のみ。

タイトル画像

タイトル部分の画像は画像加工ソフトを使って作成した画像(大きさ: 800×150。金魚の絵以外の部分は透過してます)を、カスタム・テーマのタイトル画像指定を使わずに直接CSSで指定しています。
CSSはこんな感じです。

#banner{
padding-top:10px; /*タイトル文字の縦位置調整*/
padding-left:80px; /*タイトル文字の横位置調整*/
background-image:url(画像のurl); /*タイトル画像の設定*/
background-repeat:no-repeat; /*タイトル画像の繰り返し(なし)*/
background-position:right top; /*タイトル画像の位置(右上)*/
height:170px; /*タイトル部分の高さ*/
}

「テーマの編集」でも設定できるしその方が簡単なのですがこれを使うと何故か「確認」しても画像が反映してくれないことが多く調整が面倒なので、今回は直接CSSで指定してしまいました。
「テーマの編集」を利用する場合は下記のエントリーを参考にして下さい。
第4回: タイトルにオリジナルの画像を設定してみよう

日付の右端のアイコン

タイトル部分にアイコンを付けてしまうと表示できる文字数が少なくなってしまいます。
特に今回のアイコンは大きめなのでタイトル名が長いこのブログで使うと何度も折り返しが出てあまり格好良くないので、タイトルの上の「日付」 部分にアイコンを付けてみました。

.content h2{
background-image:url(画像のurl); /*画像の設定*/
background-repeat:no-repeat; /*画像の繰り返し(なし)*/
background-position:center right; /*画像の位置(右端の中央)*/
height:36px; /*高さの設定*/
}

以上です。

お世話になりました

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

 


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


|

« 第33回:カレンダーの背景に画像を表示してみよう | トップページ | 第34回:ココログを携帯で閲覧してみよう »

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

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

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

コメント

かわいいです。映えています。さすがtakoさん!


投稿: おきなわ | 2006/08/07 22:01

■おきなわさん
こんにちは。コメントありがとうございます。

新しいデザインにするときって自分ではかなりいろいろ考えた結果だったりするのですが、果たしてそれがどう受け止められるかけっこう不安だったりするんですよね。
今回も「図柄がかわいい」のには自信があったのですが(笑)、それを組み合わせるとちょっと暑苦しいかな~、という部分がちょっと心配で。
なので、感想をいただけてとても嬉しかったです。
ありがとうございました(^^)

投稿: tako→おきなわさん | 2006/08/12 11:53

コメントを書く



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


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



トラックバック

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

この記事へのトラックバック一覧です: カスタマイズ・サンプル<No4:金魚>:

« 第33回:カレンダーの背景に画像を表示してみよう | トップページ | 第34回:ココログを携帯で閲覧してみよう »