Simplicity2のサイドバーウィジェットのタイトルの前にFont Awesomeのアイコンフォントを表示する方法

WordPressのテーマ「Simplicity2」の各サイドバーウィジェットのタイトルの前にFont Awesomeのアイコンフォントを表示するCSSの表記方法について覚書。

Simplicity2はとても優れたテーマで名前の通り非常にシンプルで洗練されたデザインのテーマ。でも少しだけ色がほしいなと思って各サイドバーのタイトルの前にサイドバーに関連したFont Awesomeのアイコンフォントを表示するように変更した。

その際のCSSについて覚書きしておきます。

今回のカスタマイズイメージ

こんな感じでサイドバーの各タイトルの手前にアイコンフォントを色付きで表示します。

サイドバーのタイトルの手前にアイコンフォントを表示させるカスタマイズ方法を説明します。

各サイドバーのタイトルた前にFont Awesomeのアイコンフォントを表示するためには、各サイドバーのid属性を調べる必要があります。

id属性を調べる方法は、chromeでwebサイトを表示し、サイドバーのタイトル付近で右クリックし、ショートカットメニューの"検証"をクリックします。

以下はサイドバーウィジェット「[S]人気記事」ウィジェットの場合の例です。

以下のようにchromeの右側にデバッグ用のウィンドウが表示されます。

ウィンドウに表示された内容を見ると、「[S]人気記事」サイドバーのタイトルはh3タグが使われており、サイドバーの名前は"popular_ranking-2"であることがわかります。

各サイドバーのタイトルの手前に表示するFont Awesomeのアイコンフォントを探します。使えるアイコンフォントは以下のページから探すと探しやすいです。

使いたいアイコンフォントが見つかったら、そのフォントのUnicodeをメモしておいてください。 Unicodeは、[]内のx以降の文字列です。

例えば使いたいアイコンフォントのUnicodeが[]であれば、CSSに記述するUnicodeは、"f17b"となります。

カスタマイズのためのCSSの記述は子テーマのCSSファイルに記載します。

子テーマのCSSファイル"wp-content\themes\simplicity2-child"フォルダにある"style.css"ファイルです。

子テーマの"style.css"をダウンロードし、以下のコードを記載して再度同じフォルダに上書きでアップロードします。

#popular_ranking-2 h3:before {
 font-family:"FontAwesome";
 margin-right:5px;
 font-size:120%;
 color:#FF1493;
 content:"\f004";
}

6行目の"content:"に使いたいアイコンフォント(ハードマーク)のUnicodeが指定されています。

使用するアイコンフォントのUnicodeは、先頭に"\(バックスラッシュ)"を付加して"(ダブルクォーテーション)でくくって指定します。

今回はSimplicityの「[S]人気の記事」サイドバーウィジェットの場合を例として説明しましたが、他のサイドバーウィジェットについても同様に「サイドバーのカスタマイズ方法」の3ステップを行えばよいです。

SimplicityとSimplicity2ではサイドバーのタイトルに使われているタグが異なるので注意してください。

Simplicityではサイドバーのタイトルはh3タグですが、Simplicityはh4だったと思います。

Simplicity、Simplicity2は、特にCSSを使ったカスタマイズをせずそのまま使っても十分洗練された素晴らしいWordPressのテーマです。

カスタマイズしようと思った時も子テーマにスタイルの記述をするだけで簡単に変更できる点も大変優れており、初心者にも本当に優しい作りになっていると思います。

Stingerとよく比較されますが、私はSimplicityの方が使いやすく、また構造も分かりやすかったためずっとSimplicityシリーズを使っています。

このような素晴らしいテーマを無償で提供していただけることに感謝です！