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

By
  • このトピックには4件の返信、2人の参加者があり、最後にたけにより11ヶ月前に更新されました。
4件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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;
      }

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

4件の返信スレッドを表示中
  • トピック「見出しやリストデザインを変えたいのですが・・・」には新しい返信をつけることはできません。
スポンサーリンク