【SANGOカスタマイズ】カテゴリーにアイコンを設置する方法

ごるど

最近、SANGOテーマのカスタマイズにハマっている@Golddjpnです。
ブログを始めたばかりだと、ブログを自分好みのデザインにカスタマイズするのが楽しいですよね!
様々なブログのデザインを見て回っていたのですが、カテゴリーにアイコンが設置されているブログが多々ありました。
そこで今回は、SANGOテーマでカテゴリーにアイコンを設置する方法を分かりやすく紹介します!

最終的には、当ブログのようにアイコンを設置することができます。

カテゴリー

「Font Awesome ver4」を使用してアイコンを設置

Font Awesome

SANGOテーマには、初期からアイコンを文字として扱うことができるツールが導入されています。簡単にアイコンを設置することができるので、今回は「Font Awesome ver4」を使用します。

注意
2018年11月28日現在、Font Awesomeはver5がリリースされています。
そのため、アイコンによっては反映されない場合がございますので、ご注意ください。(今回はSANGOテーマに導入されている、Font Awesome ver4に対応しているアイコンを選びましょう)

Font Awesome公式ページから設置したいアイコンを選ぶ

まずは、Font Awesome公式ページへアクセスします。
参考 icons | Font AwesomeFont Awesome Font Awesome公式ページへアクセスすると、たくさんのアイコンが一覧で表示されています。その中からカテゴリーに設置したいアイコンを選んでクリックします。

icons

下記画像のようにクリックしてUnicodeをコピーします。
(クリックすると、自動的にコピーされています)

Unicode Copy

コピーしたUnicodeはメモ帳などに控えておきましょう。

Unicodeとは
Unicodeとは、文字に割り当てられた数字を表したものです。
Font Awesomeはアイコンを文字として扱うことができるのでUnicodeを使用します。

アイコンを設置するカテゴリーのClassを調べる

アイコンを設置するためにはCSS(装飾)を使用します。
Wordpressにはカテゴリーを追加するとカテゴリー固有のClassが付与されます。
まずは、アイコンを設置する際にCSSで指定するClassを調べます。

Google Chromeのブラウザを開いて、自身のブログへアクセス。
Google Chromeのデベロッパー・ツールを使用して、カテゴリーのClassを調べます。
Windowsの場合はF12
Macの場合は右クリックから検証をクリックするとデベロッパー・ツールが開きます。

developer tool

下記画像のようにデベロッパー・ツールの一番左上のアイコンをクリックします。

コンソール

上記の左のアイコンをクリックしたら、アイコンを設置したいカテゴリをクリック。
するとカテゴリ固有のClassが付与されている箇所が表示されます。

classを調べる

このClassの番号をメモしておきます。(カテゴリにーよって番号は異なります)
例 : cat-item-9の場合は、9をメモに控えておきましょう。

SANGOの子テーマを有効化

SANGOの子テーマを有効化する方法は、公式のSANGOカスタマイズガイドに掲載されています。そちらを参考にして子テーマをインストール、有効化してください。
参考 WordPressで子テーマを活用して安全にカスタマイズを行う方法SANGOカスタマイズガイド

カテゴリーにアイコンを設置

いよいよカテゴリーにアイコンを追加します。(あともう少しです!)
SANGOテーマの子テーマを有効化した状態で、
WordPress管理画面から外観 > テーマの編集を選択

WordPress管理画面

下記のCSSを追加します。

  • ●●はデベロッパー・ツールで調べた番号を入力
  • ▲▲はFont AwesomeでコピーしたUnicodeを入力
メモ
colorの箇所はアイコンの色を変更できます。
お好みの色に変更して、ご利用ください。
ファイルを更新するボタンを押して、カテゴリーにアイコンが設置されていれば成功です!
(反映されない場合はキャッシュが原因の可能性があるので、しばらく時間を置くと設置されると思います)
それでも反映されない!という方はもう一度、一から試してみると設置されるかもしれません。

最後に

SANGOテーマで、カテゴリーにアイコンを設置する方法を紹介しました。
ブログを訪問してくれたユーザーを目的のページへ画面遷移させるために、アイコン設置は効果があると思います。
ぜひ、活用してみてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です