タイトルバナーに写真を入れよう！

説　明

サイズを小さくした写真をタイトルバナー部に挿入します。

完成形

※ 本記事では「チワワ」スキンをベースに使用しています。

準　備

• ベーススキンを選びます。
• タイトルバナーに使用する写真を用意します。 → 【写真について】
• 写真をご自身のブログ内にアップロードします。 → 【画像の保存方法】

　サンプルでは次の写真を使って右端に配置します。（375×250pixel）
　

編　集

１写真をタイトルバナー部に挿入する
#bannerを変更します。
注）スキンによっては#containerの場合もあります。

ソースコード：

#banner {
　　　：
background:#FFFFD4 url("/_images/blog/_***/****/ファイル名") no-repeat;
　　　：
}

※ 背景色（ソースコードの「#FFFFD4」部）は必ず指定してください。

ここで、写真の下が表示されなかったり、あるいは写真以上の高さが表示された場合、heightを調整します。
サンプル用に用意した画像は375×250ピクセルなので、次のように変更します。

ソースコード：

#banner {
　　　：
height:250px;
　　　：
}

※ 単位の[px]を書き忘れないように！

尚、もし用意した写真の画像サイズがわからなかったら、ブラウザで画像のみを表示してみてください。Webサイトのタイトル名が表示される部分に「○×□ピクセル」と表示されると思います。
○が幅（width）で□が高さ（height）です。

次に、文字と写真が重なってしまっているので、写真を右側に寄せます。
写真を左側に配置したい方は次に進んで結構です。

ソースコード：

#banner {
　　　：
background:#FFFFD4 url("/_images/blog/_***/****/ファイル名") no-repeat right;
　　　：
}

※ 写真を中央に配置したい場合は「center」と記述します。

２ブログタイトル、ブログ説明文の文字の色を変更する
ブログタイトルは#banner h1 a 、ブログ説明文は#leadを変更します。

まず、ブログタイトルの文字の色を変更します。
ブログタイトルの主な設定は#banner h1内で行われますが、ブログタイトルはリンクになっているため、#banner h1内で文字の色を指定しても変化はありませんのでご注意ください。

尚、#banner h1 aを変更しますが、ベースとしたスキンの中に存在しない場合は、新たに追加してください。存在しない場合は、共通（Common）のリンク色が使用されているということです。

「チワワ」スキンには存在しなかったので、#banner h1の記述の下に新たに追加します。

ソースコード：

#banner h1 a {
color:#81A46C;
}

次に、ブログ説明文の文字の色を変更します。

ソースコード：

#lead {
　　　：
color:#F7ADAD;
　　　：
}

３ブログタイトル、ブログ説明文の文字の位置を変更する
#banner h1を変更します。

ここではブログ名の文字位置が垂直方向の中央に来るよう調整します。
サンプルではpadding-topを66px → 100pxに変更しますが、これは「だいたい」の数値です。タイトル部の高さを250pxに設定していますから半分は125pxの位置となりますが、文字の高さや、下に説明分もあるので「100pxくらいがちょうどいいかな〜」という目分量といいますか。なので、画像の大きさなどやバランスを考えて決定してください。

ソースコード：

#banner h1 {
　　　：
padding:66px 0 5px 12px;　ー（※）
padding-top:100px;
padding-right:0px;
padding-bottom:5px;
padding-left:12px;
　　　：
}

※ padding:○ △ □ ☆;
○ーtop　△ーright　□ーbottom　☆ーleft

尚、写真を左側に配置した場合、文字を右側に寄せたくなると思いますが、その方法には二通りあります。
一つは、文字を右寄せにする方法、もう一つは、文字全体を右側に移動させる方法。
文章からはどちらも同じ事のように思えますが、見栄えは異なります。

ソースコード：文字を右寄せにする方法

#banner {
　　　：
text-align:right;
　　　：
}

ソースコード：文字全体を右側に移動する方法

#banner h1 {
　　　：
margin-left:400px;
　　　：
}

#lead {
　　　：
margin-left:400px;
　　　：
}

※ 設定した値（400px）はバランスを考えた「だいたい」の数値となります

４タイトルバナーの下に線をつける
スキンにもよりますし、好みにもよりますが、タイトルバナーとその下の境界線がハッキリしないので、区切り線をつけます。必要のない方はスルーしてください。

#bannerを変更します。

ソースコード：

#banner {
　　　：
border-bottom:1px #808080 solid;
　　　：
}

以上。

写真について

タイトルバナーに使用する写真のサイズには制限はありませんが、あまり縦に大きいものはお勧めしません。何故ならブログ読者のPC環境によってはタイトルバナーだけで画面いっぱいになってしまう可能性があるからです。バランス的にも、だいたい高さ150〜300pixel（ピクセル）くらいで、被写体が大きく写っているものがいいでしょう。サイズ変更を行った写真（画像ファイル）はJPG形式、もしくはGIF形式で保存してください。

また、被写体が真正面を向いていればどこに配置してもおかしくないですが、もし写真を右端に配置したいなら被写体は左向き、左端に配置したいなら右向きの写真がいいと思います。これは被写体をそっぽ向かせないためです。

関連項目

■ 【背景】background [リファレンス]
■ 【文字】color [リファレンス]
■ 【文字】text-align [リファレンス]
■ 【ボックス】margin [リファレンス]
■ 【ボックス】padding [リファレンス]
■ 【ボックス】border [リファレンス]
■ タイトルバナー全面に写真を貼り付けよう！ [実践編：ヘッダー]
■ タイトルバナーのブログ名・説明文を非表示にしよう！ [実践編：ヘッダー]

【もくじ】へ

コメント 4

参考になりました！
本当にありがとうございます♪
by mio_xiah (2009-05-20 10:19) 

＊ mio_xiahさん ＊

参考になったのなら、私も嬉しいです♪
これからもよろしくお願いしますネ！(^^)
by かほりん (2009-05-20 10:26) 

ありがとうございました。
おかげさまでタイトルを一新できました。
by 楽しく生きよう (2013-05-03 11:51) 

＊ 楽しく生きようさん ＊

お役に立てたようでうれしいです♪
また機会があったらお立ち寄りくださいね！(^^)
by かほりん (2013-05-07 23:19)