ワードプレスLuxeritasヘッダー画像をスマホとパソコンで切り換える方法
ワードプレスのテーマLuxeritasでは、ヘッダー部分に背景画像を設定できるようになっています。
このヘッダー画像を縦横比をキープして表示させる場合、スマホ用には縦長、パソコン用には横長の画像を使いたいですよね。
しかしLuxeritasのテーマカスタマイザーの設定では、スマホ用とパソコン用の画像を切り換えることができません。
そこで本記事では、カスタムCSSを使って、Luxeritasのヘッダー画像をスマホとパソコンとで切り換える方法について解説します。
ここで紹介するのは、このサイトでも使っているヘッダー画像の切り換え方法です。使用するのはカスタムCSSだけなので、非常に簡単です。
本記事を読めば、Luxeritasに限らず、背景画像を簡単にレシポンシブ切り換えする方法がわかるようになります。
実際のWebサイトにおけるDeviceを切り替えて表示
今回紹介するのは、私のWebサイトのヘッダー画像のレシポンシブ対応です。
ですので、このサイトのヘッダー画像をパソコンやスマホで見比べて頂ければ画像の違いがわかりますが、参考までに異なるデバイスでの表示を動画で紹介しておきます。
動画では、Google ChromeのDevice Toggle Toolbarを使って、異なるデバイスでの表示を疑似的に表しています。
ヘッダー画像切り換え方法の概要
１．スマホ用画像（縦長）とパソコン用画像（横長）を準備してメディアライブラリに登録する。
２．スマホ用画像をテーマカスタマイザーでヘッダー画像として登録し、縦横比固定の設定としておく。
３．カスタムCSSを子テーマのstyle.cssに記述する。
以上３ステップで完了です。
この手順の中で、子テーマを使ったり、カスタムCSSを使ったりします。準備としてはLuxeritasの子テーマを有効化して使っていれば大丈夫です。
子テーマやカスタムCSSについての詳細は以下の記事を参照ください。
https://web-children.com/2020/11/29/child-themes/
ヘッダー画像切り換え方法の詳細手順
それでは、具体的に例を交えながら詳細手順を紹介していきましょう。
画像の準備
スマホ用には縦長、パソコン用には横長の画像を準備します。
私のサイトで実際に使用しているのは以下の画像です。
スマホ用に400×500pxの縦長画像、パソコン用に1920×600pxの横長画像を使用しています。
パソコン用は、現段階で最大表示ディスプレイとして最もよく使用されている1920×1080のモニターを想定して横幅1920pxとしています。
Ritena対応を考えるとこの倍のサイズにしてもよいのですが、できるだけファイルサイズを軽くするため、画像にパステル調の加工をして、Ritenaで見ても画像粗さが目立ちにくいようにしました。
スマホ用は、今思えばもう一回り大きいサイズにしてもよかった、とは思いますが、許容範囲かなと思います。
それぞれの画像サイズは、使用する画像の内容によってお好みで設定すればよいかと思います。
画像をメディアライブラリに登録
準備した２つの画像をメディアライブラリに登録します。
ダッシュボードメニューのメディアをクリックするとメディアライブラリが開きますので、２つの画像をアップロードしておきましょう。
アップロードが終わったら、パソコン用画像のアップロード先URLを控えておきます。
メディアライブラリの中でパソコン用画像をクリックして添付ファイルの詳細を開けば、URLがコピーできます。
テーマカスタマイザーでヘッダー画像を登録・設定
Luxeritasのテーマカスタマイザーでスマホ用画像を登録します。
ダッシュボードメニューの外観＞カスタマイズ＞背景・タイトル・ロゴ画像 と進めて、スマホ画像をヘッダー背景画像に登録します。
登録したら、”横幅いっぱい”と”画像に合わせて高さを自動的に調節する”にチェックを入れておきます。こうすることで、縦横比が固定されながら画面幅いっぱいに広がるヘッダー画像となります。
max-heightとmin-heightデフォルトのままとしておきます（値のゼロのまま）。
この下にある、”ヘッダー背景画像の配置方法”については、次の通りとします。
縦横比がキープされながら画像全体が表示されるので、垂直中央や中央が左上でも同じ結果にはなりますが、coverは必ず設定してください。
今回の背景画像のレシポンシブは、coverとして配置されていることが前提となります。
ヘッダー画像をパララックス化
せっかくなので、ヘッダーをパララックス化しておきます（好みなので絶対ではありません）。
ダッシュボードメニューの外観＞カスタマイズ＞アニメーション と進めて、ヘッダーの視差スクロールをデフォルトのゼロから10に変更します。
カスタムCSSを子テーマのstyle.cssに記述して変更更新
このままでは、ヘッダー画像として、パソコン表示でもスマホ表示でも今登録した縦長の画像が表示されてしまいます。
そこでカスタムCSSを使って、パソコン表示のときに、横長のパソコン用画像を表示するようにします。
具体的には、以下のコードを子テーマのstyle.cssに記述して保存してください。
@media screen and (min-width:481px){
div#head-parallax {
background-image: url("aaaa");
padding-bottom: calc(600/1920*100%);
}
}ただし、CSSはご自分の使用画像に合わせて一部変更する必要があります。以下の赤の部分を書き換えてください。
aaaaの部分には、ご自分のパソコン用画像のアップロード先URL、画像高さと画像幅はその画像の高さと幅を数字で指定します。
また、div#head-parallaxというセレクターですが、#head-parallaxでも可能です。
ちなみに、子テーマのstyle.cssへの記述はダッシュボードメニューの外観＞テーマエディターの中で、子テーマのstyle.cssを選択して記述します（以下の記事で”CSSを子テーマのstyle.cssに記述する”参照）。
CSS記述内容の解説
最初の@media screen and (min-width:481px){・・・}で、横幅481px以上の画面サイズになると｛｝内のCSSが適用されます。
すなわち、スマホ画像が適用されるのは横幅480px以下の画面サイズ、パソコン用画像が適用されるのは481px以上の画面サイズです。
したがって、パソコンだけでなくタブレットも横長画像が適用される仕様となっています。
この画面サイズを切り替えるブレークポイントは、自分の好みで設定を変更してもらってもかまいせん。
私が480pxに設定しているのは、iphone系はもちろん横幅480px以下ですし、スマホの中で横幅の一番大きいと考えられるGalaxy noteでも横幅480pxだからです。480px以下であれば、現状のほとんどのスマホの画面サイズをカバーできると考えられます。
ちなみに@media screen and (min-width:481px)を@media(min-width:481px)としても問題はないでしょう。screen and をつけているのは、古いブラウザ対応のためですが、最近はほぼ必要ありません。
次にdiv#head-parallaxというセレクターですが、ヘッダーの背景画像が入っているdiv要素を指定しています。
background-imageで画像をパソコン用に変更して、padding-bottomで、その画像の縦横比がキープできるように画像の高さを整えています。
先にパソコン用画像を登録する手順でもよい
今回は、あらかじめテーマカスタマイザーでスマホ画像を登録して、横幅481px以上の画面でパソコン用画像に切り換える、という手順でしたが、
逆に、先にパソコン用画像を登録しておいて、横幅480px以下の画面でスマホ用画像に切り換える、としても同じようにレシポンシブ対応ができます。
私が先にスマホ用画像を登録しているのは、モバイルファースト、を意識してのことです。
まとめ
Luxeritasでヘッダー画像を画面サイズに応じて切り換える方法を解説しました。
場合によっては、画像を３つ用意しておいて、スマホ用、タブレット用、PC用と切り換えてもよいでしょう。
また、Luxeritasのヘッダー画像に限らず、この手法で、たいていの背景画像は切り換えできるようになります。
スマホでもパソコンでも、見映えのよう画像サイズとしていきましょう。
