ヤフートリプル管理ツールとスライドバナーの設置
ECサイトにおいてトップページに動きのあるスライダーを入れるショップはとても多いと思います。サイトの第一印象として動きがあることで見ているお客様からの印象も良くページビューも上がる傾向がある為です。まずヤフーでスライドを実装したい場合は、ヤフートリプルを利用することが必須になっています。楽天GOLDは無料ですがヤフートリプルは月額3,000円～のオプションになっている点は気になるショップさんも多いと思います。
実はこのヤフートリプルを使う理由はもう一つあり、スタイルシートを使う為に必要になってくるということです。ストアクリエイターProの中でCSSを編集する機能があれば良いのですが、それはありません。これは楽天も同様ですが、その場合はヤフートリプルにCSSファイルをアップし、それを呼び込む設定をストアクリエイターProの中で行うことでスタイルシートをサイトに適用することができるという仕組みになっております。
ヤフートリプルにスライドファイルをアップする
ストアクリエイターProにて、
B-Space・トリプル＞トリプル管理ツールへお進み頂きますと下図の画面が表示されます。【ファイルを選択してアップロード】ボタンを押し、slide.htmlファイルをUPします。
アップしたスライドhtmlファイルは上図のように見えており、【ブラウザ表示】というリンクから実際にアップしたページを確認できますし、【ソース表示】からアップしたHTMLファイルのHTMLソースを確認できる仕様になっています。基本的なURLは、
https://shopping.geocities.jp/shopname/slide.htmlとなっており、ここでアップしたスライドhtmlファイルのリンクをコピーしておきます。
ヘッダーにスライドのiframeを設置する
サイトの上部共通部分のヘッダーにスライドを設置してみます。ストアクリエイターProにて、
ストアデザイン＞ヘッダー・看板＞デザイン編集へお進み頂きますと下図の画面が表示されます。
次に、
フリースペースという箇所をクリックしますとヘッダーに表示しているフリースペースのHTML編集画面に移行します。そのヘッダーのHTMLソースの中に下図のようにiframeで先ほどヤフートリプルにアップしたスライドHTMLファイルをiframeで設置するHTMLソースを入力します。
こうすることでPC版は、ヘッダーにスライドを設置することができます。スマホ版も同様に設置したいという場合は、結論から申し上げますとストアクリエイターProの機能内では設置ができません。iframeのタグの入力自体が禁止されている為、保存自体できません。その為、スマホのトップページもスライドを表示させたいという場合は、スマホのトップページ自体をリダイレクトする設定を行い、そのリダイレクトしたHTMLファイル内にスライドを表示させる設定をするしか方法がありません。
ヤフーのスマホトップページをリダイレクトさせる方法は、
トリプルリダイレクト設定とPC/スマホTOPページURLという記事にて詳しく解説しております。
