(cache) 【はてなブログカスタマイズ】ヘッダに表示する画像を Mac・iPad・iPhone でそれぞれ切り替える方法

f:id:the-world-is-yours:20141125113527j:plain

自己満足の極みみたいなカスタマイズなのだが、ブログタイトルの下に表示する画像を、Mac・iPad・iPhone でそれぞれ切り替えたい、という野望があったので唸りながら CSS であれこれ試して、なんとか実現できたので記録として。

Media Queries（メディアクエリ）を利用して指定したブロック要素の背景画像をそれぞれの CSS で切り替える、という方法。自分で書いていても何を言っているのかよくわからんが、とにかく実現できたのでよしとする。

ド素人があれこれ試してなんとかできた、という方法ですので、正解でも最善でも唯一でもないことを予めお断りしておきます。もっとスマートでいい方法があれば、むしろ教えていただけると幸いです。

画像を用意する

上から順に、今回用意した Mac・iPad・iPhone用の画像。「Placeit」利用。

リンク Placeit: Free Product Mockups & Templates

f:id:the-world-is-yours:20141125103702j:plain

iPhone

一番手っ取り早い iPhone から説明するが、これは説明もクソも、はてなブログはデフォルトでスマートフォン版のヘッダを独自に編集できるので、用意した画像をヘッダの編集部分にぶち込めば終わり。

<img src="画像の URL" width="100%">

画像の幅がでかいと、その分横に突き抜けるので、幅を100％【width="100%"】に指定したら上手く表示された。

f:id:the-world-is-yours:20141125111007p:plain

Mac と iPad

Media Queries（メディアクエリ）を利用して、Mac と iPad でそれぞれブロックに表示する背景画像を切り替えた。

ヘッダにブロック要素を設定

まず、ヘッダに divタグでブロック要素を指定。名前は何でもいいのだが、とりあえず【header-img】とした。こんな感じ。

<div class="header-img"></div>

設定したブロック要素のサイズと配置を調節

画像を表示させたい領域のサイズを CSS で指定。はてなブログのテーマにもよるが、そのままだとブロックが左に寄ってしまうので、マージンを指定してセンタリング。俺の例だとこんな感じ。幅や高さは、用意した画像によって異なってくる。

.header-img {
width: 864px;
height: 305px;
background-color: #fff;
margin-left:auto;
margin-right:auto;
}

この時点でブログを表示させると、こうなる。

f:id:the-world-is-yours:20141125111938p:plain

よっしゃ、ええ感じや。

Media Queries（メディアクエリ）を記述

ブロックのサイズと配置を確認したら、CSS に Media Queries（メディアクエリ）を記述する。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
   .header-img {
background: url(iPad用の画像URL) ;
background-size:contain;
}
}

@media only screen and (min-width : 1025px) {
   .header-img {
background: url(Mac用の画像URL) ;
background-size:contain;
}
}

CSS に精通している人が見たら噴飯物の記述だと思うが、俺はこれでいいのだ。

前半が、ディスプレイの幅が768〜1024px のデバイスでの表示の指定で、これが iPad のつもり。後半が、それ以上のディスプレイでの表示の指定で、これが Mac のつもり。ブロック一杯に画像を表示させるために、サイズを【contain】に指定。

仕上がり

方法の説明、これで一応終わり。で、Mac・iPad それぞれでブログを表示させてみた。

Mac

f:id:the-world-is-yours:20141125112814p:plain

iPad

f:id:the-world-is-yours:20141125112839p:plain

ちゃんと、それぞれのデバイスでこのブログを見た時の画像が表示されている。恍惚。

以上、ヘッダに表示される画像を Mac・iPad・iPhone でそれぞれ切り替える方法。もちろん Android まで視野に入れると様々な解像度のタブレットが存在するので、Media Queries（メディアクエリ）の記述もより詳細にすべきなのだろうが、このブログのデザインコンセプトが「俺が読んで嬉しい」なので、俺が使用する Mac・iPad Air 2・iPhone 6 Plus でちゃんと表示されていればいいのである。これでいいのだ。

一応、基本書というか参考書として以下のものを手元に置いておいた。Kindle版もある。