WordPress テーマ DecorMe のリストを少し修正
この WP サイトでは Burger Themes というサイトの DecorMe の無料版を使っていますが、番号付きリストに変な黄色い■形が表示されていることに気づきました。
ブラウザでインスペクトしてみると ■形は li の :before で表示しているようです。 ul も ol も 指定がないので両方の箇条書き要素にあたってしまっているようです。実際の CSS はこうなっていました。
.post-items li:before {
content: "";
width: 5px;
height: 5px;
background-color: var(--bs-primary);
margin-right: 18px;
display: inline-block;
vertical-align: 3px;
outline: 2px solid rgba(255, 255, 255, 0.2);
outline-offset: 4px;
}これの content 属性で文字の装飾として■形が表示されているようです。
li の前に ul を入れて番号なし箇条書きの時のみに当たるようにしてみます。さらに ol の時は表示しないようにします。
WordPress の管理画面で[外観] >[カスタマイズ] と進み、 [追加CSS] の画面で以下を投入します。
これだけで OK かと思いましたが、 ul が左へはみ出すので padding-left も追加します。
.post-items ul li:before {
content: "";
width: 5px;
height: 5px;
background-color: var(--bs-primary);
margin-right: 18px;
display: inline-block;
vertical-align: 3px;
outline: 2px solid rgba(255, 255, 255, 0.2);
outline-offset: 4px;
}
.post-items ol li:before {
content: initial;
}
/* ul に左padding 指定 */
.post-items ul {
padding-left: 1rem;
}これでよさそう。
