そららのクリエイティブログ ヘッダーイラスト

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

オベちゃんのアイコン レスポンシブヘッダーを作る


こんにちはです。あっちのそららです。

ブログの顔となるヘッダー画像、PCで見るとイイ感じだけど、スマホだとサイズが縮小されてインパクトが薄くなる…という悩みがありました。



理由はハッキリしています。
PCは横長の画面。対してスマホは縦長。
PCを意識して作った横長の画像が、縦長のスマホ画面で同じ大きさで見えるワケがないです。逆も然り。


なのでこの問題を解決し、PCでもスマホでも上手い事ヘッダー画像が同じくらいのインパクトで見えるように、方法を考えてみました。
クオリティの高いレスポンシブデザインを意識したブログにしたい方は、参考にしてみてください。



作業工程

まずは作業の流れを説明します。コードの書き方は後々説明するので、全体の工程を把握する所から。


はてなブログのページ構造


上の図が、はてなブログの基本的なページ構造です。
デザインテーマによってブロックの位置が違ったりする場合もありますが、根本は変わらないです。(多分)

今回のレスポンシブヘッダーの配置において活躍するのは、ヘッダーの一つ下に位置する「タイトル下」と呼ばれるエリアです。


デフォルトのヘッダーを消したページ構造


まずページの最上部に位置する、デフォルトのヘッダーを消します。

これで構造上は、「タイトル下」がページの一番上に来ます。(上図参照)



タイトル下にpc版とスマホ版のヘッダー画像を入れる


そして「タイトル下」の中に、PC用・スマホ用のヘッダー画像をそれぞれ挿入します。(上図参照)



ヘッダー画像を非表示にする


最後に、

・PCで見た時は、スマホ版ヘッダーを非表示

・スマホで見た時は、PC版ヘッダーを非表示

 

という設定のコードを組み込めば、スマホを意識したレスポンシブヘッダーの完成!



「タイトル下」をヘッダーにする原理は、こちらの記事を参考にさせていただきました。

www.okuni.me



ここからは、具体的にどうやるのかを細かく説明していきます。



ヘッダー画像を用意

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内に「メディアクエリ」というコードを入れることで、画面サイズ(PC・スマホ)を指定して、それぞれ別々の設定が可能になります。

メディアクエリは、ヘッダー部分に限らずレスポンシブデザインを構築するには欠かせないコードなので、こだわりたい人は覚えておくと便利です。


参考記事

techacademy.jp

メディアクエリについて詳しく書かれているサイトを見つけました。




その他、ヘッダーの細かい調整については割愛しますが、これでPC・スマホ両方を意識したレスポンシブヘッダーの基本的な構築は完了です。

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


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

 

フッターのカスタマイズ

acchinosorara.hatenablog.jp

 

ヘッダーイラスト制作

acchinosorara.hatenablog.jp

 



(この先どんな形の画面が主流になるのか。一応用心しておきます。)

ページトップへ戻るナムナムくん