Smart Slider3でバナー画像をSPとPCで切り替え
SPとPCでは縦横比が異なるため、バナーの切り替えが必要でしたが、無料版のSmart Slider3では、画像の切り替えができませんた。
出典 : Smart Slider3
Pro版では、バナーサイズを指定して、SP、PCで画像の切り替えを行えます。まず、今回のDEMOをご覧ください。
カフェのトップページを作成しました。トップ、ニュースリリース、商品情報のスライダーをSmart Slider3で作成しました。本来ならば、それぞれをクリックするとシングルページやLPに移動しますが、今回は作成していません。
プラグインを使う利点
ニュースリリースや、商品情報のスライダーもSmart Slider3で作成しました。しかし、新着の内容を決まった数のみ載せるだけならJavaScriptでスライダーを作成し、PHPで自動に表示されるように設定します。
トップページに載せる内容を選択して載せたい場合は、プラグインを使用すると便利です。
ニュースリリースのテキストスライダーは、「スライドを追加」で「Blank」を選択し、テキストを2段で入力します。
スライドを追加＞Blankをクリック
テキストを2段で入力
その下に商品情報を「ショーケース」で作成しました。「Create Slider」から、「スライダー」、「ショーケース」を選択。先ほどと同じように「Blank」を作成します。「画像」でPC用バナーを選択し、その下に、「テキスト」を挿入します。
「スライダー」、「ショーケース」を選択
スライドを追加＞Blankをクリックし、画像とテキストを挿入
キャンペーン以降は、本来投稿のサムネイルや抜粋を表示するようPHPで設定しますが、今回はブロックエディターで作成しています。
では、本題のトップスライダー設定を説明します。まずは、バナーをPC、SP版両方用意します。今回は、PCを1400×700px、SPを700×850pxで作成しました。 PCが横長、SPが縦長になるので、写真の入れ替えや、レイアウトの変更をしました。
PC（1400×700px）
SP（700×850px）
Smart Sliderから「Create Slider」で、「スライダー」「シンプル」を選択します。 「Size」の「スライダーサイズ」にPCのバナーサイズを入力します。また、下の「レイアウト」の「Boxed」、「Downscale」にチェックをします。
最後に「Custom Size」「モバイル」にチェックを入れると、テキストボックスが表示されるので、SPのバナーサイズを入力します。
「スライダー」、「シンプル」を選択
「スライダーサイズ」にPCのバナーサイズを入力
「Custom Size」、「モバイル」にチェックを入れ、SPのバナーサイズを入力
上に戻って、「スライドを追加」で、PCのバナー画像を登録します。これは、バナー画像のサムネイルになります。
スライドを追加＞画像をクリックし、PC用バナーを選択
画像をクリックし、編集画面に移動します。画像を選択し「スタイル」の「Slide Background」右の、パソコンのアイコンをクリックします。サムネイルの下に「Desktop Retina」、「タブレット」、「モバイル」と表示されるので、それぞれの「＋」マークをクリックし、画像をアップします。今回「タブレット」はPC版をアップしました。
画像を選択し「スタイル」の「Slide Background」右の、パソコンのアイコンをクリック。
「Desktop Retina」、「画像」の「＋」をクリック
PC用バナーを選択
PC用バナーが設定されます。同じように「タブレット」も設定。
「モバイル」にはSP用のバナーを設定
これで、設定の終了です。あとは同じように他のバナーも設定し、矢印などのスタイルを整えて完成です。Pro版にすると簡単に設定出来ますね。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。
