Wedges.bin

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

ヘッダー画像を配置する場合

f:id:wedges:20150923032431j:plain

このテーマでは、画像を配置すると、画像の中心がヘッダー領域の中心にくるように、強制的に配置されます。

これは、タイトル代わり画像を配置した場合を想定しているからです。
画像は、横幅にフィットするようにサイズが小さければ拡大され、大きければ縮小されます。

ヘッダー画像の比率

推奨は16:9の横長の画像よりも、縦が長い画像(例えば正方形に近い形)がオススメです。

16:9の画像の場合

f:id:wedges:20150923025131j:plain

どの部分が表示されているか解りやすいように色を乗せたものが下記です。
f:id:wedges:20150923025635j:plain
(錯覚で天地が短く見えますが、上記の黄色い画像と同じサイズです。)

各デバイスでのヘッダー画像の表示は以下のようになります。

PC & iPad 横向き

f:id:wedges:20150923025916j:plain

iPad 縦向き

f:id:wedges:20150923030024j:plain

iPhone 5

f:id:wedges:20150923030156j:plain

しかし、ブログタイトルが2行になると・・・。

iPhone 5で、画像の天地が足りなくなり、バック地の白が見えています。

PC & iPad 横向き

f:id:wedges:20150923030611j:plain

iPad 縦向き

f:id:wedges:20150923030627j:plain

iPhone 5

f:id:wedges:20150923030650j:plain

なので、ブログタイトルの長さによっては、もう少し縦に長い画像が必要になります。

ちなみに画像のピクセル数は・・・。

画像が小さいと、引き伸ばされぼやけて見えてしまいます。
なので、横幅は736pxあったほうがいいです。
ちなみに、先ほどの16:9の画像ですと、736px:414pxとなります。


f:id:wedges:20150923025502j:plain

Retinaディスプレイに対応させるなら、倍の1472 x 828px以上の画像がオススメです。(上手く圧縮しないと重いですけど。)