2011年02月13日

【第63回】iPhone用タイトルの背景画像を変更する

iPhone用のブログデザイン変更に入っていきます。

今回はまず、タイトルの背景画像を変えてみましょう。

今回の変更を行うと、iPhone用のブログデザインがご覧のように変わります。

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

<横表示>
SD_063_02.PNG

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

<横表示>
SD_063_04.PNG


なおこのシリーズでは、変更前のテンプレートはblueをベースにしています。

★iPhone用タイトルの背景画像を変更する方法★

背景に使用する画像を用意してブログにアップロードし、#banner-name要素のbackground-imageプロパティに設定する。

▼▼▼ 変更前 ▼▼▼
#banner-name {
background-color: #183152;
background-image: url(http://blog.seesaa.jp/img/iphone/bgHeader.png);
background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;
font-weight: bold;
padding: 8px;
text-align: center;
}

▼▼▼ 変更後 ▼▼▼
#banner-name {
background-color: #183152;
background-image: url(http://hokuhoku-portfolio.up.seesaa.net/image/hdbg.png);
background-repeat: repeat-x;
border-bottom: 3px solid #6699BB;
font-size: x-large;
font-weight: bold;
padding: 8px;
text-align: center;
}

これで、タイトルの背景画像は変更されます。


ところで、今回用意した背景画像は、以下のようなものです。


この画像を、横方向に繰り返し表示(background-repeat: repeat-x;)しています。

この画像は、SeesaaブログのPCサイト用のテンプレートStripe Purpleのヘッダー画像から作成したものです。

参考までに、以下でその画像の作成方法をご紹介します。

★タイトル用背景画像を作成する方法★

<手順1>
SeesaaブログのテンプレートStripe PurpleのCSSを見て、タイトルの背景画像のURLを取得する。

タイトルの背景画像は、#bannar要素のbackground-imageプロパティに記載されています。

SD_063_05.jpg

<手順2>
手順1で取得したURLをブラウザのアドレスバーにコピーし、取得したい画像を表示する。
画像をブラウザに表示できたら、右クリックして名前を付けて画像を保存する。

SD_063_06.jpg

<手順3>
取得した画像をExcel上に挿入し、画像の不要な箇所をトリミングする。

トリミングについては、第19回の記事をご覧下さい。
この作業の結果、この画像が出来上がります。


左右に繰り返し表示してもおかしくならないように、上手く画像の一部を切り出して下さいね。
なお、トリミング後に画像サイズを、縦が80pxになるように修正しています。

<手順4>
加工後の画像をブログにアップロードし、そのURLをCSSに貼り付ける。

私は画像加工があまり得意ではないのですが、それでもご覧のような手順で簡単にできます。

是非試してみて下さい。

今回はここまでです。

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

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

メールアドレス:

ホームページアドレス:

コメント:

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


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

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