スライドバナーのiframe設置とレスポンシブ設定
楽天のECサイトトップページによく設置されているスライドバナー。
サイトの第一印象としてはきちっと作りこまれているサイト
＝安心して購入ができるショップ。
というように見えますので、楽天を長く運営しているショップさんのほとんどで設定されていると思います。自社サイトのメイクショップやカラーミーショップなどは管理画面でスライド管理メニューがあり、カート機能の1つとしてスライドを設置することができますが、楽天RMSにスライド機能はありません。その為、楽天でスライドバナーを設置する際は、基本的には楽天GOLDにスライドプログラムファイルをUPします。
スライド用のプログラムとhtmlファイルを楽天GOLDにUPする
楽天GOLDサーバにFTP接続して【bxslider】などスライド用のファイルをUPします。
合わせてそのスライドが表示される【slide.html】というhtmlファイルもUPします。
楽天の場合は、スライドhtmlファイルをiframeで設置したい箇所に設置することが一般的です。
楽天GOLDでPC版もスマホ版も構築しているショップさんは、上図のようにindex.htmlと、index_sp.htmlというファイルもアップされており、これがそれぞれPC版、スマホ版のトップページhtmlファイルです。スライドhtmlファイル自体を別でアップすることで、PC版、スマホ版を共用で設置することができますので運営・管理の面でスライドを追加・削除したい場合は、slide.htmlファイルさえ変更すればPC版、スマホ版ともに更新されるようになります。
楽天RMSの中にもiframe設置はできる
楽天GOLDでトップページを構築していないショップさんでもRMSの中にiframeの設置はできます。例えばヘッダーにスライドを設置したい場合は、楽天RMSの中で、デザイン設定＞ ヘッダー・フッター・レフトナビへお進み頂きますと上図の編集画面が開きます。このヘッダーのHTMLソースの中に図のようにiframeで楽天GOLDにUPしたスライドファイルを設置します。トップページのヘッダーだけにスライドを設置したい場合は、ヘッダー・フッター・レフトナビのテンプレートをスライド有/無で2種類作り、トップページだけ有のテンプレートを選択すればよいかと思います。
スマホトップページにiframeは設置できない
PC版の後は、楽天RMSの中でスマホトップページにもスライドを設置したと考えるかと思います。
デザイン設定＞スマートフォン用デザイン設定メニューはこちら＞トップページ設定へお進み頂き【トップ説明文(1)】の中にiframeを設置しようとしますと下図のように許可されていないとアラートが表示されて保存することができません。実は楽天RMSの機能の範囲内でスマホトップページを構築するとなると、このように許可されていないタグの制限や、スタイルシートも使えない為、見た目も寂しいスマホ版トップページになってしまいます。その為、現実的にはスマホトップページは【トップページ切替設定】をして楽天GOLDにUPしたindex_sp.htmlファイルをスマホ版トップページにするケースがほとんどです。その仕組みに関しては、
トップページ切替設定と楽天GOLDのURLをご参照下さい。
共通バナー設定を使ってスライダー設置する
HTMLの知識がなくindex_sp.htmlファイルでスマホトップページを構築することはできない場合でも、楽天RMSの共通バナー設定機能を使えばそれっぽいことはできます。
デザイン設定＞スマートフォン用デザイン設定メニューはこちら＞トップページ設定へお進み頂きますと下図の編集画面が表示されます。【大バナーエリアのデザイン】という箇所を【フリック型】に選択して保存します。
そしてその大バナー自体はどこから設置するのかと言いますと、楽天RMSで
デザイン設定＞スマートフォン用デザイン設定メニューはこちら＞共通バナー設定へお進み頂きます。すると下図の画面が表示され赤枠の画像URLの箇所に横616px×縦120pxの大きさの画像を作り、R-Cabinetにアップの上、そのURLをここに張り付けます。リンク先URLとはそのバナーをクリックした時のリンク先ですのでURLを張り付けます。こうすれば楽天GOLDでなくとも共通バナーがフリック型としてスライドのように表示されるという仕組みです。
ただ、微妙な点はサイズが横616px×縦120pxと制限があるという点です、スマホ用のバナーとしてはかなり縦幅が低い印象のサイズ感ですし、しかも画像容量が60KBと非常に小さくデザイン的にも凝ったバナーにすることはできません。
スマホトップページの楽天GOLD化が必須だとするとiframe設置が基本です
前述のように楽天RMSの機能としてスライドの設置メニューは無く、共通大バナーも微妙です。
しかもスマホトップページにはスタイルシートも入力できない為、やはり楽天GOLDにindex_sp.htmlファイルをUPして
【トップページ切替設定】を行う方法がベストです。
上図が楽天GOLDサーバにFTP接続した例です。index_sp.htmlファイルがあり、これがスマホのトップページファイルです。それを開き上図のようにiframeでスライドを設置してあります。
index.htmlファイルはPC版のトップページで、このPC版トップページにも同様にiframeを設置すればPC版/スマホ版共用でスライドを管理することができるというわけです。スマホ版トップページにはiframe設置ができませんが、楽天RMSの中でもPC版でしたらヘッダーにiframeとして入れることができますので、楽天GOLDのPC版トップページでないショップさんでもスライドiframe設置ができます。
まとめますと、楽天でスライドを設置する為には楽天GOLDにslide.htmlファイルをアップして、それをiframeで設置します。楽天GOLDのPC版トップページでないショップさんは、RMSの
デザイン設定＞ ヘッダー・フッター・レフトナビにて設置し、楽天GOLDのPC版トップページのショップさんは、index.htmlファイルにiframeでslide.htmlを入れるというわけです。スマホ版は現実的にはindex_sp.htmlファイルをトップページにするしかなく、そのファイルにslide.htmlファイルをiframeで設置すればPC/スマホ共用でスライドを管理することができるということになります。
関連記事一覧
