MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

箇条書きulのリストマークを Font Awesome のアイコンで装飾する方法

テーマによっては違いますが、デフォルトだと<ul>に付く「」が少し寂しいと感じておりました。「<ol>じゃない番号なしの方のリスト」皆さんも同じように感じた事がありませんか?

今回は、Wordpressで Font Awesomeのアイコンを読み込み、CSS「スタイルシート」でちょこっとカスタマイズする方法を紹介します。

Font Awesomeの読み込み

呼び出してない方は簡単にfunctions.phpに追記でOK。
//レンダリングブロックが気になるのでフッターで読み込む
function add_footer_styles() {
    wp_enqueue_style('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css');
};
add_action( 'wp_footer', 'add_footer_styles' );

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

ulのリストスタイルをCSSでlist-style:none;に指定してliの疑似要素である「before」アイコンフォントを表示するだけです。

ul {
  list-style: none;
}

ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  color: #2aa5d9;
}
※これだと全てのリストに変更が加わってしまう事が分かると思います。肝心なのは、どこのリストマーカーをアイコンフォントに変更するかって事になりますです。

特定の要素内だけにするのが手っ取り早いのでボックスを追加してその中にリストを入れるようにします。

こういうボックスの中に入れるということです。
こんな感じですね。
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き

これにFontAwesomeのアイコンを適用します。ボックスの要素内だけに指定します。HTMLはこんな感じで。

<div class="blank-box bb-green">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>

スタイルをこうします。

.blank-box.bb-green ul li {
list-style: none;
}
.blank-box.bb-green ul li::before {
content: "\f138";
font-family: FontAwesome;
color: #2aa5d9;
}
指定するとこうなります。

ボックス自体はただのパディングボックスみたいなもんで、スタイルは適宜変更してやってください。

これが基本のボックス
.blank-box {
padding: 20px;
border-radius: 5px;
margin: 1em 0;
}
あとは追加のクラスに背景色付けてるだけ。
赤色
.bb-red {
background: mistyrose;
}
青色
.bb-blue {
background: #dcf5ff;
}
緑色
.bb-green {
background: #c3ffc3;
}
黄色
.bb-yellow {
background: #ffffa2f2;
}

ただタグ打ちがめんどくさいので、エディタにボタンを追加するかプラグインで登録するのがいいかと思います。

  • 追記:以下5種類WhiteTigerに追加した分です。良かったら使ってください。
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き

HTML


<!-- グレイ -->
<div class="list-box lb-gray">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
<!-- レッド -->
<div class="list-box lb-red">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
<!-- ブルー -->
<div class="list-box lb-blue">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
<!-- グリーン -->
<div class="list-box lb-green">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
<!-- イエロー -->
<div class="list-box lb-yellow">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>

CSS


.list-box {
padding: 12px;
border-radius: 5px;
margin: 1em 0;
}
.list-box ul>li{
list-style: none;
}
.list-box ul>li:before {
content: "\f00c";
font-family: FontAwesome;
color: #fff;
border-radius: 50%;
margin-right: .3em;
padding: 2px;
}
/*灰色*/
.lb-gray {
background: #fbfafa;
border: solid 1px #ddd;
}
.lb-gray ul>li:before {
background: #808080;
}
/*青色*/
.lb-blue {
background: #daf5ff57;
border: solid 1px #00b8ff;
}
.lb-blue ul>li:before {
background: #0073ff;
}
/*赤色*/
.lb-red {
background: #ffe3e673;
border: solid 1px #ff808e;
}
.lb-red ul>li:before {
background: #db4a39;
}
/*緑色*/
.lb-green {
background: #c6ffb79c;
border: solid 1px #25af00;
}
.lb-green ul>li:before {
background: #25af00;
}
/*黄色*/
.lb-yellow {
background: #fdffb98a;
border: solid 1px #ffdc00;
}
.lb-yellow ul>li:before {
background: #ffe100;
}

まとめ

Font Awesomeはアイコンフォントの種類が豊富で数も沢山あるので、自分でも色々探してcontentのアイコンを色々組み合わせてみるのもいいかも。

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

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください