【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックすると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(ザ・トール) ウィジェット ナビゲーションメニュー

現在のWordPressテーマ THE THOR(ザ・トール)の「ウィジェット ナビゲーションメニュー」は次の様になっています。

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

特に問題の無い「ウィジェット ナビゲーションメニュー」なのですが、唯一気になる点としてアイコンにあります。

と言う事で、WordPressテーマ THE THOR(ザ・トール)での「ウィジェット ナビゲーションメニュー」のアイコンを変更してみたいと思います。

ウィジェット ナビゲーションメニューのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ウィジェット ナビゲーションメニュー」のカスタマイズを行います。

Webアイコンフォント Font Awesome 5

なお、今回使用するアイコンは、Font Awesome 5になります。

WordPressテーマ THE THOR(ザ・トール)でFont Awesome 5を使うためには、事前に登録、設定を行う必要があります。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!
Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

カスタマイズ内容

「ウィジェット ナビゲーションメニュー」のカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウィジェット ナビゲーションメニューアイコン変更
************************************/
.menuBtn__content .widget.widget_nav_menu ul li a:before { /*メニュー アイコン*/
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f152"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 16px; /*フォントサイズ*/
	font-weight: 900; /*フォント太さ*/
}
.menuBtn__content .widget.widget_nav_menu ul.menu .sub-menu a:before { /*サブメニュー アイコン*/
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f101"; /*アイコン*/
	color: #000; /*アイコンカラー*/
	font-size: 16px; /*フォントサイズ*/
	font-weight: 900; /*フォント太さ*/
}

カスタマイズ後のウィジェット ナビゲーションメニュー

今回のカスタマイズによって、「ウィジェット ナビゲーションメニュー」は次の様になりました。

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

今回のカスタマイズでは、「ウィジェット ナビゲーションメニュー」のアイコンをFont Awesome 5のアイコンに変更してみました。

最後に

アイコンはFont Awesome 5が一番良いと思っています。

今回の「ウィジェット ナビゲーションメニュー」のアイコン変更により、ZMASAa.blogの使われているアイコンはほぼFont Awesome 5に変更することができました。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

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



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

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

MASAa.net

コメント