こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。 こんにちは。カロリーメイトチョコ味とオレンジジュースを同時に口に含むと吐◯物の味になります、オガリア中村です。 […]

»続きを読む

こんにちは。カロリーメイトチョコ味とオレンジジュースを同時に口に含むと吐◯物の味になります、オガリア中村です。
試してみようと思った方は変態ですよ。

今日は「クリックしたらスルっと出てくるカテゴリ一覧」を作ってみます。
(意識高い系に言い換えるとアコーディオンカテゴリ、スライドダウンカテゴリ、ドロップダウンカテゴリと呼びます。)

楽天ショップでのみ動作確認済みです。Yahoo!ストアでは検証できてないです、、、ゴメンなさい。。

※こちらの記事を参考にしました。

デモ

デモ画面で動作を見る

↓こんな感じのデザインで完成します。↓

RMSへの貼付けだけで完了！(ただしデメリット有り)

楽天GOLDってなんだ、CSSファイルってなんだ、という方向けに
今回はRMS内への貼付けで完了する方法にしてみましたよ。

・・・がががGA！

Internet Explorer9以下はアコーディオンが作動しません。。
クリック前の初期状態で全カテゴリが見える状態になります。予めご承知くださいまっせ。

設置方法

コピペだけで済みますよ～！

1. 次のタグを全てコピーします。

   ※オレンジ文字部分は適宜ご編集ください。

   <style type="text/css">
   <!--
   
   .category {
     width: 200px; /*全体の横幅*/
     border: 1px solid #333;
     font-size: 12px;
   }
   
   .category label {
       background: #333;
       color: #fff;
       padding: 12px;
       display: block;
       margin: 0;
       cursor: pointer;
       border-top: 1px solid #ccc;
   }
   
   .category label:first-child {
     border-top: none;
   }
   
   .category input.switch{
       display: none;
   }
   
   .category ul {
       -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
       -ms-transition: all 0.5s;
       -o-transition: all 0.5s;
       transition: all 0.5s;
       margin: 0;
       padding: 0;
       list-style: none;
   }
   
   .category li {
       border-top: 1px dashed #ddd;
       padding: 12px 8px 12px 24px;
   }
   
   .category li:first-child {
       border-top: none;
   }
   
   .category li:before {
       content: "＞";
       font-size: 9px;
       font-weight: bold;
       color: #ccc;
       margin-right: 8px;
   }
   
   .category input.switch + ul{
       height: 240px; /*クリックして出てくる高さ*/
       overflow: hidden;
   }
   
   .category input.switch:not(:checked) + ul{
       height: 0;
   }
   
   .category input.switch:checked + ul{
       height: 240px;　/*クリックして出てくる高さ*/
   }
   
   -->
   </style>
   
   <div class="category">
       <label for="category-1">カテゴリー1</label>
       <input type="checkbox" id="category-1" class="switch" />
       <ul>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
       </ul>
       <label for="category-2">カテゴリー2</label>
       <input type="checkbox" id="category-2" class="switch" />
       <ul>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
       </ul>
       <label for="category-3">カテゴリー3</label>
       <input type="checkbox" id="category-3" class="switch" />
       <ul>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
           <li><a href="">下カテゴリ</a></li>
       </ul>
   </div>

2. RMSに貼付ければ、完了！
   (RMSメインメニュー　＞　デザイン設定　＞　ヘッダー・フッターレフトナビ、レフトナビ部）
   

ブランド別やサイズ別など、カテゴリの登録内容がかなり多いショップ様にオススメです。
レフトナビだけが縦に伸びていくのを防ぐことが出来ます。

こんなデザインが欲しい！などご要望あれば教えてください。

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。 こんにちは。定期券は改札の50m手前から用意しておくogaRia中村です。 楽天市場では8月31日にスーパーセー […]

»続きを読む

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。 こんにちは。安○総理と荒れ地の魔女って似てませんか？ogaRia中村です。 楽天市場の商品ページには強制的に表示 […]

»続きを読む

こんにちは。身体を曲げるとたまに、肋骨が重なった感覚になり、うっ、となるオガリア中村です。共感できる方探しています。 本日は、楽天ショップのスマートフォン転換率向上施策について書きます。 スマホとなると、ページ制作に必要 […]

»続きを読む

こんにちは。歯の治療中にくしゃみがしたくなったら一体どうしたら良いのか26年間答えが出ていないオガリア中村です。花粉の時期は意地でも歯医者に行きません。 今日は、リンク付き画像へマウスオーバーした時に、画像に効果を加える […]

»続きを読む

▼デモ

以下のソースをそのままコピペしてください。

<style type="text/css">
<!-- 
a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
-->
</style>

※現在80%の透過設定になっています。数値を変化させる事で、透過を強くしたり弱めたりが可能です。

画像のマウスオーバー変化はつけた方が良い！

なぜなら、クリック率が上がるからです！

ネットショップの場合は特に、テキストよりバナー画像が多い為に「どの画像がクリック可能なのか」の判断が難しくなります。クリックできる画像にはマウスオーバー時に変化を加える事で、お客様にも過ごしやすいネットショップサイトとなります。

マウスオーバー効果をまだつけられていないショップ様は、ぜひ今すぐご対応くださいませ。

　
以上！歯がうずくオガリア中村でした。

こんにちは、ネギの葉っぱ部分を上手く使いこなせないオガリア中村です。 商品画像に文字を乗せるのって、意外と難しいですよね。 文字の視認性を高めたいけど、派手な色を使うと不自然に文字が浮いてしまったり。文字色や帯色を決める […]

»続きを読む