WordPressテーマSANGOの質問

サイト内の全ての箇条書きを種類14のシェブロンマークにしたい

アバター
もか

試してみた所、線なしのシェブロンマークを表示できました!
お忙しい中、教えていただきありがとうございました!

実は、サイト内の全ての箇条書きを種類14のシェブロンマーク(枠線なし)で装飾したいと思っているのですが、これを一括でやる方法はあるのでしょうか?

追加の質問になってしまい申し訳ありません。
もしそういう方法があれば教えていただけると嬉しいです。

SANGOの箇条書き種類一覧
記事に様々なスタイルの箇条書きを挿入する
コメントへの回答
サルワカくん
サルワカくん
2018/02/27
.entry-content ul {
    position: relative;
    padding: 0 0 0 1.5em;
    border: none;
}
.entry-content ul li {
    position: absolute;
    left: 0;
    color: skyblue;
    font-family: FontAwesome;
    content: "\f138";
}

でいけるかと思います。

アバター
もか
2018/02/27

ご返信ありがとうございます!

教えていただいた上記コードを追加してみたのですが、シェブロンマークが表示されず、レイアウトが大きく崩れて、箇条書き部分が左によってしまいました。
何度も申し訳ありませんが、原因などわかれば教えていただけますでしょうか。

サルワカくん
サルワカくん
2018/02/27

強縮ながら一部コードに誤りがあったので、さきほどのコメントを修正しました。
具体的には、下の.entry-contentの次はulではなくul liになります。
お手数ですが、もう一度お試し頂ければと思います。

アバター
もか
2018/02/27

試してみた所、無事にシェブロンマークが表示されました!
本当にありがとうございます!

お忙しい中、大変お手数おかけしました。
ご丁寧にありがとうございました。

アバター
もか
2018/02/27

修正していただいたコードを追加してみたのですが、箇条書き部分と目次の部分が全て重なるような感じで大きく崩れてしまいました。
シェブロンマークも表示されませんでした。

何度もお手数おかけしてしまい申し訳ありません。

サルワカくん
サルワカくん
2018/02/27

おぉ、良かったです!よろしくお願いします。

サルワカくん
サルワカくん
2018/02/27

うーん、下記のCSSでどうでしょうか。

.entry-content > ul {
    position: relative;
    padding: 0 0 0 1.5em;
    border: none;
}
.entry-content>ul>li {
    list-style: none;
}
.entry-content>ul>li:before {
    position: absolute;
    left: 0;
    color: skyblue;
    font-family: FontAwesome;
    content: "\f138";
}

目次にもulタグが使われる仕様のようなので、目次のulは除外されるよう、記事直下のul(divタグなどに囲まれていないulタグ)にのみ
適用されるようにしています。そのため、シェブロンマークが表示されない箇所(直下でないulタグ)については「スタイル」から挿入して頂くようお願いします。