現在利用しているテーマは、「Simple Life」をベースにアレンジした子テーマです。
このテーマは、リスト属性の最初に文字「>」が付いています。シンプルで好きなのですが、ウィジェットにプラグインを導入した際の設定で少々苦労しました。
導入したプラグイン
「Recent Posts Widget Extended」です。
最新記事をサムネイル付きで表示させたかったので導入しました。
いろいろ細かく設定できてよいですね。順次アレンジしてみます。
実は「Newpost Catch」を先に導入したのですが、cssの設定がうまくいかずに諦めました。
設定のところが日本語で分かりやすかったのに。。
勘違いしていた
最近の記事を表示するソースは、「<ul><li></li></ul>」を使っています。
CSSを調整しないと、テーマのデフォルト設定になっているとおり、リストの先頭に「>」マークが表示されるのです。
サムネイルの左上にマークが付いてしまうのです。これはちょっと格好悪いので、調整しなくてはです。
ということで、リストタグ関連のCSSをいじったのですが、何も起こらず。
てっきり「list-style: none;」で済むと思っていました。
確認のおさらい
そもそも、リストマークに「>」なんてないし、ソースもちゃんと見ていなかったのです。
リストマークの種類
番号なしリストのマークとして利用できるのは、黒丸（disc）、白丸（circle）、四角（square）のみです。
厳密には、list-style-typeに設定できるものなので、数字とかアルファベットとか、最近は漢数字とかイロハとかも指定可能ではあります。
とにかく、その中に「>」は含まれていないのです。
任意指定できると思い込んでいました。。
設定しているところ
ではどうやって特定文字を表示しているのか。
「content」で特定文字や画像を要素の前後に追加できます。
議事要素のbeforeとafterの出番です。
今回の指定では、「クラス li:before」に「content: ‘\f105’;」が指定されています。
Unicodeのf105ですね。けっこうよく見ます。
list-style-typeは最初からnoneなのです。
修正するところ
ウィジェット内にはクラス指定で設定が効いていますので、クラス名後勝ちの法則で、カスタムCSSとして以下を追加しました。
.rpwe-block li:before {
content: none;
}
これをウィジェットの設定の画面で指定できるところが、なんとも使いやすいです。
おかげさまで、サムネイルの左側に出ていたマーカーは、このプラグイン部分でだけ表示されなくなりました。
ご意見やご感想などお聞かせください！ コメント機能です。