- このトピックには4件の返信、2人の参加者があり、最後にたけにより5年、 3ヶ月前に更新されました。
-
投稿者投稿
-
-
2019.1.10 20:40 #16289たけゲスト
シェフさん、こんばんは!
https://saruwakakun.com/html-css/reference/ul-ol-li-design
上記のようなサイトから見出しデザインやリストデザインを使いたいのですが、
どうしたらよいでしょうか?また、以前リストデザインを追加CSSに入れたら、トップページまで影響を受けてしまいました。
やり方を教えていただけると、うれしいです!
よろしくお願いいたします。
-
2019.1.11 09:55 #16291シェフキーマスター
追加CSSはあらゆる場所に反映されるため、「投稿記事だけ」のように限定する場合はクラス名やIDを指定する必要があります。
例えば、固定ページなどを含めた記事ページのみにデザインを反映させる場合は以下のようなCSSになります。
.article-body ul,.article-body ol { color: red; /* 文字の色を赤にする */ }
-
2019.1.11 17:31 #16296たけゲスト
シェフさん、こんばんは!
.article-body ul,.article-body ol {
color: red; /* 文字の色を赤にする */
}これを追加CSSに入れて、おけばよいのでしょうか?
それか、子テーマのテーマ編集でも、変更する方法があれば教えてくれませんか?
見出しやリストを自分好みに変えてみたいですm(_ _)m
-
2019.1.12 03:25 #16297シェフキーマスター
すみません、質問内容を深く理解していないんですが、先ほどのCSSではダメでしょうか?
追加することで反映されるはずなんですが、反映されていないですか?
また、子テーマで編集する場合は外観→テーマの編集と進みます。
ただ、その画面の上部に記載されているように、現在は追加CSSで編集した方が色々と便利です。 -
2019.1.13 21:29 #16300たけゲスト
シェフさん、こんばんは!
.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;
}ありがとうございました!
-
-
投稿者投稿
- トピック「見出しやリストデザインを変えたいのですが・・・」には新しい返信をつけることはできません。