2011年02月21日

【第71回】iPhone用フッターの色を変更する

今回は、iPhone用デザインのフッターを変更してみましょう。

まず、フッターの背景色を、日付見出しと同じ紫色にします。
さらに、日付見出し部分に使われている透過PNGを使って、フッターを立体的に見えるようにします。

要するに、日付見出し箇所と同じようなデザインになります。

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

<横表示>
SD_071_02.PNG

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

<横表示>
SD_071_04.PNG

いかがですか?
これで、iPhone用のトップページはかなり統一感のあるデザインになったと思います。

それでは早速、iPhone用CSS変更画面で修正してみましょう。

★iPhone用フッターの色を変更する方法★

フッターのデザインを定義している#footer要素のbackground-colorプロパティを変更する。
また、日付見出し箇所に使用されている透過PNGを背景画像に設定し、横方向への繰り返し表示設定を追加する。

▼▼▼ 変更前 ▼▼▼
#footer {
background-color: #183152;
color: white;
margin: 0;
padding: 5px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#footer {
color: white;
margin: 0;
padding: 5px;
text-align: center;
background-color: #8531a6;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;

}

さて、今回までの変更を加えた結果、iPhone用トップページはこのようなデザインになりました。

SD_071_05.PNG

もともとのblueのテンプレートから、個人的にかなり気に入ったデザインへと変わりました。

やっぱり、自分でデザインを変更するのっていいですね。

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

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 20:00| Comment(0) | iPhoneブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

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


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

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