[たけ]

シェフさん、こんばんは！

https://saruwakakun.com/html-css/reference/ul-ol-li-design

上記のようなサイトから見出しデザインやリストデザインを使いたいのですが、
どうしたらよいでしょうか？

また、以前リストデザインを追加CSSに入れたら、トップページまで影響を受けてしまいました。

やり方を教えていただけると、うれしいです！

よろしくお願いいたします。

[シェフ]

追加CSSはあらゆる場所に反映されるため、「投稿記事だけ」のように限定する場合はクラス名やIDを指定する必要があります。

例えば、固定ページなどを含めた記事ページのみにデザインを反映させる場合は以下のようなCSSになります。

.article-body ul,.article-body ol {
 color: red; /* 文字の色を赤にする */
}

[たけ]

シェフさん、こんばんは！

.article-body ul,.article-body ol {
color: red; /* 文字の色を赤にする */
}

これを追加CSSに入れて、おけばよいのでしょうか？

それか、子テーマのテーマ編集でも、変更する方法があれば教えてくれませんか？

見出しやリストを自分好みに変えてみたいですm(_ _)m

[シェフ]

すみません、質問内容を深く理解していないんですが、先ほどのCSSではダメでしょうか？
追加することで反映されるはずなんですが、反映されていないですか？
また、子テーマで編集する場合は外観→テーマの編集と進みます。
ただ、その画面の上部に記載されているように、現在は追加CSSで編集した方が色々と便利です。

[たけ]

シェフさん、こんばんは！

.article-body ul,.article-body ol {
color: red; /* 文字の色を赤にする */
}
を追加CSSに入れて下のCSSを入れてもダメでしたが、

.ul {
border: solid 2px #ffb03f;
padding: 0 0.5em;
position: relative;
}

.ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}

.ul li:before {
font-family: “Font Awesome 5 Free”;
content: “\f14a”;
position: absolute;
left : 0.5em; /*左端からのアイコンまで*/
color: #ffb03f; /*アイコン色*/
}

.ul li:last-of-type{
border-bottom: none;
}

ulの前に下のようにarticle-bodyを付けたら、投稿部分のみ変更できました。
.article-body ul {
border: solid 2px #ffb03f;
padding: 0 0.5em;
position: relative;
}

.article-body ul li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}

.article-body ul li:before {
font-family: “Font Awesome 5 Free”;
content: “\f14a”;
position: absolute;
left : 0.5em; /*左端からのアイコンまで*/
color: #ffb03f; /*アイコン色*/
}

.article-body ul li:last-of-type{
border-bottom: none;
}

ありがとうございました！

[投稿者]

投稿