『LION BLOG』では、トップページのナビメニュー下にメイン画像を設置することができます。
設定の方法はコチラ ▶ 「メイン画像の設定方法」
このメイン画像を「パソコンとスマホで切り替えることはできないの？」というご質問を頂いたので、切り替える方法をご紹介します。
うまく動かない可能性もあるので、バックアップを取っておいてから作業することをオススメします。
STEP 1 表示したい画像を「メディアに追加」する
まずは、スマホ用に表示したい画像を「メディア」に追加します。ダッシュボードの メディア ＞ 新規追加 です。
ここに、スマホ用の画像をドロップするか、「ファイルを選択」でアップロードします。
STEP 2 CSSを追加する
外観 ＞ カスタマイズ を選択し、「追加 CSS」をクリックします。
以下の内容を記述します。
@media only screen and (max-width: 767px){
.keyVisual{
background: url(https:〇〇.com/Gazo.jpg)
no-repeat center;
}
}
１行目がスマホへの対応を指示しています（レスポンシブ）。
３行目の「background:uri」の後ろには、表示したい画像のURLを指定します。（先ほどアップロードした画像）
画像のURLを調べる方法
メディア ＞ ライブラリ を開き、一覧の中からURLを知りたい画像をクリックします。
詳細画面が開いたら、右側に「ファイルのURL」が表示されているのでコピーをします。
画像のURLを「追加CSS」の指定の位置（赤文字の位置）へ貼り付けます。
STEP 3 公開ボタンを押し、確認をする
入力が終わったら、「公開」ボタンを押します。
表示を確認するには、トップページが表示されているブラウザの横幅をマウスで動かします。幅を狭くしたときに、画像が変更されていれば成功です。
今回は、「@media」の部分で「max-width」を 767px に指定しているため、タブレットでもスマホ用に指定した画像が表示されます。
スマホだけに限定したい場合は、「max-width」の数値を変更して調整してみてください。