【楽天】かんたん！商品一覧を「タブ切替」する方法

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

こんにちは！
爪が付いている皮の事を「ハイポニキュウム」と言うそうです。
言葉にして言いたい「ハイポニキュウム」ogaRiaサポートSです。

突然ですが、ogaRiaツールは使いこなせていますか？
今回は万能ツール「なんでも商品ランキング」をタブ切り替えで複数見せる方法をご紹介します。

タブ切り替えで表現するのは難しそう。。「javascript」が必要じゃないの？
なんて不安はすべて解消！HTMLだけでタブ切り替え、さらにヤフーでもそのまま使えます！
早速サンプルを見てみましょう！

iframeを利用したタブ切り替え

こちらはjavascriptを使わなくiframeタグで構成されています。
現在のタブの色だけ変えるのようなことはできませんが、
ヤフーやRMSにもそのまま貼り付けられる事が利点です。

続いてどんなHTMLで作られているか見てみましょう！

タブ切り替えのHTML構成

貼り付けHTMLソース

すべてコピーして各①～④の修正箇所を変更して利用してください
画面上ではすべてHTMLが表示されていませんが、コピーすればすべて取得できます。

<div style="margin:0 auto;width:①横幅指定px;">
<ul style="margin:0;padding:0;width:inherit;list-style-type:none;overflow:hidden;">
<li style="float:left;padding:0;margin:0;">
<a href="③ツールのURLその1" target="tab_contents" style="text-decoration:none;background:#999;color:#FFF;padding:8px 15px;margin:0 8px 0 0;font-size:14px;display:inline-block;">
④タブ名その1</a></li>
<li style="float:left;padding:0;margin:0;">
<a href="③ツールのURLその2" target="tab_contents" style="text-decoration:none;background:#999;color:#FFF;padding:8px 15px;margin:0 8px 0 0;font-size:14px;display:inline-block;">
④タブ名その2</a></li>
<li style="float:left;padding:0;margin:0;">
<a href="③ツールのURLその3" target="tab_contents" style="text-decoration:none;background:#999;color:#FFF;padding:8px 15px;margin:0 8px 0 0;font-size:14px;display:inline-block;">
④タブ名その3</a></li>
</ul>
<iframe height="②高さ指定px" src="③ツールのURLその1" name="tab_contents" frameborder="0" style="border:1px solid #ccc;box-sizing: border-box;width:inherit;" border="0" scrolling="no"></iframe>
</div>

なんでも商品ランキングの管理画面

管理画面へ行く

①横幅の指定

管理画面で指定した横幅を①の部分に記述します。
「px」は必須です。

②高さ指定

管理画面で指定した高さを②の部分に記述します。
こちらも「px」は必須です。

③ツールのURL

タブ化したいコンテンツをいくつか用意します。
ここでは参考に3つ、数制限はありません。
タブ化するコンテンツは高さ、幅などの設定をそろえておきます。

管理画面の設置タグから赤文字でかかれているURL部分だけ
コピーし貼り付けてください。
コピーするときは一度すべてコピーしてから一旦どこかに貼り付け、
URL部分だけ再度コピーしていただくと作業しやすくなります。

「ツールURLその1」は2箇所貼り付ける部分がありますので忘れずに。

④タブ名

最後にタブ名(コンテンツ名)を書き換えて完成です！
ヤフー、楽天RMS、gold、トリプル好きなところでご利用可能です！

まとめ

いかがでしたか？単調になりがちなヤフーのコンテンツも
トリプルサーバーを使わずちょっとワンランク上の表現ができますね！

興味のある店舗様は是非、挑戦してみてください^^

次回はトリプル、GOLDサーバー専用リッチなタブ切り替えを
ご紹介します。お楽しみに！

以上、ogaRiaチームでした！