【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPressTHE THOR

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

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

WordPressテーマ THE THOR

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

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

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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
金銭遊戯~一発逆転の復讐劇~
ナナリズムダッシュ
イース6オンライン
リネージュ2M
魔剣伝説
グランドサマナーズ

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント