WordPressTHE THOR

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

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

WordPressテーマ THE THOR

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

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

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

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

MASAa.net

コメント