• 楽天
  • Yahoo!

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

この記事は過去に書かれた「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>

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

管理画面1

①横幅の指定

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

②高さ指定

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

③ツールのURL

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

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

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

④タブ名

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

まとめ

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

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

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



以上、ogaRiaチームでした!

この記事を書いた人

佐藤

佐藤ディレクター

CSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。