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

自分の投稿を見ていてふと気になったのが、番号なしのリスト。デフォルトだと<ul><li> 前に付く「」が少し寂しいと感じておりました。

皆さんも同じように感じた事がありませんか?

 

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

 

目次 ▼

スポンサーリンク

Font Awesomeの読み込みを確認

アイコンの表示には、Font Awesome「フォントオーサム」のアイコンを使用しています。

まず、Font Awesomeを利用するには、以下のいずれかに該当していないと表示されないので確認してください。

  1. ファイル一式をダウンロードしてWordpressテーマにアップして利用する方法
  2. CDN を利用して表示する方法

この2つが用意されています。

確認方法

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

CDNを利用している場合

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css" type="text/css" />

 

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

読み込みコードを記述する場所

もう一度同じ事を言うような感じでごめんなさい。大事なことなので。

記述する場合は、管理画面の「外観」 >「 テーマの編集」 > header.phpの</head>タグ内に書き込みます。

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

まず リストの頭に付く「・」をアイコンを消して、アイコンに変更するだけなら以下のコードのように、ulのリストスタイルをCSSでlist-style:none;に指定してliの疑似要素である「before」フォントを表示するだけです。

ul {
  list-style: none;
}

ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  color: #2aa5d9;
}

ですが、これだと全てのリストに変更が加わってしまう事が分かると思います。

なので 肝心なのは、どこのリストマーカーをアイコンフォントに変更するかって事になりますです。

ここでは例として投稿ページのリストマークを変えていきますので、使用しているテーマのセレクタを確認しておきましょう。

簡単な確認方法

theme checkでもこういった使い方にするように注意されるので、普通のWordpressテーマであれば、articleセクションで囲み、各記事それぞれにID、classが付くようになっているはずです。

なので基本は、article ul > li#post ul >li で大丈夫ですが、あちらこちらでarticleを使ってる場合は伝承されたり、#postを使いまわしてる可能性が有りますので、一応確認しておきます。

簡単な確認方法ですが、ブラウザのデベロッパーツール「開発者ツール」を使えば簡単です。

開発者ツールの使い方

まず、ブラウザを開いて確認したい箇所「投稿ページ」で右クリックすると一番下に「検証」というのが出てきますので、クリックします。

「検証」をクリックしたら以下の画像のようになります。

「Elements」のHTMLを検証してる部分を見ると、記事部分が青色でハイライトされてるのが分かります。

その部分を見ると、投稿記事はarticleで囲まれて セレクタが #postだという事になります。

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

article #post ul > li {
  list-style:none;
}
article #post ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  margin: 0 5px 0 -20px;
  color: #666;
}

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

content: “\f138”;この部分でアイコンの種類を指定しているのですが、これをチョイスするに、fontawesomeのページにジャンプして、表示したいアイコンをクリックします。

各アイコンそれぞれに Unicodeが付属してるので、それをチョイスするだけでOKです。

少し見えにくいですがこんな感じで表記されています。

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

article #post ul > li {
  list-style:none;
}
article #post ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  margin: 0 5px 0 -20px;
  color: #666;
}
article #post ul > li > ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  color: brown;
}
article #post ul > li > ul > li > ul > li::before {
  content: "\f138";
  font-family: FontAwesome;
  color: #000;
}

 

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

これは単純に入れ子にしたリストスタイルに対して色を変更しているだけですので、カラーはサイトに合わせて適所変更して下さい。

あと、横のmarginはネガティブマージンで少し戻してたり、リストの間の間隔に余白を入れたりしてますが、これはお使いのテーマによって表示が違ったりしますので、スタイルを確認して整える必要があります。

まとめ

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

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

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

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

 

The following two tabs change content below.

けんじ

どうも、運営者のけんじです。 Wordpressが好きで、テーマをちょこちょこ弄ってます。 気になった事をリサーチして書くことが多いので、主に雑記ブログだと思ってください。 こんなブログですがどうぞ、よろしくお願いします。

スポンサーリンク

スポンサーリンク

フォローして最新情報を受け取る

コメントはこちらからどうぞ

メールアドレスが公開されることはありません。

お手数ですが* が付いている欄は必須項目になります。

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)