Simplicityを少し改造してみた part15 ヘッダーの背景画像をレスポンシブにする

結構な頻度で公式フォーラムにトピックが立つのでどうするかを書いておこうかと思います。
また近々のアップデートで高さを指定できるようになるというわいひらさんのアナウンスもあったので、必ずしもここに書くようにしなくても良いですが、一応設定方法を。

画面いっぱいに広げるか、#mainと#sidebarにあわせるか

カスタマイザーの設定で、ヘッダー画像を挿入する時に、画面幅いっぱいにするかどうかを選択できます。通常、幅いっぱいにしない場合は、#h-topの背景画像として適用されます。幅いっぱいにする場合は、#headerに対して背景画像が設定されます。

このどちらかによって書き方は若干異なりますが基本は同じです。

まず少し大きめの画像を用意します。できれば横長で。どれぐらいのサイズが必要なのかはデザインや色々とその他の理由もあり様々ですが、例えば横1000px縦100pxぐらいでよいかと思います。更に横に長くなっても縦に長くなっても構いませんが、これから書く内容は画像のアスペクト比を保ったままレスポンシブにサイズが変わりますので、PC表示とモバイル表示で両対応できるように上手くサイズは調整して下さい。

用意した画像のアスペクト比を計算します。

縦 ÷ 横 × 100 = 必要なアスペクト比%

となります。寝ログのヘッダ画像は、1200×279 pxなので、279/1200*100 = 23.25%と言う感じです。
横に対する縦の比率なので、画面の幅がいくつになってもこの高さの割合で表示されるように設定すればレスポンシブな表示になるという感じです。

css

例えば上記をデベロッパーツールで実行すると、やや縦のサイズが大きいかと思います。しかしそれは、元の画像がそうだからで、それは修正できます。
例えば、上記でpadding: 0 0 15%;でどうでしょうか?

またSimplicity2.1.0あたりで中間サイズぐらいのモバイルの設定が加わったので、上記のままでは画面いっぱいになりませんが、#headerのサイズをwidth: 100% !important;などとして変更させないようにすれば、ずっと画面幅いっぱいに広がっているかと思います。

ここから言えることは、任意の画面幅になった時に、paddingを変化させることで好きな縦サイズを得られるということです。

例えばPC画面でpadding: 0 0 15%;だと丁度いいぐらいでも、スマホ画面なら横幅が狭いわけですから高さもそれに合わせて低くなってしまいます。そこでメディアクエリを利用して、

こんな感じにすれば、上記なら480pxまでの画像サイズの時は、40%の高さで表示されます。

さて、寝ログで試されていた方は、この時に寝転んでいる子供がタイトルの付近に来てちょっとじゃまだなと想われることもあるでしょう。そんな時は、background-positionで調節できます。つまり、

寝ログの場合はこんな感じでいけます。通常は%とかその他諸々で設定します。

ここまでは、#headerについて書きましたが、幅を#mainと#sidebarに揃える場合は、#h-topに背景画像が入りますので、上記を#h-topに適用すればよいわけです。

また#h-topにはmin-height: 100pxが入っていると思うので、これが問題で高さがうまく調整できない時があります。そんな時は、

を入れるなどして、高さをまず無くし、padding:0 0 xで高さを確保する手法が良いかと思います。

記事幅の場合のサンプル

See the Pen ヘッダー画像(記事幅の場合)を可変で高さ変更 by Hidekichi (@Hidekichi) on CodePen.

また別の方法。ロゴを入れる場合

See the Pen 一定のアスペクト比を保つヘッダー画像 レスポンシブ by Hidekichi (@Hidekichi) on CodePen.

こちらは前に公式のフォーラムでトピックが立った分で、ロゴをレスポンシブにしたいという内容でした。

この場合は、ロゴを入れるのでjQueryなども利用していますが、基本的な考えは同じです。

スポンサーリンク

シェアする

フォローする