WordPressのウイジェット(カテゴリ、固定ページ、アーカイブ)のリスト手前にFont Awesomeを設置するカスタマイズ方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

alt

WordPressウイジェットの、アーカイブやカテゴリ、固定ページなどは、基本的に以下のようになっています。

アーカイブウイジェットカテゴリーウイジェット固定ページウイジェット

今回は、こういったリストの先頭にFont Awesomeでワンポイントを入れる方法を紹介したいと思います。

最終的には、以下のような表示を目指したいと思います。

アーカイブウイジェット(Font Awesome適用後)カテゴリーウイジェット(Font Awesome適応後)固定ページウイジェット(Font Awesome適用後)

スポンサーリンク
レクタングル(大)広告

ウイジェットのリスト構造

ウイジェットのリスト構造<li>は、基本的に以下のようになっています。

ulとliなどのリスト構造なので、CSSなどでリストスタイルを指定して画像を指定しても、ワンポイント置くこともできます。

ただ、その方法だと、画像の準備が必要ですし、他にやり方を紹介されているページもたくさんあると思うので、今回はFont Awesomeを利用して、スタイルシートを使って指定する方法を紹介します。

リストにFont Awesomeを指定する手順

まずはウイジェットのリスト先頭に、Font Awesomeを指定する簡単な手順を説明します。

主な手順は以下のようになります。

  1. Font Awesomeを使用する準備をする
  2. Font Awesomeから利用したいアイコンを見つけUnicodeナンバーを取得する
  3. ブラウザの開発ツールでCSSセレクタを見つける
  4. CSSを編集する

こんな感じになります。

以下では、順を追って説明します。

Font Awesomeを使用する準備

Font Awesome

Font Awesomeを使用するには、Font Awesomeを使うためのファイルを読み込む必要があります。

もう既にFont Awesomeが読み込まれている場合は、この設定は必要ありません。Simplicityを利用している場合も必要ありません。

一番簡単な方法は、<head></head>内に以下のタグを挿入することです。

他にも、自分のサーバーにファイルを置く方法もありますが、その方法についてはGet Startedを参照してください。

※なるべく最新版を利用してください。

利用したいアイコンを探す

The icons

次に、利用したいアイコンをThe Iconsから、探してきます。

The Iconsに行くと、以下のようにアイコン一覧があるので使用したいアイコンをクリックします。

アイコンが並んでいる

今回は、以下のアイコンフォントを使うとして、重要になってくるのは「 Unicode」と書いてある赤枠の部分です。

Unicodeナンバーを見る

この「Unicodeナンバー(コード)」を覚えておくか、メモしておいてください。

開発環境でCSSセレクターを見つける

次は、ウイジェットのリストをCSSから変更するために、ブラウザのWEB開発ツールから、CSSセレクターを見つけます。

今回は、僕のやっている2つのブログとも、Chromeユーザーがダントツに多いので、Chromeのデベロッパーツールを使用した方法を紹介します。

今回は、例としてアーカイブウイジェットと、カテゴリウイジェットのCSSセレクタの取得方法を紹介します。

アーカイブウイジェットリスト部分のCSSセレクタ取得

まずは、リストの上で右クリックして「要素を検証」を選択してください。

垢のリストの要素を右クリック

すると以下のようにウェブマスターツールが立ち上がります。

ウェブマスターツール

そしてよく見ると、先程右クリックしたHTML要素にフォーカスが当たっているので注目してみます。

アーカイブウイジェットリストのソース

すると、フォーカス周辺は以下のようなHTMLソースになっています。

アーカイブウイジェットは、リスト一つ一つに固有のIDが振られていないので、<li>あたりに次のようなCSSセレクターを割り振ることができます。

  1. 選択したウイジェットのみに適用されるCSSセレクタ
  2. アーカイブウイジェットすべてに適用されるCSSセレクタ

選択したウイジェットのみ

選択したウイジェットのみに適用されるCSSセレクタは以下のようになります。

#archives-9の番号は、環境によって違いますので、自身のものに合わせてください。

アーカイブウイジェットすべてに

アーカイブウイジェットすべてに適用されるCSSセレクタは以下のようになります。

ここらへんはややこしいかもしれませんが、使っていくうちに、そのうち慣れると思います。

詳しくは、以下のページを参考にしてください。

12436288584_94d6bc46d2_b.jpg
CSSの基本解説・チュートリアル

カテゴリウイジェットリスト部分のCSSセレクタ取得

こちらも、先程同様Chromeのウイジェットリスト上を右クリックして「要素の検証」を選択してください。

カテゴリーウイジェットの要素を選択

すると、「カテゴリウイジェット」、「固定ページウイジェット」の場合は、以下のようなソースが表示されます。

ポイントとなる要素

今回ポイントとなるのは、アーカイブウイジェットとは違って、<li>には固有のclass名が与えられるということです。このクラス名を使用すれば、個別に先頭アイコンを指定することができます。

もちろん、先程と同様に1、2も選択できます

  1. 選択したウイジェットのみに適用されるCSSセレクタ
  2. カテゴリウイジェットすべてに適用されるCSSセレクタ
  3. それぞれのカテゴリリストに対して適用されるCSSセレクタ

選択したウイジェットのみ

選択したウイジェットのみに適用されるCSSセレクタは以下のようになります。

#categories-9の番号は、環境によって違いますので、自身のものに合わせてください。

アーカイブウイジェットすべてに

アーカイブウイジェットすべてに適用されるCSSセレクタは以下のようになります。

それぞれのカテゴリリストのみに

それぞれのカテゴリリストのみに適用されるCSSセレクタは、以下のように書いていけばOKです。

こちらも、class名はそれぞれのカテゴリによって違うので、その都度デベロッパーツールなどから確認してください。

CSSを編集する

最後に、これまでのことを踏まえてCSSを編集します。

WordPressでしたら通常は、style.cssに記入すればOKかと思います。

ウイジェットのリスト前にFont Awesomeのフォントを挿入するには、基本的にはこのような書き方になります。

要は、先の手順で取得した[取得したUnicode]と[CSSセレクタ]の2箇所を、どんどんはめ込んでいってやれば設定できます。

:befpre議事要素については、以下を参照してください。

12436288584_94d6bc46d2_b.jpg
HTMLタグ・スタイルシート・特殊文字等の早見表

アーカイブウイジェットリストの設定例

例えば、アーカイブウイジェットリストすべてを挿入するのであれば、以下のように書きます。

アーカイブウイジェットすべてに適用される書き方。

Unicodeの手前に\を忘れないでください。margin-rightは環境に合わせて調節してください。

※Font Awesome最新版のファイルを使用しないと、サイトに表示されているUnicodeとファイルのUnicodeが違う場合があります。そうすると、アイコンが表示されないので、ご注意ください。

style.cssにこのように記入すると、以下のように表示されます。

アーカイブウイジェット(Font Awesome適用後)

Font Awesomeにはいろいろなアイコンフォントがあるので自由に選択する出せ。

カテゴリーウイジェットリストの設定例

先程、ウイジェットリスト全体にスタイルを適用する方法は紹介したので、今回はカテゴリリストそれぞれにアイコンフォントを設定する方法を紹介します。

例えば次のようなリストがあった場合は、

カテゴリウイジェットリスト

以下のように設定します。

すると、以下のような表示になります。

カテゴリーウイジェット(Font Awesome適応後)

編集の効率的には以下のように書いた方が良いのですが、説明がややこしくなってしまいます。ですので今回は説明を単純化するために入って前述のように書きました。

この記述方法にピンと来た場合は、こちらの書き方でもOKです。

固定ページウイジェットリストの設定例

固定ページウイジェットも基本的にはカテゴリウイジェットと同じように設定します。

こんな感じなのを

固定ページウイジェット

以下のように設定すると

以下のように表示されます。

固定ページウイジェット(Font Awesome適用後)

まとめ

このように、することでウイジェットリストにFont Awesomeでワンポイントをつけることができます。

ちょっと手順は面倒くさいです。しかし、この面倒くささのゆえに他にやっている人もあまりいないので、サイトに訪れてくれた読者が「凝ってるサイトだなぁ」と思ってくれるかもしれないし、思ってくれないかもしません。

ただ、他のサイトと、ちょっと差別化したい場合などには良いかもしれません。