ブログカスタマイズ：レスポンシブなテーマでブラウザ幅を判定してタイトル画像を使い分ける

はてなブログのテーマをレスポンシブ対応なBrooklynに変えたついでに表示するブラウザの幅を判定して表示する画像を使い分ける仕組みを入れたので、忘れないようにブログに書き残しておきます。

タイトル画像を使い分けたいと思った理由は、スマホからの見栄えも良くしたかったから
必要な条件はレスポンシブ対応テーマなこと
事前準備
ブログにタイトル画像表示用のコードを設定する
- コードをヘッダのタイトル下に埋め込む
動作確認
- ブラウザの横幅を一定以上広げた場合の表示例
- ブラウザの横幅を一定以上狭めた場合の表示例
ブログのモバイル向け設定を変更
- モバイル向け設定でレスポンシブ対応を有効にする
モバイル設定が反映されていることを確認
出典・参考サイト
- タイトル画像を余白なしで表示する方法
- ブラウザ表示幅で表示する画像を切り替える方法

タイトル画像を使い分けたいと思った理由は、スマホからの見栄えも良くしたかったから

はてなブログの通常のタイトル画像設定を行うと上下左右に空白ができてしまって見栄えが今ひとつなので、いくつかのサイトを参考にさせていただき、余白なしで見栄えの良いタイトル画像を設定する仕組みを適用した。

見栄えはバッチリになったものの、スマートフォンで表示するとタイトル画像がバナーみたいに細長くなってしまったため、モバイルの時にもう少し見栄えを良くする方法はないかと考え、画像を使い分けることを思いついた。

また、モバイル環境はなるべく通信データ量が少ない方が良いので、なるべくファイルサイズの小さい画像を使えるというメリットも狙った。

必要な条件はレスポンシブ対応テーマなこと

必要な条件はレスポンシブに対応しているテーマを適用していることだけ。のはず。Brooklynでしか動作確認していないので、悪しからず。

事前準備

タイトル画像を作る

あらかじめ、はてなフォトライフにPC用タイトル画像とモバイル用タイトル画像を作成する。PC用画像のサイズは1000x200、モバイル用はお好みで（当ブログは800x400を採用）。

はてなフォトライフの設定変更

はてなフォトライフは標準設定のままだと横800を超える画像が勝手にリサイズされてしまうので、以下の設定変更を行っておく。

ブラウザで、はてなフォトライフの設定画面を表示する。

はてなフォトライフの画面右上の「設定」をクリックして設定画面に入る
設定画面の「フォトライフの設定」枠内にある「画像サイズ」を0ピクセルに変更、「オリジナルサイズ」の画像を保存をチェックして「この内容に変更する」ボタンを押して設定を反映させる。

「画像サイズ」を0ピクセルに変更、「オリジナルサイズ」の画像を保存をチェック

タイトル写真をはてなフォトライフに格納、リンク情報を取得

はてなフォトライフの任意の場所にPC用画像とモバイル用画像をアップロードする。

アップロード方法は、はてなのヘルプなどを適宜参照いただきたい。

リンク取得方法は以下の通り。

タイトル画像のあるフォルダの設定画面を表示する。

はてなフォトライフ画面右側の、タイトル画像のあるフォルダにフォーカスし「編集」ボタンを押す。
タイトル画像を選択しリンクを取得する。

タイトル画像にチェックを入れ、「ブログに貼り付ける」ボタンを押す。

「HTMLタグ」をクリックし、内容をコピーしてテキストエディタ等にペーストする。
1. <a href="フォトライフの画像URL"><img src="タイトル画像URL" alt="画像につけたタイトル名"></a>
テキストエディタに貼り付けたテキスト（上のリストのような形になっているはず）からタイトル画像のURL（赤文字箇所）を取得する。PC用画像とモバイル用画像ともに同じ手順でリンクを取得して、テキストエディタ等に貼り付けて残しておく。

ブログにタイトル画像表示用のコードを設定する

ここでポイントになるのが、埋め込むコードが既存のタイトル部分（h1タグ、h2タグ、[デザイン-詳細設定-ヘッダ-タイトル画像]で設定した画像）を全て非表示にし、その代わりの画像を表示させる仕組みであること。

そのコード（後述）をヘッダのタイトル下部分に埋め込めば良い。

コードをヘッダのタイトル下に埋め込む

埋め込み用のコードを準備する。

下記のコードをテキストエディタ等に貼り付けて、赤文字箇所をそれぞれ各自の環境に合わせて書き換える。下記のコードの12行目にある「(max-width: 767px)」がブラウザの幅の閾値になっていて、768px未満であればその右に記述したsrcset=""に指定した画像を採用する。768px以上の場合は右の記述を採用しないため、13行目のsrc=""で指定した画像を採用する。
- ブログURL
  ブログのトップページのURL
- モバイル用タイトル画像URL
  事前準備で用意してメモしておいたモバイル用タイトル画像のURL
- PC用タイトル画像URL
  事前準備で用意してメモしておいたPC用タイトル画像のURL
1. 
2. <style type="text/css">
3. .header-image-wrapper {display: none; }
4. #blog-title{display: none; }
5. .headernew img{ max-width: 1120px; margin: auto; display: block; }
6. .headernew a{ display: block; background-color: #ffffff; }
7. .headernew{ margin: 0px !important; }
8. </style>
9. <h1 class="headernew">
10. <a href="ブログURL">
11. <picture>
12. <source media="(max-width: 767px)" srcset="モバイル用タイトル画像URL">
13. <img src="PC用タイトル画像URL" alt="くまお、遊ぶ。" width="100%">
14. </picture>
15. </a>
16. </h1>
[デザイン-詳細設定-ヘッダ-タイトル下]画面を表示する。

設定画面左側の「デザイン」をクリックする。

画面左側の詳細設定（工具アイコン）をクリックする。

画面左側の「ヘッダ」をクリックして

展開された「タイトル下」のテキスト枠をクリックする。
ヘッダの[タイトル下]のテキスト編集枠内に、自分のブログ向けにリンクを書き換え済みのコードを埋め込んで変更を保存する。

[デザイン-詳細設定-ヘッダ-タイトル下]にタイトル画像表示用コードを貼り付ける。

タイトル下にコードを貼り付けたら「変更を保存する」ボタンを押して変更を反映する。

動作確認

タイトル下に貼り付けたコードを反映後、改めて自分のブログのトップページを表示し、横幅を狭めたり広げたりして、表示される画像が切り替わるか確認する。

ブラウザの横幅を一定以上広げた場合の表示例

ブラウザの横幅を一定以上狭めた場合の表示例

ブログのモバイル向け設定を変更

ブラウザの幅を狭めた際にモバイル向け画像に切り替わることが確認できたら、ブログのモバイル向け設定をレスポンシブ対応に変更する。

モバイル向け設定でレスポンシブ対応を有効にする

[デザイン-モバイル向け設定]画面を表示する。

スマートフォンアイコンをクリックしてモバイル向け設定画面を開く。
[詳細設定-レスポンシブデザイン]にチェックを入れ、設定を反映する。

「詳細設定」をクリックし、「レスポンシブデザイン」にチェックを入れる。

レスポンシブデザインにチェックを入れたら「変更を保存する」ボタンを押して変更を反映する。