見出しやリストデザインを変えたいのですが・・・

By

このトピックには4件の返信が含まれ、2人の参加者がいます。7 ヶ月、 1 週前 たけ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #16289

    たけ

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

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

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

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

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

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

  • #16291

    シェフ
    キーマスター

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

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

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

    たけ

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

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

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

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

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

  • #16297

    シェフ
    キーマスター

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

  • #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;
    }

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

トピック「見出しやリストデザインを変えたいのですが・・・」への新規返信追加は締め切られています。

スポンサーリンク