wordpressのCSSについて

質問

非常に低レベルの質問で申し訳ありません。
ｗordpressのCSSに関しての質問です。

現在、「http://mobilewifi-r.net」のサイトを運営しているのですが、
「https://mobilewifi-r.net/list/」のカテゴリページだけ、
グローバルメニューに矢印のアイコンが入って表示が崩れています。

原因として考えられることはなんでしょうか？
自分でも原因を探ってみましたが、どうしても分かりません。

どなたか詳しい方がいれば、ぜひご教授いただきたいです。
お手数ですが、よろしくお願いいたします。

回答No.1

Rocky2836 · ベストアンサー

矢印が表示されていない"意図した表示"は下記で制御
.global-nav-in li {
display: table-cell;
list-style: none;
position: relative;
vertical-align: middle;
margin: 0;
text-align: center;
}

一方、矢印のアイコンは下記で制御
.category-list li, .sub-conts .widget_categories li {
list-style: none;
margin-bottom: 1em;
padding-left: 15px;
background: url(./images/icon/icon-tag.png) left 6px no-repeat;
}
されていました。
上記cssのうち、該当部分は
".category-list li"かと思います。

"矢印を表示する"方のcss
.category-list li
の".category-list"(bodyタグに当たっているclass)が、
"意図した表示"を制御しているcss
.global-nav-in li
の".global-nav-in"(bodyタグ内にあるdivタグに当たっているclass)
より親要素であるため、こちらのcssが勝っているのが原因かと思います。

回避する方法はいくつかありますが、".category-list li"のような指定方法は、
【.category-list】内のliタグ全てに適用させる書き方なので、
もう少し【適用させたい要素のピンポイント】に近い要素単位でcssを当てると融通が聞くかもしれません。
※もちろんなるべく多くの要素いっぺんに効かせたいなどの場合は、このような指定方法は有効なやり方の一つではあると思います。

少ない手数でご質問の箇所だけを解消　ということで言えば、
".global-nav-in li"のcssに
background: none !important;
padding-left: 0 !important;
を追記
(もうちょっと言うと、".global-nav-in ul"にmargin: 0 !important;も追記)
すれば、質問に上がっている2ページの表示は揃うかと思います。
※むやみに"!important"を当てると、それはそれで弊害も出るとも言えますが。。

長々とすみません。ご参考になれば。

お礼

ご丁寧にありがとうございます。

試してみたところ直りました。
本当にありがとうございました。

回答No.2

4017B

このテーマって「賢威(v7.1)」ですよね？

- 賢威7 https://rider-store.jp/keni/

だったらこんな何処の馬の骨とも分からない怪しげな連中に聞くよりも、購入元の公式HPの質問フォーム等から問い合わせした方が良いのでは？そのための有料テーマなんですから。

それとも、もしかして正規Userとしては聞くに聞けない事情がおありとか…？！

P.S.
解決法としては後付で自前CSSを一番最後に読み込ませる様に fanctions.php に追記して、その自前CSSに何か適当な後付スタイルを追記して置く事で回避可能ですが…。自力である程度のCSSやPHP等の編集技術が無いと無理です。