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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③

今回は、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に変更することができました。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール