2011年02月18日

【第68回】iPhone用日付見出しの色を変更する

今回は、日付見出しのデザインを変更してみます。

そもそもSeesaaブログのblueテンプレートにおける日付見出しは、背景色と文字色が同色系で見にくいと思うのですが・・・

▼▼▼ 変更前 ▼▼▼
<縦表示>
SD_067_01.PNG

<横表示>
SD_068_03.PNG

それはさておき、ブログの全体的なデザイン整合性から、背景色は紫色に、そして文字色は白色にしたいと思います。
また、文字サイズも少し大きすぎると感じるので、小さくしてみます。
あと、文字の影の色も少し変更してみました。

▼▼▼ 変更後 ▼▼▼
<縦表示>
SD_068_01.PNG

<横表示>
SD_068_02.PNG

それでは、iPhone用CSS変更画面でCSSを修正していきます。

★iPhone用日付見出しの色を変更する★

h2要素の.dateクラスで、背景色を表すbackground-colorプロパティで紫色を、文字色を表すcolorプロパティで白色を設定する。
また、font-sizeプロパティとtext-shadowプロパティも変更する。

▼▼▼ 変更前 ▼▼▼
h2.date {
background-color: #375D81;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color: #183152;
font-size: 115%;

margin: 15px 0 10px 0;
padding: 5px;
text-shadow: #fff 0 1px 0;
}

▼▼▼ 変更後 ▼▼▼
h2.date {
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
margin: 15px 0 10px 0;
padding: 5px;
background-color: #8531a6;
color: #FFFFFF;
font-size: 100%;
text-shadow: #BFF7F5 0 1px 0;

}

これで、今回の修正は完了です。

なお、この日付見出しの背景画像として設定されているbgHeader.pngは、高さ20px、幅1pxの小さな画像です。
横方向に繰り返し表示されています。

この画像の役割は、日付見出しの上の方を白っぽくし、日付見出し全体を立体的に見せています。
画像の一部が白色、残りが透明色になっているようです。

背景色にこの画像を重ねて表示する結果、背景色を紫色一色に設定するだけで、表示上は立体的に見えているのです。

こういうデザインの方法もあるんですね。
参考になります。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ


posted by o(^0^)o ほくほく at 19:54| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。