【WordPress】Simplicity2のカテゴリーの前にFont Awesomeを挿入~CSSカスタマイズ

【WordPress】Simplicity2のカテゴリーの前にFont Awesomeを挿入~CSSカスタマイズ

WordPressのテーマであるSimplicity2のサイドバーに表示されるカテゴリーアイコンをカスタマイズする方法を紹介します。

単なる「・Webデザイン」だけだと寂しいので「Font Awesome」を挿入してみました。

 

 

Simplicity2のダウンロード

親テーマと子テーマをダウンロード

Simplicity2のダウンロードは以下で行います。

Simplicity2のテーマを使う場合は、必ず子テーマも一緒にダウンロードして下さい。

Simplicity2をダウンロード

子テーマをダウンロードする理由

別の記事でも書いていますが、親テーマのスタイルシート「style.css」にカスタマイズしていると、親テーマがバージョンアップされた場合は、今までのカスタマイズが全て水の泡になってしまいます。

そこで親テーマがバージョンアップされても、カスタマイズの内容を残すために子テーマの「style.css」を使います。

 

子テーマのスタイルシートをカスタマイズ

見出しのデザインなどテーマデザインのカスタマイズは、子テーマの「style.css」を使います。

子テーマの「style.css」を開く

ダッシュボードから「テーマの編集」へ進みます。

そこで「Simplicity2 child」を選択してスタイルシートを書いていきます。

 

Font Awesomeをとは

「Font Awesome」とはアイコンを文字として扱うことを可能にしたツールです。画像ではないので大きさや色を変更することも可能です。

 

カテゴリーの前にFont Awesomeを挿入

CSSをコピペする

それでは、サイドバーのカテゴリー一覧の前にFont Awesomeを挿入してみます。

以下をコピペするだけで装飾できます。

 

装飾見本

上記のCSSを実行すると以下のようなサンプルになります。

カテゴリー名の前にFont Awesomeフォントが追加されました。

 

 CSSをカスタマイズするなら以下を読もう

参考【WordPress】Simplicity2の見出しをCSSでカスタマイズ
参考【WordPress】Simplicity2に目次を入れてCSSカスタマイズ
参考【WordPress】Simplicity2のサイドバー見出しのカスタマイズ-CSSコピペ

 

まとめ

Font Awesomeは、結構使用します。色んな場面で使えるフォントですので一度お試し下さい。

 

この記事が気に入ったら
いいね ! しよう

Simplicity2カテゴリの最新記事