【お知らせ】このサイトでは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(ザ・トール) ヘッダーのアイコン

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

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

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

MASAa.net

コメント