中カテゴリーの表示について

質問一覧 › 対象テーマ: UNIVERSE › 中カテゴリーの表示について
0 Vote Up Vote Down
RindaRinda asked 3年 前

お世話になっております。
中カテゴリーの項目が多すぎて画面いっぱい下まで表示しきれません。
中カテゴリーのフォント、枠サイズ変更及び二列表示にすることは可能でしょうか。
変更方法を教えていただけたら幸いです。
 
参考に自サイトを貼っておきます。
https://formosatech.theshop.jp/
よろしくお願いいたします。

RindaRinda replied 3年 前

おかげさまで解決しました。
迅速な対応ありがとうございます！！

1 Answers
0 Vote Up Vote Down
baseadminBaseDesignInfo Staff answered 3年 前

サイト拝見しました、中カテゴリーがメーカーということで確かに多いですね。

表示の調整は、テーマ設定の一番下にある「【上級者向け】独自スタイルシート」が利用できます。

■中カテゴリーリストのフォントサイズと余白

.menu-container .menu>ul>li>ul.normal-sub>li a {
    padding: 10px 10px;
    font-size: 0.8em;
   }

数値はCSSの参考書などをもとに、自由に調整してください。

ただこの場合はそれだけでも収まらないと思うので、次のような方法も合わせると良いかもしれません。

A. 中カテゴリーリストの幅を制限して回り込ませる（幅を縮めるので長いメーカー名称は切れます）

.menu-container .menu>ul>li>ul.normal-sub>li {
	display: inline-block;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
   }

B. 中カテゴリーリストをスクロール式に

.menu-container .menu>ul>li>ul.normal-sub {
height: 400px;
overflow: scroll;
}

AとBは併用するのではなく、どちらかになると思います。

どちらも、サイトをパッと見ただけという状態での調整です。
もしかしたらマイナーな問題があるかもしれません。ただこの場所でそこまで詰めるのは難しいので、あくまで参考としていただければと思います。
「こうしたい」という具体的な目標と、多少のCSSのノウハウがあれば、上記のコードからの微調整でより最適化はできると思います。

どうぞよろしくお願いします。