人気ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
以前、ご購読者の方から、次のような質問
を受けたことがあります。
【質問内容】
ヘッダー画像を画面一杯に設置するには、
どうしたらいいのでしょうか。
【私の回答】
ヘッダー画像を画面一杯に設置するのは、
一般的には、あまりお薦めしませんという
意見が多いです。
しかし、実際には、試してみないことには
本当かどうかはわかりません。
実際にヘッダー画像を画面一杯にしている
ブログはあまりないので、
かえってインパクトが強くていいかも。
実行しようとした場合、普通のやり方では、
できないですね。
下図の
カスタマイズ前を
カスタマイズ後のようにしたいと思います。カスタマイズ前
カスタマイズ後
こんな感じです。
では、実践してみましょう。
まず、ブログの画面一杯のヘッダー画像
を作成します。
上記の画像をブログにアップロードします。
CSSを次の通り追加しました。
body {
background: url(ヘッダー画像のURL) no-repeat scroll 0 0 transparent;
height: 350px;
padding-top: 350px !important;
}
ul#gnavi {
left: 20px;
position: absolute;
top: -50px;
width: 800px;
}
#header h1,#header h2{
text-indent :-9999px;
}
#header{
height:0px;
}
#wrap{
padding-top:10px;
}
#subFrame {
padding: 0;
}
これで完成です。
今回は、以上です。
最後まで読んでいただき、
ありがとうございました。
人気ブログランキングの
応援クリックをお忘れの方は、
ここをクリックしてくださいね。
クリックして戴けると、
とても励みになります。