Wedges.bin

はてなブログでWEBデザイン

ヘッダー画像を作る場合のヒント

ヘッダー画像の中心位置を変更こともできます。

このブログテーマのヘッダー画像は、画像の中心がヘッダー領域の中心になるようになっています。

これは、タイトル代わりに画像を入れた場合を想定して、極力タイトルを表示するためです。

f:id:wedges:20150923115840j:plain,w350

しかし、画像の天地が少ない、横長の画像の場合、上下に隙間が出てしまいます。

回避方法として、以下の様なCSSを使うと画像の上部のセンターを中心に配置されます。

隙間ができてしまう時の回避のためのCSS

.header-image-enable #blog-title #blog-title-inner,
.header-image-only #blog-title #blog-title-inner {
background-position: center top !important;
}

1行目と2行目は、ヘッダー画像に与えられるIDで、ブログタイトルの有無でつけられるIDが変わります。

3行目のバックグラウンドのポジションで、どこを中心に配置するかの記述です。

f:id:wedges:20150923115857j:plain,w350

中心を右下に持ってくる場合は、right bottom。

こんなのも出来ますよ。

PC、iPad横向き

f:id:wedges:20150923120255j:plain

iPad縦向き

f:id:wedges:20150923120342j:plain

iPhone 5

f:id:wedges:20150923120405j:plain

参考までに、配置した画像

この画像の全体サイズと、イラストの大きさを参考に画像を作ってみてください。
f:id:wedges:20150923120549j:plain,w350