【カテゴリ数が多い方におすすめ】カテゴリ表示を左ナビに移動させる

概要

カテゴリ数が多い場合に、以下のように表示が2行になり見た目上よくない場合があります。
そういった場合は、デザインを大きく変えるか、カテゴリの1階層目を減らすなどの対応を行っている方が多いかと思います。

ただし、カテゴリ数は減らしたくない、デザインを大きく変更するほど時間とスキルはまだない方のために、
左側に表示させる方法をお伝えします。
※標準機能をできる限り変更せずに対応しているため、一分画面においてレイアウト崩れが発生する可能性があります。

実施前 / 実施後

実施前

## 実施後

手順

流れ

1. ブロックのレイアウトを変更（TOP/下層ページ）
2. CSSを追記
3. キャッシュ削除

詳細

1.　ブロックのレイアウトを変更（TOP/下層ページ）

• TOPページのレイアウトを変更
  管理画面 > レイアウト管理 > トップページ用レイアウトに移動
  「カテゴリナビ(PC)」ブロックを、#side_leftに移動
  

• 下層ページのレイアウトを変更
  管理画面 > レイアウト管理 > 下層ページ用レイアウトに移動
  「カテゴリナビ(PC)」ブロックを、#side_leftに移動

2.　CSSを追記
・CSS管理に独自CSSを追記する
管理画面 > コンテンツ管理 > CSS管理に移動
以下コードを貼り付け、登録ボタンを押下する。

/* カスタマイズ用CSS */
.ec-itemNav__nav li {
    float: none;
}
.ec-itemNav__nav li a{
text-align:left;
padding: 5px 10px;
height: auto;
}

.ec-itemNav__nav li ul li a {
padding: 5px 10px;
}
.ec-itemNav__nav  li:hover > ul > li,
.ec-itemNav__nav  li:hover > ul > li:hover > ul > li {
    height: auto;
}
.ec-itemNav__nav li ul li ul::before {
    top: 7px;
}

3.　キャッシュ削除

• cssを変更したため、キャッシュを削除し表示が変更できるようになったことを確認します。