![](https://cxg-design.jp/wp-content/uploads/2023/12/f9145589563cc3eb57a37eab24b36590.png)
Smart Slider3でバナー画像をSPとPCで切り替え
SPとPCでは縦横比が異なるため、バナーの切り替えが必要でしたが、無料版のSmart Slider3では、画像の切り替えができませんた。
![](https://cxg-design.jp/wp-content/uploads/2023/10/3716d4b092b75c2f4eefd6e87ce3c743-2000x1156.png)
出典 : Smart Slider3
Pro版では、バナーサイズを指定して、SP、PCで画像の切り替えを行えます。まず、今回のDEMOをご覧ください。
カフェのトップページを作成しました。トップ、ニュースリリース、商品情報のスライダーをSmart Slider3で作成しました。本来ならば、それぞれをクリックするとシングルページやLPに移動しますが、今回は作成していません。
プラグインを使う利点
ニュースリリースや、商品情報のスライダーもSmart Slider3で作成しました。しかし、新着の内容を決まった数のみ載せるだけならJavaScriptでスライダーを作成し、PHPで自動に表示されるように設定します。
トップページに載せる内容を選択して載せたい場合は、プラグインを使用すると便利です。
ニュースリリースのテキストスライダーは、「スライドを追加」で「Blank」を選択し、テキストを2段で入力します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/8c6ae883a0a74e7b4749b4db0e9f3082.png)
スライドを追加>Blankをクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/e411cf9969018e542014ef604bdab8df.png)
テキストを2段で入力
その下に商品情報を「ショーケース」で作成しました。「Create Slider」から、「スライダー」、「ショーケース」を選択。先ほどと同じように「Blank」を作成します。「画像」でPC用バナーを選択し、その下に、「テキスト」を挿入します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/4022af130496fbde6dd1da638d1a550d.png)
「スライダー」、「ショーケース」を選択
![](https://cxg-design.jp/wp-content/uploads/2023/12/fcecab22b31977e93a4cdc59bd7d7744.png)
スライドを追加>Blankをクリックし、画像とテキストを挿入
キャンペーン以降は、本来投稿のサムネイルや抜粋を表示するようPHPで設定しますが、今回はブロックエディターで作成しています。
では、本題のトップスライダー設定を説明します。まずは、バナーをPC、SP版両方用意します。今回は、PCを1400×700px、SPを700×850pxで作成しました。 PCが横長、SPが縦長になるので、写真の入れ替えや、レイアウトの変更をしました。
PC(1400×700px)
![](https://cxg-design.jp/wp-content/uploads/2023/12/ecbf3a92d8b57a31bad30fa4160bfc3d.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/f42ede0b32c23c01b3ddebc3c33be0df.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/8efe1eda154dbf5177822de5f343b32b.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/2ee84f50c25c3e3bf5df95d9dbd19872.png)
SP(700×850px)
![](https://cxg-design.jp/wp-content/uploads/2023/12/dcbda0499a5dd20c9808dcd99f8dd326.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/91c3d251f6036c3062c6074c70b6d8f8.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/f9abf16cb28cc2fe7f324b6b1e39469c.png)
![](https://cxg-design.jp/wp-content/uploads/2023/12/7d8dcd9687450bbfa5ce4c9affd60ee5.png)
Smart Sliderから「Create Slider」で、「スライダー」「シンプル」を選択します。 「Size」の「スライダーサイズ」にPCのバナーサイズを入力します。また、下の「レイアウト」の「Boxed」、「Downscale」にチェックをします。
最後に「Custom Size」「モバイル」にチェックを入れると、テキストボックスが表示されるので、SPのバナーサイズを入力します。
![](https://cxg-design.jp/wp-content/uploads/2023/12/3f6a6b47f12d649166847fbdb9eb62c1.png)
「スライダー」、「シンプル」を選択
![](https://cxg-design.jp/wp-content/uploads/2023/12/509eb77239650f2eba95ce81d35b7cd6-1.png)
「スライダーサイズ」にPCのバナーサイズを入力
![](https://cxg-design.jp/wp-content/uploads/2023/12/e9dd75b8c3fd81cb54b240173ca41107-1.png)
「Custom Size」、「モバイル」にチェックを入れ、SPのバナーサイズを入力
上に戻って、「スライドを追加」で、PCのバナー画像を登録します。これは、バナー画像のサムネイルになります。
![](https://cxg-design.jp/wp-content/uploads/2023/12/99054ca4c2788b0a155ac7f224bb1ea3.png)
スライドを追加>画像をクリックし、PC用バナーを選択
画像をクリックし、編集画面に移動します。画像を選択し「スタイル」の「Slide Background」右の、パソコンのアイコンをクリックします。サムネイルの下に「Desktop Retina」、「タブレット」、「モバイル」と表示されるので、それぞれの「+」マークをクリックし、画像をアップします。今回「タブレット」はPC版をアップしました。
![](https://cxg-design.jp/wp-content/uploads/2023/12/a045091c1de32be4f4f787e666958233.png)
画像を選択し「スタイル」の「Slide Background」右の、パソコンのアイコンをクリック。
![](https://cxg-design.jp/wp-content/uploads/2023/12/df7ce98d4c5cf587bd74014b47e0058b-2000x1188.png)
「Desktop Retina」、「画像」の「+」をクリック
![](https://cxg-design.jp/wp-content/uploads/2023/12/8449130603a5338bfd58ab4cb321de5c-1.png)
PC用バナーを選択
![](https://cxg-design.jp/wp-content/uploads/2023/12/1bdd61ef9685ccdf708f6483985b435d-1.png)
PC用バナーが設定されます。同じように「タブレット」も設定。
![](https://cxg-design.jp/wp-content/uploads/2023/12/45eb36cae583c5ea615a49e89f7d2370-1.png)
「モバイル」にはSP用のバナーを設定
これで、設定の終了です。あとは同じように他のバナーも設定し、矢印などのスタイルを整えて完成です。Pro版にすると簡単に設定出来ますね。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。