EC-CUBE4:ヘッダーのカテゴリリストで表示崩れ発生
目次
EC-CUBE4の標準Frameでカテゴリリストの挙動
店舗内カテゴリの登録を終え表示を確認したところ3階層以降のcategoryがプルダウン時に横並びになっていました。
文字数の少ないもの(例えば『鍋』とか)の表記で起こる事を確認。
これはCSSで制御できるだろうと思い場所を探したので備忘録に記します。
管理画面でのカテゴリコントロール箇所
表示されている情報は、管理画面上の『コンテンツ管理>ブロック管理>カテゴリナビPC』です。
しかし、ここにはCSSの記載が無いためカテゴリ関連のスタイルを記載したCSSを探します。
CSSの記載箇所
カテゴリナビ(PC)に関するスタイルシートは下記フォルダに存在しました。
EC-CUBE保存フォルダ/html/template/default/assets/css/style.css
この4898行目から5026行目がカテゴリのスタイルシートになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
ヘッダー:カテゴリナビ ヘッダー内で使用されている商品のカテゴリ一覧として使用します。 `li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。 Markup: include /assets/tmpl/elements/11.4.categoryNavi.pug +ec-itemNav sg-wrapper: <div class="ec-categoryNaviRole" style="padding-bottom:150px;"> <sg-wrapper-content/> </div> Styleguide 11.2.5 */ .ec-categoryNaviRole { margin: 0 auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; font-size: 16px; line-height: 1.4; color: #525263; -webkit-text-size-adjust: 100%; width: 100%; max-width: 1130px; display: none; } .ec-categoryNaviRole:after { content: " "; display: table; } .ec-categoryNaviRole:after { clear: both; } .ec-categoryNaviRole textarea { /* for chrome fontsize bug */ font-family: sans-serif; } .ec-categoryNaviRole img { max-width: 100%; } .ec-categoryNaviRole html { box-sizing: border-box; } .ec-categoryNaviRole *, .ec-categoryNaviRole *:before, .ec-categoryNaviRole *:after { box-sizing: inherit; } .ec-categoryNaviRole img { width: 100%; } .ec-itemNav { margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; } .ec-itemNav__nav { display: block; margin: 0 auto; padding: 0; width: auto; height: auto; list-style-type: none; text-align: center; vertical-align: bottom; } .ec-itemNav__nav li { float: none; margin: 0; padding: 0; width: 100%; text-align: center; position: relative; } .ec-itemNav__nav li a { display: block; border-bottom: 1px solid #E8E8E8; margin: 0; padding: 16px; height: 55px; color: #2e3233; font-size: 16px; font-weight: bold; line-height: 20px; text-decoration: none; text-align: left; background: #fff; border-bottom: 1px solid #E8E8E8; } .ec-itemNav__nav li ul { display: none; z-index: 0; margin: 0; padding: 0; min-width: 200px; list-style: none; position: static; top: 100%; left: 0; } .ec-itemNav__nav li ul li { overflow: hidden; width: 100%; height: auto; transition: .3s; } .ec-itemNav__nav li ul li a { border-bottom: 1px solid #E8E8E8; padding: 16px; font-size: 16px; font-weight: bold; color: white; text-align: left; background: black; } .ec-itemNav__nav > li:hover > a { background: #fafafa; } .ec-itemNav__nav > li:hover li:hover > a { background: #333; } .ec-itemNav__nav li ul li ul { top: 0; left: 100%; width: auto; } .ec-itemNav__nav li ul li ul li a { background: #7D7D7D; } .ec-itemNav__nav li:hover ul li ul li a:hover { background: #333; } |
Class:ec-itemNav__nav li に追記しコントロールする
場当たり的な処理ですが、以下の変更(追記)で孫カテゴリが横並びする現象が発生しなくなりました。
1 2 3 4 5 6 7 8 9 |
/* デフォルトでは 4962行目にあります */ .ec-itemNav__nav li { float: none; margin: 0; padding: 0; width: 100%; min-width: 110px; /* ココ追加 */ text-align: center; position: relative; } |
min-width で設定する値は其々のサイトで異なるかと思います。
また、この処理は一時的な措置であるめ、文字量によって3階層以降の幅が統一されていない状態は解消できていません。そこら辺はまたしっかり作り込むときに探して処理、報告したいと思います。
-
前の記事
自己中とマナー(ちょっと真面目な話) 2018.11.13
-
次の記事
EC-CUBE4:ページ限定スタイルシートの記載方法 2018.11.15
コメントを残す