WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」に関するカスタマイズについてまとめてみました。
WordPressテーマ THE THOR ウイジェット カテゴリーで使われているアイコン
現在の「ウイジェット カテゴリーで使われているアイコン」は下記のようになっています。
親カテゴリー、子カテゴリー共に丸いアイコンが使われています。
ZMASAa.blogはWebアイコンフォント Font Awesome 5を導入しているので、アイコンを変更してみました。
ウイジェット カテゴリーで使われているアイコンのカスタマイズ
「ウイジェット カテゴリーで使われているアイコン」のカスタマイズを行います。
カスタマイズ内容
「ウイジェット カテゴリーで使われているアイコン」のカスタマイズは、下記の通りです。
このカスタマイズ内容をthe-thor-childフォルダ内の「スタイルシート(style-user.css)」に追記します。
/************************************ ** ■ウイジェット カテゴリーのアイコンのカスタマイズ ************************************/ .l-sidebar .widget.widget_categories ul li a:before, .menuBtn .widget.widget_categories ul li a:before { font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/ content: "\f65d"; /*親カテゴリのアイコン*/ color: #fff; /*アイコンカラー*/ font-size: 15px; font-weight: 900; } .l-sidebar .widget.widget_categories ul li .children li a:before, .menuBtn .widget.widget_categories ul li .children li a:before { font-family: "Font Awesome 5 Free"; /*FontAwesome 5に設定*/ content: "\f65e"; /*子カテゴリのアイコン*/ color: #fe619a; /*アイコンカラー*/ font-size: 17px; font-weight: 900; }
カスタマイズ後のウイジェット カテゴリーで使われているアイコン
今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」の表示は、下記の様になりました。
今回のカスタマイズ内容は、Webアイコンフォント Font Awesome 5のフォルダ型のアイコンを親カテゴリー、子カテゴリーそれぞれに採用してみました。
最後に
単純に丸いアイコンよりは、少し変わったアイコンの方が楽しい気分になれるでしょう。
Webアイコンフォント Font Awesome 5には多くのアイコンがラインナップされているので、自分の好きなアイコンを使えるのは良いと思います。
Webアイコンフォント Font Awesome 5の設定方法については、前回のエントリー記事「Font Awesome 5.9.0以降を使うためにアカウント登録を行う!」でご確認することができます。
コメント