list-style-typeをアルファベットとか漢数字とかイロハとかに設定しようと思ったら、テーマのstyle.cssで、liにlist-style-type:noneが設定されていて、頭に来た話

liタグにリストマークが付くのが不要だから、それを消すのをデフォルトにしてる人って多いよね。

その場合

ol, ul {
    list-style: none;
}

のように、olとulをセレクターにして、list-style: none;を設定してくれればいいのに、なぜか、liをセレクターにして、list-style: none;を設定しているWordPressテーマがあってね。

そのWordPressテーマってのが、Welcart Basicなんですよ。

こんな風にね。

/*style.cssの194行目*/
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*1340行目*/
.entry-content ol li,
.item-description ol li {
	list-style: decimal;
	line-height: 180%;
}

投稿の編集エリアでインラインでリストスタイルをアルファベットとか漢数字とかイロハとかに設定しようと思って、

<ol style="list-style-type:lower-alpha;">
    <li>リスト項目</li>
    <li>リスト項目</li>
    <li>リスト項目</li>
</ol>

って書いても、アルファベットに変わらないんですよ。

だって、liをセレクターに設定してるんだから、上書きするには

<ol">
    <li style="list-style-type:lower-alpha;>リスト項目</li>
    <li style="list-style-type:lower-alpha;>リスト項目</li>
    <li style="list-style-type:lower-alpha;>リスト項目</li>
</ol>

って書かないといけない。

そんなん、liタグの数だけ同じこと書かなきゃならないなんて面倒くさいでしょ。だから、その親のolに設定したいんですよ。

だけどね、↓のようにテーマのstyle.cssに書いてるから、できないんですよ。

/*style.cssの194行目*/
ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*1340行目*/
.entry-content ol li,
.item-description ol li {
	list-style: decimal;
	line-height: 180%;
}

自分はカスタマイズする際には、テーマのファイルには直接変更を加えない主義なんで、上記の場所を直接変更せずに上書きをしたいけど、「list-styleの指定のなし」みたいに、上記のlist-styleの設定を「無」にする方法はないんですね。

なので、上書き用のクラスをカスタマイズ用のCSSに書きましたよ。

こうすれば、Gutenbergのブロック設定の「高度な設定」に、「lower-roman」のようにクラス名を入力すれば、list-styleを任意に設定できますです。

ol.lower-roman li{
	list-style-type:lower-roman!important;
}

ol.upper-roman li{
	list-style-type:upper-roman!important;
}

ol.lower-greek li{
	list-style-type:lower-greek!important;
}

ol.decimal li{
	list-style-type:decimal!important;
}

ol.decimal-leading-zero li{
	list-style-type:decimal-leading-zero!important;
}

ol.lower-latin li{
	list-style-type:lower-latin!important;
}

ol.lower-alpha li{
	list-style-type:lower-alpha!important;
}

ol.decimal li{
	list-style-type:decimal!important;
}

ol.upper-latin li{
	list-style-type:upper-latin!important;
}

ol.upper-alpha li{
	list-style-type:upper-alpha!important;
}

ol.cjk-ideographic li{
	list-style-type:cjk-ideographic!important;
}

ol.hiragana li{
	list-style-type:hiragana!important;
}

ol.katakana li{
	list-style-type:katakana!important;
}

ol.hiragana-iroha li{
	list-style-type:hiragana-iroha!important;
}

ol.katakana-iroha li{
	list-style-type:katakana-iroha!important;
}

ol.hebrew li{
	list-style-type:hebrew!important;
}

ol.armenian li{
	list-style-type:armenian!important;
}

ol.georgian li{
	list-style-type:georgian!important;
}

コメント

タイトルとURLをコピーしました