回遊性UP売るノウハウHTMLテンプレートお気に入りに追加するまじかる☆タルるートくんのストーリーが微塵も思い出せないオガリア中村です。嗚呼くそう!視聴者だった記憶だけはあるのに。いうか主人公のシルエットも出てこないですね、もはや。この29年間ハンカチーフを持ち歩いた事が一切無かったんですが(濡れた手の乾燥は自然の力に任せます)、先日必要に迫られて買いました。クマのぷーさんのハンカチーフ。29歳になって汗腺の蓋をどこかに失くしてしまったからです。汗だくの人がみんな良い人に見えますね。暑つぅぅぅぅううい!本日は、マウスカーソルを置いたら、下階層がぱっと出てくる「ドロップダウン型」のヘッダーメニューをご用意しました。CSSだけで実装してるので、楽天GOLDを使わずにRMSへの貼り付けだけで完了します。目次デモデザインパターン1のテンプレート(楽天専用)HTMLCSSデザインパターン2のテンプレート(楽天/ヤフー)カテゴリ階層が深いショップにおすすめレフトナビ用はこちら!デモヘッダーのドロップダウンカテゴリメニューのデモ■デザインパターン1:初期表示されているカテゴリにマウスを合わせると、下層カテゴリが現れます。超シンプルなKATACHI。■デザインパターン2カテゴリ名と一緒にアイコン画像を表示できます。デザインパターン1のテンプレート(楽天専用)↑のタイプのテンプレートです。HTMLまずは次のHTMLを丸々コピーしてくださいまっせ。</li></ul>赤文字になってる箇所は要書き換えです。カテゴリ名にそれぞれ書き換えてくださいませ。サンプルは「5つのカテゴリ」にそれぞれ「3つのサブカテゴリ」がついてる形になってますが、カテゴリ/サブカテゴリどちらもお好きに増減させて問題ありません。レイアウトは崩れないようになってます。CSS次にCSSです。先ほどコピーしたHTMLの上部に貼り付けましょう。#f8f8f8;}--></style>これで完成!デザインパターン2のテンプレート(楽天/ヤフー)カテゴリと一緒に画像を表示できるデザインです。なりますー!オガリアサービスにログインした状態で↓へアクセスすれば、HTMLとCSSを確認できます。CSSを見る(ogaRiaフルバージョンプランご契約店舗様限定)カテゴリ階層が深いショップにおすすめヘッダーで多階層のカテゴリを見せるのは店舗内の回遊性を高めるためです。商品までたどり着く為の近道として使うウィンドウショッピングしたいお客様が、ショップ内の取扱商材を把握するのに使うという様なメリットがあります。レフトナビよりも早い段階でページに出てくる為、カテゴリ階層が深く、特に上記のメリットが必要になる店舗様にオススメです。逆に言えば、カテゴリ階層が浅い(取扱い商材の幅が狭く、1商品ずつを丁寧に見せる必要がある)ショップについては、ヘッダーは商品画像を印象的に見せた方が効果的かもしれませんね。レフトナビ用はこちら!レフトナビ用のドロップダウンカテゴリ(アコーディオンカテゴリ)の方が好きだよ!って方はこちらをどうぞ。元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。いつもCSSテンプレート使わさせて頂いております。非常に簡単で効果抜群で助かっております。ありがとうございます。今回の【ドロップダウン型カテゴリメニュー】と【下記記事のデザインパターン1】を併用して使わさせていただいたのですが、ドロップダウンした時に、【下記記事のデザインパターン1】のボタンの後ろに側入ってしまいます。先ほどはご丁寧にありがとう御座いました!オーガランド中村です。こちらこそ記事をご活用頂きありがとう御座います。頂戴致しましたご質問へ回答致します。表示が裏側に回ってしまう場合、表示順序を指定する「z-index」の記述が必要となります。以下、追記した場合のCSS記述例となります。//追記箇所}こちらで改善されますでしょうか?お手数をおかけ致しますが、ご確認くださいませ。茉実様ご回答有難うございます。z-indexで改善されました!迅速でご丁寧な対応に感謝致します。今後共よろしくお願い致します。いつも楽しく拝見させて頂いております。下層カテゴリの表示の数か所に空間が空いてしまいます。下層カテゴリの表示の数か所に空間がこちら貴社ページを拝見しましたところ、複数箇所に入っている「全角スペース」が影響しているようでした...!一例として、以下箇所に入っています。PM中村様お早いご返信ありがとうございます!!凄く分りやすく、すぐに解決致しました!!これからも楽しく拝見させて頂きます。2コメント*内容をご確認の上、送信してください。Us[株式会社オーガランド]現在24のネットショップを運営する鹿児島の企業です。販促支援システムを提供する「ogaRia(オガリア)」サービスを運営しています。株式会社オーガランド。