自分の投稿を見ていてふと気になったのが、ulリスト前に付く「・」が少し寂しいなってことでCSSでちょこっとカスタマイズしてみたのでその紹介です。

スポンサーリンク

Font Awesomeの読み込みを確認

私の場合はfontawesome「フォントオーサム」のアイコンを使用しています。Font Awesomeを利用するには、ファイルをダウンロードしてきて利用する方法と、 CDN を利用する方法の2つが用意されています。
なので、これらを読み込まないと表示されないので、以下のコードが記述されているか確認してください。

確認方法

記述されている場合は、管理画面の外観 > テーマの編集 > header.phpのheadタグ内に記述されているはずなので確認してみてください。

CDNを利用している場合

ファイルをテーマのフォルダ等から利用している場合

上記の両方とも見当たらない場合ですが、今回は簡単なCDNを利用している場合のコードをheadタグ内に追加すればOKです。

ulリストの「・」をアイコンに変える

まず リストに付く「・」をアイコンを変えるだけなら以下のコードのように、ulをCSSで消してフォントを表示すればいいのですが、これだとすべてのリストになってしまうのが分かると思います。

なので肝心なのは、どこのリストを変えるかってとこですね。

では、ここでは例として投稿ページのリストマークを変えていきます。
っとその前にテーマによってセレクタが違うので確認しておきましょう。

「例」simplicityでは.entry-content
「例」Candystyleではpost-content

このように記事内の親要素を指定します。

簡単な確認方法

簡単な確認方法ですが、ブラウザのデベロッパーツール「Chrome」を使えば簡単です。以下の画像を参考に確認していきます。
まず、ブラウザを開いて確認したい箇所「投稿ページ」で右クリックすると一番下に「検証」というのが出てきますので、クリックします。

次に「検証」をクリックしたら以下の画像のようになるはずです。
青色でハイライトされた部分を見ると記事内の親要素は.post-contentなのだという事が分かると思います。

スタイルシートに変更を加える

では、サンプルで書きました上記のソースコードを説明していきます。
まず、リストの「・」を消して疑似要素:beforeでfontawesomeのアイコンを表示しています。

content: “\f138”;この部分でアイコンの種類を指定しているのですが、これをチョイスする場合は、fontawesomeのページにジャンプして、以下の画像のようにアイコンをクリック。

クリックするとこのページにあるUnicodeをチョイスするだけでOK。

入れ子にした階層化のスタイル

上記のソースコードを入れ込むと以下の画像のようになるはずです。

これは単純に入れ子にしたのに対して色を変更しているだけです。
marginなどはネガティブマージンで戻してますが、これはお使いのテーマに合わせてスタイルを整える必要があります。
fontawesomeはアイコンフォントの種類が豊富で数も沢山あるので、自分でも色々探してcontentのアイコンを色々組み合わせてみるのもいいかも。

あと、CSSだけでリストアイコンを表現したサイトが分かりやすくコピペで使えそうだったので、参考にしてみてください。

参考サイト画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10

参考サイトCSSで作るリストデザイン

 

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でCandystyleをフォローしよう!