お世話になります。
商品一覧のページでカテゴリーを選ぶと、そのカテゴリーの下にある子カテゴリーが箇条書き「・」で羅列されますが、横並びにしてボーダーで囲ったボタンのような感じにしたいと思っています。
スクリーン内の<style>に
/* カテゴリーリスト */
.child_category_list_3 category current_category {
font-size: 15px !important;
list-style: none !important; /* 丸いマークを消しています */
}
.child_category_list_3 category current_category li {
text-align: center !important;
border:1px solid #ccc !important;
background-color: #fff !important;
display: inline-block !important;
}
.child_category_list_3 category current_category li a {
text-decoration: none !important;
color: #333 !important;
font-weight: bold !important;
}
を追記したのですが、反応しません。
ダメ元でimportantを入れてもダメでした。
li classは"category_main_menu"と指定されているのでそのせいかもしれませんが、こちらはレフトナビのカテゴリリストにも同じクラスを持っているやつがいるのでこれを書き換えるとレフトナビが崩れます。
どうにかしてパンくずリストの下に出ているカテゴリーリストのデザインだけを編集できないでしょうか。
よろしくお願いいたします。
HTML・CSSコードの記述については基本的にサポート範囲外となりますので予めご了承下さい。
各カテゴリにて表示される「現在カテゴリ」を横並びにする事を希望されていると認識致します。
※「現在カテゴリ」は親カテゴリに所属されているカテゴリをリンクとして表示するパーツとなります。
この「現在カテゴリ」に対しスタイルを充てるとご認識の通り他のカテゴリにも適用されてしまいますので、
「現在カテゴリ」の前後に特定のclassを追加する必要がございます。
classを追加した後にそのclass内にある<ul><li>に対しスタイルを充てることで横並びにする事ができます。
上記内容の設定サンプルを案内致します。
※こちらの方法は各リンクのサイズやその他相対的に決定する他のエリアの横幅などは考慮されていません。
下記方法にて横並びにした後で調整を行って頂きますようお願い致します。
（カテゴリの数により異なりますので横幅などのサイズ関連についてはご利用者様にて調整をお願い致します）
1.特定のclassを追加します。
ページレイアウト管理（デザイン設定＞レイアウトタブ）を開きます。
2.[未使用パーツ]の[新規作成]から「フリーパーツ」を作成して[HTMLモードに切り替える]を押して以下を記載して保存します。
<div class="category_test"><div>
↑class名は任意です。
3.2で作成したパーツをレイアウト図内にある「現在カテゴリ」のすぐ上に配置します。
4.[未使用パーツ]の[新規作成]から「フリーパーツ」を作成して[HTMLモードに切り替える]を押して以下を記載して保存します。
<div style="clear: both"></div>
</div></div>
5.4で作成したパーツをレイアウト図内にある「現在カテゴリ」のすぐ上に配置します。
6.レイアウト図上部にある[スクリーン]の設定ボタン（ギアアイコン）を押します。
7.[スクリーン設定]画面の[<head>追加：]項目に「現在カテゴリ」を横並びにするスタイルを記載して保存すれば完了です。
<style>
.category_test > ul > li {
float: left;
display: inline-block;
padding: 20px;
border: 1px solid #000;
}
</style>
※「category_test」は2で記載したものと同じにして下さい。
※paddingの数値は任意です。
※その他、スタイルを追加して横幅や文字サイズ、背景色などを調整して下さい。
ご案内は以上です。
こちらは今後のバージョンアップによりスタイルが崩れてしまう可能性があり、またはご利用者様の他のスタイルにより正常に適用されない場合もあり動作は保証できかねますので、参考としてご覧下さい。