【LION BLOG】トップページ画像をPCとスマホで切り替える方法

【LION BLOG】メイン画像をPCとスマホで切り替える方法

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;
}
}

 

1行目がスマホへの対応を指示しています(レスポンシブ)。

3行目の「background:uri」の後ろには、表示したい画像のURLを指定します。(先ほどアップロードした画像)

 

画像のURLを調べる方法

メディア > ライブラリ を開き、一覧の中からURLを知りたい画像をクリックします。

詳細画面が開いたら、右側に「ファイルのURL」が表示されているのでコピーをします。

画像のURL

 

画像のURLを「追加CSS」の指定の位置(赤文字の位置)へ貼り付けます。

追加CSS

 

STEP 3 公開ボタンを押し、確認をする

 

入力が終わったら、「公開」ボタンを押します。

表示を確認するには、トップページが表示されているブラウザの横幅をマウスで動かします。幅を狭くしたときに、画像が変更されていれば成功です。

 

今回は、「@media」の部分で「max-width」を 767px に指定しているため、タブレットでもスマホ用に指定した画像が表示されます。

スマホだけに限定したい場合は、「max-width」の数値を変更して調整してみてください。

広告