So-net無料ブログ作成
ブログトップ ブログ全体 ヘッダー サイドバー 記事本文 フッター リファレンス Gazon Weblog

タイトルバナー全面に写真を貼り付けよう! [実践編:ヘッダー]

説 明

横に細長く切り取った写真を用いて、タイトルバナーにします。
ブログ説明文は写真と重なると見えにくくなるので、写真の下に配置しました。

完成形


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

準 備


 サンプルでは次の写真を使います。(750×228pixel)
 

編 集

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

ソースコード:
#banner {
   :
   :
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat;
}

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


この状態では写真がメイン部分の左上を基準に配置されているので、写真をセンター(真ん中)に寄せます。

ソースコード:
#banner {
   :
   :
background:#FFFFFF url("/_images/blog/_***/****/ファイル名") no-repeat center ;
}



写真の下が表示されていないため、heightを調整します。
私が用意した写真は750×228ピクセルなので、次のように変更します。

ソースコード:
#banner {
height:228px;
   :
   :
}

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



ブログタイトルの文字位置および文字色を変更する
#banner h1、#banner h1 aを変更します。

まず、ブログ名の文字の位置を被写体と重ならないよう右側に移動します。
サンプルでは写真の右半分の中央にブログタイトルを配置したいので、padding-leftを30px → 480pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。

ソースコード:
#banner h1 {
   :
   :
padding:60px 20px 10px 30px; ー(※)
padding-top:60px;
padding-right:20px;
padding-bottom:10px;
padding-left:480px;
   :
   :
}

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


次にブログ名の文字位置が垂直方向の中央に来るよう調整します。
サンプルではpadding-topを60px → 95pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。

ソースコード:
#banner h1 {
   :
   :
padding-top:95px;
padding-right:20px;
padding-bottom:10px;
padding-left:480px;
   :
   :
}


最後に、ブログ名の文字色を変更します。

ソースコード:
#banner h1 a {
   :
   :
color:#FFFFFF;
   :
   :
}



ブログ説明文の文字位置および文字色を変更する
#leadを変更します。

まず、ブログ説明文の背景色と文字色を変更します。

ソースコード:
#lead {
   :
   :
color:#FFFFFF;
background:#800000;
   :
   :
}


ブログ説明文の背景がタイトルバナーからはみ出しているので、写真と同じ幅にします。
メイン部の幅が770pxで、タイトル画像の幅が750pxなので、左右、10pxずつ内側に短くする必要があります。

ソースコード:
#lead {
   :
   :
margin:0; ー(※)
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
   :
   :
}

※ margin:☆;
☆ーtop ☆ーright ☆ーbottom ☆ーleft


ブログ説明文の開始位置が内側に入りすぎているため、少し左側に寄せます。同時に、右側も同じ値を設定します。

ソースコード:
#lead {
   :
   :
padding:0 30px; ー(※)
padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;
   :
   :
}

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


次に、ブログ説明文の文字の位置を写真の下に移動します。
サンプルではmargin-topを0px → 85pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。

ソースコード:
#lead {
   :
   :
margin:0; ー(※)
margin-top:85px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
   :
   :
}


最後に、ブログ説明文がサイドバーや本文記事の方にはみ出してしまっているので、#contentを変更します。
サンプルではmargin-topを12px → 30pxに変更しますが、これは「だいたい」の数値です。写真の大きさやバランスなどを考えて決定してください。

ソースコード:
#content {
   :
   :
margin-top:30px;
   :
   :
}



以上。

写真の切り取りについて

タイトルバナー全面に写真を貼り付ける場合は、被写体が小さく写っている写真を選び、被写体を左側、もしくは右側に位置するように横に細長く切り取ります。



切り取った写真の幅は、ベーススキンのタイトルバナーと同じ幅か、もしくはスキン編集で#container内に書かれているwidthの値と同じ幅にすることをオススメします。切り取った写真の幅に合わせてスキンの幅を変えるのは、レイアウトが崩れる原因となります。

尚、もしベーススキンのタイトルバナーの画像サイズがわからなかったら、ブラウザで画像のみを表示してみてください。
Webサイトのタイトル名が表示される部分に「○×□ピクセル」と表示されると思います。
○が幅(width)で□が高さ(height)です。

関連項目

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


nice!(10)  コメント(0) 
共通テーマ:ペット

nice! 10

コメント 0

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

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