(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】ウイジェット カテゴリーで使われているアイコンを変更する

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約3分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR ウイジェット カテゴリーで使われているアイコン

現在の「ウイジェット カテゴリーで使われているアイコン」は下記のようになっています。

【THE THOR】ウイジェット カテゴリー/ナビゲーションメニューのカスタマイズ3

親カテゴリー、子カテゴリー共に丸いアイコンが使われています。

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(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」の表示は、下記の様になりました。

【THE THOR】ウイジェット カテゴリーで使われているアイコンを変更する

今回のカスタマイズ内容は、Webアイコンフォント Font Awesome 5のフォルダ型のアイコンを親カテゴリー、子カテゴリーそれぞれに採用してみました。

最後に

単純に丸いアイコンよりは、少し変わったアイコンの方が楽しい気分になれるでしょう。

Webアイコンフォント Font Awesome 5には多くのアイコンがラインナップされているので、自分の好きなアイコンを使えるのは良いと思います。

Webアイコンフォント Font Awesome 5の設定方法については、前回のエントリー記事「Font Awesome 5.9.0以降を使うためにアカウント登録を行う!」でご確認することができます。

Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。
MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】