ヘッダー画像をパソコンとスマホで別々にする方法【はてなブログ】

そららのクリエイティブログ

あっちのそらら

ものづくりが好きな人。
イラスト・グラフィックデザイン・ウェブデザイン・写真など、いろんなクリエイティブに挑戦中。日々のコトを不定期でブログに書いています。

レスポンシブヘッダーを作る
こんにちはです。あっちのそららです。
ブログの顔となる「ヘッダー画像」、パソコンで見るとイイ感じだけど、スマホだとサイズ縮小されて見にくい、という悩みがありました。

原因は簡単。
パソコンは横長。対してスマホは縦長。パソコンでの見え方をイメージして作った横長の画像が、スマホの縦長画面で同じ大きさで見えるわけがありません。逆も然り。

なので、ヘッダー画像をパソコンでもスマホでも同じくらいのサイズで見せる方法を考えました。
デザインを重視したブログにしたい方は、参考にしてみてください。

作業の流れ

ヘッダー制作の流れを解説します。

はてなブログのページ構造
上の図が、はてなブログの基本的なページ構造です。
デザインテーマによっては、ブロックの位置が異なる場合もありますが、中身自体は変わりません（多分）。

今回のヘッダー制作で使用するのは、ヘッダーの一つ下にある「タイトル下」という部分です。

デフォルトのヘッダーを消した図
まずはページ最上部の、デフォルトのヘッダーを消します。
これを行うことで「タイトル下」がページ最上部に来る状態になります。

タイトル下に新ヘッダーを入れた図
そして「タイトル下」の中に、パソコン用・スマホ用のヘッダー画像をそれぞれ入れます。

pc・スマホでのヘッダー切り替えの図
最後に

パソコンで見た時は、スマホ用ヘッダーを非表示にする
スマホで見た時は、パソコン用ヘッダーを非表示にする

というコードを書けば、それぞれの画面サイズに対応したヘッダーが完成します。

ヘッダー画像を用意

では始めていきましょう。

pc・スマホのヘッダー画像
まずは、パソコン用ヘッダー（横長）、スマホ用ヘッダー（縦長）をそれぞれ用意します。
イラスト・グラフィック・写真などを使ったヘッダーの場合は、スマホ用ヘッダーは縦長のほうがインパクト大です。

ヘッダーは「はてなフォトライフ」にアップロードし、画像アドレス（URL）をコピーし、控えておいてください。

HTML・CSSを記述する

タイトル下のhtml記述欄
必要なコードを入れていきます。
はてなブログの「デザイン」→「カスタマイズ（スパナのマーク）」→「ヘッダ」→「タイトル下」に行きましょう。

下記のコードをコピーし、HTML記述欄に貼り付けてください。
そして「ここに画像URLを入れる」の部分を、先ほどコピーしたヘッダーのURLに差し替えてください。

※PC版とスマホ版がごっちゃにならないように注意！

<!-- ヘッダー（PC版）-->
<div class="header1">
 <img src="ここに画像URLを入れる">
</div>

<!-- ヘッダー（スマホ版）-->
<div class="header2">
 <img src="ここに画像URLを入れる">
</div>

続いてCSSです。
HTML欄に、続けてコピペしてください。

<style type="text/css">

/* デフォルトのヘッダーを消す */
.header-image-wrapper {
 display: none;
}

#blog-title {
 display: none;
}

/* ヘッダー画像を画面サイズに自動で合わせる */
.header1 img, .header2 img {
 display: block;
 width: 100%;
 margin: 0 auto;
}

/* 画面がスマホサイズの時、PC版ヘッダーを消す */
.header1 {
 display: none;
}

/* 画面がスマホサイズの時、スマホ版ヘッダーを表示 */
.header2 {
 display: block;
}

/* メディアクエリ */
@media screen and (min-width: 480px) {

 /* 画面がPCサイズの時、PC版ヘッダーを表示 */
 .header1 {
  display: block;
 }

 /* 画面がPCサイズの時、スマホ版ヘッダーを消す */
 .header2 {
  display: none;
 }
}

</style>

HTMLで画像の配置、CSSでデフォルトのヘッダー消去・新しいヘッダーの切り替え、画面幅に応じたヘッダーの拡大縮小を設定しています。

CSSに「メディアクエリ」というコードを入れることで、画面サイズに応じて別々の設定をすることが可能になります。

参考記事

techacademy.jp

その他、ヘッダーの細かい調整については割愛しますが、これでパソコンとスマホ両方を意識したヘッダーの構築は完了です。

インパクトのあるヘッダーを作る方法の1つ、程度に思って参考にしていただければと思います。

さて、自分の現状の目標は、上が終わったら下ということで、フッター周辺のカスタマイズを進めていきます。

フッターのカスタマイズ

acchinosorara.hatenablog.jp

この先、どんな形の画面が主流になるのか。