Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

ヘッダーに画像を貼る方法(余白なし横幅、画面いっぱいに表示)

ヘッダー画像を画面の横幅いっぱいに表示したい場合のやり方。


1280px以上またはそれ以上の画像を用意する。
ダッシュボード→デザイン→カスタマイズ→一番上の「背景画像」から変更する。
(注)「ヘッダ」からではないので注意すること!

ヘッダの高さやタイトルのフォントやサイズ、位置は下記のCSSで設定できます。
CSSをコピーする場所は、
デザイン→カスタマイズ→「{}デザインCSS←の中です。

#blog-title{
position:relative;
height:400px;/*ヘッダの高さ-デザインによって変更してください*/
}

#title{/*タイトル文字部分*/ font-size:50px;/*フォントサイズ*/ font-family:Courier;/*フォント*/ margin:100px auto;/*タイトルの位置、100pxのところを調節する*/ padding:30px;/*タイトル文字の背景の周りの幅*/ background-color:rgba(255,255,255,0.5);/*文字の背景色(設定は白の半透明)*/ }

#title a{color:black;/*タイトルの文字色*/ }
#blog-description{ display:none;/*ブログ説明文を表示しない*/ }

 

全面にしない場合は、「ヘッダ」のタイトル画像からの設定でOKです♪♪