サイドナビもテンプレート作ってみました。
前回のヘッダーテンプレートの記事と合わせて読んでくれるとうれしいですよ！
最終的にはこのような形のデザインやこのような形のデザインが実現できるテンプレートの作成方法＆配布までお伝えしようと思います。
Sponsored Link
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
「MGSV TPP」クリアしました。「MGSV TPP」で回収しきれなかった伏線は、
ナンバリングとしてではなく外伝的なものをリリースして回収してほしい…
シリーズのファンとしては残念に思う部分も目立ちましたが、とても楽しめました。
さてさて今回は先ほどお伝えしたとおり「楽天ショップのサイドナビデザインテンプレート」を作成してみました。
店舗をオープン、またはリニューアルしたいけども…デザインとかはちょっと苦手だな…
という方の助けになれればとてもとても幸いに思います。
というわけでサイドナビに必要なものや期待できる効果などを考えて作っていってみましょう。
- 1. サイドナビに必要なものってなんだろな、と考えてみる。
- 2. 最低限のユーザビリティを担保！必要十分なサイドナビ
- 3. ブランド数が多すぎる…そんなときは折り畳み！
- 4. 折りたたまなくても縦長解消！2段レイアウトのサイドナビ
※一言
楽天GOLD(無料)と契約している必要があります。
すべてに共通してリセットCSSを使用しています。
こちらのCSSを使用してください。
@charset "utf-8";
/* CSS Document */
/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote {margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
それではやってみましょう。
1. サイドナビに必要なものってなんだろな、と考えてみる。
そもそもサイドナビって何なのと改めて
あくまで僕の持論というリスクヘッジをしておいてからの
ナビゲーションとしてのユーザビリティ
グローバルナビゲーションで補えないローカルナビゲーションを充実させて
ある程度目的の絞られているユーザーに対してのユーザビリティを担保する。
販促エリアとしての有用性
すべての商品ページに共通して露出されているという条件を活かして
店舗側で見せたい商品、企画への導線を確保する。
この二点がサイドナビにおける重要な要素ではないかなと思います。
2. 最低限のユーザビリティを担保！必要十分なサイドナビ
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天サイドナビテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="common/css/side_01.css" type="text/css" media="all"> </head> <body> <div id="side"> <section> <p><img src="img/side_tit_search.gif"></p> <ul id="search_area"> <li><a target="_top" href="#">あす楽商品を探す</a></li> <li><a target="_top" href="#">ポイントアップ商品を探す</a></li> <li><a target="_top" href="#">企画などへのリンクに</a></li> <li><a target="_top" href="#">テキストで修正可能</a></li> </ul> <p><img src="img/side_tit_brandindex.gif"></p> <dl class="accordion"> <dt>腕時計</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>アクセサリー</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>ビジネスアイテム</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>雑貨</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> </dl> <p><img src="img/side_tit_bestrecommend.gif"></p> <ul id="bnr"> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> </ul> </section> </div> </body> </html>
続いて7行目で読み込ませている「side_01.css」がこちら
@charset "utf-8";
/* CSS Document */
#side {
width:180px;
background-color:#f6f6f6;
}
p {
line-height:0;
}
ul#search_area, dl {
width:160px;
margin:10px auto;
}
ul#search_area li a, dd a {
display:block;
width:160px;
line-height:23px;
margin-bottom:1px;
font-size:10px;
text-indent:15px;
background:url(../../img/side_btn_base_s.gif) no-repeat;
}
dt {
font-size:14px;
margin-bottom:5px;
text-indent:5px;
}
dd a:last-child {
margin-bottom:10px;
}
ul#bnr {
margin:10px 0 0;
}
ul#bnr li {
line-height:0;
margin-bottom:10px;
}
以上でこちらの形が実装できます！
先ほど持論展開したローカルナビゲーションと見せたい商品への導線を確保しています。
テンプレートなので簡単簡潔なHTML構造にしていますので、位置の変更や情報の追加も楽々です。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
3. ブランド数が多すぎる…そんなときは折り畳み！
まずはHTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>コピペで使える楽天サイドナビテンプレート</title>
<script type="text/javascript" src="common/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/side_02.css" type="text/css" media="all">
<link rel="stylesheet" href="common/css/accordion.css" type="text/css" media="all">
<!--bxslider-->
<script src="common/js/jquery.bxslider.min.js"></script>
<link href="common/css/jquery.bxslider.css" rel="stylesheet" />
<script>
//アコーディオン
$(function(){
$("dt.accordion_01").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("accordion_01_open");
$(this).siblings("dt").removeClass("accordion_02_open");
$(this).siblings("dt").removeClass("accordion_03_open");
$(this).siblings("dt").removeClass("accordion_04_open");
});
$("dt.accordion_02").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("accordion_02_open");
$(this).siblings("dt").removeClass("accordion_01_open");
$(this).siblings("dt").removeClass("accordion_03_open");
$(this).siblings("dt").removeClass("accordion_04_open");
});
$("dt.accordion_03").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("accordion_03_open");
$(this).siblings("dt").removeClass("accordion_01_open");
$(this).siblings("dt").removeClass("accordion_02_open");
$(this).siblings("dt").removeClass("accordion_04_open");
});
$("dt.accordion_04").click(function(){
$(this).next("dd").slideToggle();
$(this).next("dd").siblings("dd").slideUp();
$(this).toggleClass("accordion_04_open");
$(this).siblings("dt").removeClass("accordion_01_open");
$(this).siblings("dt").removeClass("accordion_02_open");
$(this).siblings("dt").removeClass("accordion_03_open");
});
});
</script>
</head>
<body>
<div id="side">
<section>
<p><img src="img/side_tit_pickup.gif"></p>
<ul class="bxslider">
<li><a target="_top" href="#"><img src="img/js_bnr01.png"></a></li>
<li><a target="_top" href="#"><img src="img/js_bnr02.png"></a></li>
<li><a target="_top" href="#"><img src="img/js_bnr03.png"></a></li>
<li><a target="_top" href="#"><img src="img/js_bnr04.png"></a></li>
</ul>
<p><img src="img/side_tit_search.gif"></p>
<ul id="search_area">
<li><a target="_top" href="#">あす楽商品を探す</a></li>
<li><a target="_top" href="#">ポイントアップ商品を探す</a></li>
</ul>
<p><img src="img/side_tit_brandindex.gif"></p>
<dl class="accordion">
<dt class="accordion_01"> </dt>
<dd>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
</dd>
<dt class="accordion_02"> </dt>
<dd>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
</dd>
<dt class="accordion_03"> </dt>
<dd>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
</dd>
<dt class="accordion_04"> </dt>
<dd>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
<a target="_top" href="#">サンプルリンク</a>
</dd>
</dl>
<p><img src="img/side_tit_bestrecommend.gif"></p>
<ul id="bnr">
<li><a target="_top" href="#"><img src="img/bnr01.png"></a></li>
<li><a target="_top" href="#"><img src="img/bnr02.png"></a></li>
<li><a target="_top" href="#"><img src="img/bnr01.png"></a></li>
<li><a target="_top" href="#"><img src="img/bnr02.png"></a></li>
<li><a target="_top" href="#"><img src="img/bnr01.png"></a></li>
<li><a target="_top" href="#"><img src="img/bnr02.png"></a></li>
</ul>
</section>
</div>
<!--bxslider-->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
</body>
</html>
続いて8行目で読み込ませている「side_02.css」がこちら
@charset "utf-8";
/* CSS Document */
#side {
width:180px;
background-color:#f6f6f6;
}
p {
line-height:0;
}
ul#search_area {
width:160px;
margin:10px auto;
}
ul#search_area li a {
display:block;
width:160px;
line-height:23px;
margin-bottom:1px;
font-size:10px;
text-indent:15px;
background:url(../../img/side_btn_base_s.gif) no-repeat;
}
ul#bnr {
margin:10px 0 0;
}
ul#bnr li {
line-height:0;
margin-bottom:10px;
}
このほかにもCSS、jsが使用されていますので、一式ダウンロードに入ってるものをそのまま読み込ませてください。
以上でこちらの形が実装できます。
店舗の規模が大きくなり、ブランドの数などが増えてくると
それらを羅列するだけでもサイドナビがかなり縦長になってしまいますよね。
そういった部分を解消しつつ、こちらが露出したいバナーなども見てもらいたいときは
折り畳み式のアコーディオン機能を使ってみてはいかがでしょうか。
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
4. 折りたたまなくても縦長解消！2段レイアウトのサイドナビ
まずはHTML
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>コピペで使える楽天サイドナビテンプレート</title> <link rel="stylesheet" href="common/css/reset.css" type="text/css" media="all"> <link rel="stylesheet" href="common/css/side_03.css" type="text/css" media="all"> </head> <body> <div id="side_left"> <section> <p><img src="img/side_tit_search.gif"></p> <ul id="search_area"> <li><a target="_top" href="#">あす楽商品を探す</a></li> <li><a target="_top" href="#">ポイントアップ商品を探す</a></li> <li><a target="_top" href="#">企画などへのリンクに</a></li> <li><a target="_top" href="#">テキストで修正可能</a></li> </ul> <p><img src="img/side_tit_brandindex.gif"></p> <dl class="accordion"> <dt>腕時計</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>アクセサリー</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>ビジネスアイテム</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>雑貨</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>食品</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> <dt>その他</dt> <dd> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> <a target="_top" href="#">サンプルリンク</a> </dd> </dl> </section> </div> <div id="side_right"> <section> <p><img src="img/side_tit_bestrecommend.gif"></p> <ul id="bnr"> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr01.png"></a></li> <li><a target="_top" href="#"><img src="img/bnr02.png"></a></li> </ul> </section> </div> </body> </html>
続いて7行目で読み込ませている「side_03.css」がこちら
@charset "utf-8";
/* CSS Document */
#side_left, #side_right {
width:180px;
background-color:#f6f6f6;
padding-bottom:10px;
float:left;
margin-right:10px;
}
p {
line-height:0;
}
ul#search_area, dl {
width:160px;
margin:10px auto;
}
ul#search_area li a, dd a {
display:block;
width:160px;
line-height:23px;
margin-bottom:1px;
font-size:10px;
text-indent:15px;
background:url(../../img/side_btn_base_s.gif) no-repeat;
}
dt {
font-size:14px;
margin-bottom:5px;
text-indent:5px;
}
dd a:last-child {
margin-bottom:10px;
}
ul#bnr {
margin:10px 0 0;
}
ul#bnr li {
line-height:0;
margin-bottom:10px;
}
以上でこちらの形が実装できます！
「結構前に作ったサイトだから今のPCで見ると左右にスペースが余ってるんですよね」であったり
「折りたたまれたナビゲーションを開くステップをユーザーにはしてほしくないな…」というような店舗のあなた！
これを実装するとサイドナビの高さも抑えられて、見せたい情報もより多く載せることができますよ！
テキストが多くなりがちなローカルナビゲーションと同じ位置にバナーで彩りを添えることができるので、
サイトの見栄えも華やかになります、いかがでしょうか？
HTML、CSS、画像を一式ダウンロードはこちらから。
Download
最後に
いかがでしたでしょうか。
各商品ページにてお買物カゴへスクロールする間、
サイドナビは必ずユーザーの視界に入ってくる重要な露出エリアではないでしょうか？
そこを活用することでユーザーに実りあるウィンドウショッピングを提供できれば最高ですよね。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。
さてさて「MGS TPP」やりつつ「DDON」しながら「MHX」を待ち続けるのです。
コピペでOK！楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行！ヤフーでもお買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化！複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化！Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン！Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
コピペでOK！楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。
空腹時は見ちゃダメ！楽天の参考デザインまとめ、食品ジャンルの素敵サイト13選。
![[1/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【カゴボタン編】](http://www.billionplan.com/wp/wp-content/uploads/2015/07/rakuten_cart_css_01-150x150.jpg)
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね！」や「フォロー」をお願いします。
お世話になります。とても参考にさせて頂いております。ありがとうございます。
初心者なのでご教示頂ければ幸いです。
早速、3をダウンロードさせていただき、作り込みしましたが折畳みのリンクがすべて隠れず文字リンクになってしまいます。
ftpでgoldにアップして、レフトナビの箇所にはインラインフレームで呼べば良いのでしょうか？
手探りでやっているため、お恥ずかしいです。
どのようにすれば同じようになりますか？ご迷惑をお掛けしますがよろしくお願いいたいします。
たかはしさん
こんにちは、コメントありがとうございます。
javascriptを使用していますので、
GOLDにアップし、インラインフレームで読み込む必要があります！
店舗構築頑張ってください！
ありがとうございました。
頑張ってみます。
暑いのでお体にお気をつけ下さいませ。
今後ともよろしくお願い申し上げます。
非常に参考になるサイトデザイン、仕組み。ありがとうございます。
3の折りたたみを検討しています。
一式ダウンロードして、GOLDに置き、表示自体は問題なく可能です。
楽天内のレフトナビに置く際に、インラインフレームを使って表示させますが、
折り畳みを展開した状態で、縦方向に伸びて行ったとき、
インラインフレーム内で見えなくなる部分があります。
レフトナビでのhtmlでインラインフレームの表示縦幅を大きくするしか対処方法はないのでしょうか？
どのように対応されているのでしょうか？
うしさんコンニチは。
コメントありがとうございます。
そうなんですよ！そこが楽天のかなり残念な部分でして…
本来ならjsなどでインラインフレーム内のコンテンツの高さを読み取り
自動調整などを行うのが鉄板なのですが、
楽天RMS内はjsを読み込ませられないんですよね。
これに関しては僕の持っている知識では解決できそうにありませんでした…
お役に立てず申し訳ありません。
レフトナビの下部に、見切れても支障のないようなバナースペースを設けたり
iframeの高さを余分に設けて余白を確保しておくほかないかと思われます。
ご検討ください！
ありがとうございます。
やはりそうでしたか。余白確保で行くようにします。
今後ともどうぞよろしくお願い申し上げます。
うしさんこんにちは。
もう1点、IEを除いて疑似的にiframeの高さを広げる手法として、
iframeに対して:hovre時に高さを追加する設定なども活用できるかもしれません。
ただしこちらはIEのみiframeに:hoverが効かないという弱点もあります。
ご検討ください！