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

【THE THOR】ヘッダーのアイコンのカスタマイズ

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

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

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのアイコン」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) ヘッダーのアイコン

現在のWordPressテーマ THE THOR(ザ・トール)の「ヘッダーのアイコン」は次の様になっています。

【THE THOR】ヘッダーのアイコンのカスタマイズ

特に問題の無いデフォルトの「ヘッダーのアイコン」です。

ZMASAa.blogは、THE THOR(ザ・トール)の既存のアイコンに対し、Webアイコンフォント Font Awesome 5化を進めているので、この「ヘッダーのアイコン」もWebアイコンフォント Font Awesome 5に変更したみたいと思います。

ヘッダーのアイコンのカスタマイズ

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)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ヘッダーのアイコン変更
************************************/
.t-headerCenter .searchBtn__link:before { /*ヘッダーのサーチアイコン*/
	font-family: "Font Awesome 5 Brands";/*Font Awesome 5に設定*/
	content: "\f3eb"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 24px; /*フォントサイズ*/
	font-weight: 400; /*フォント太さ*/
}

.t-headerColor.t-headerCenter .menuBtn__link:before { /*ヘッダーのメニューアイコン*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f142"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 24px; /*フォントサイズ*/
	font-weight: 900; /*フォント太さ*/
}

カスタマイズ後のヘッダーのアイコン

今回のカスタマイズによって、「ヘッダーのアイコン」は次の様になりました。

【THE THOR】ヘッダーのアイコンのカスタマイズ

今回のカスタマイズでは、「ヘッダーのアイコン」をFont Awesome 5のアイコンに変更してみました。

最後に

これでまた一つアイコンをWebアイコンフォント Font Awesome 5化されました。

今後も既存のアイコンは、Webアイコンフォント Font Awesome 5化していきたいと思います。

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

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

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
イース6 オンライン〜ナピシュテムの匣〜
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

MASAa.net

コメント