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(ザ・トール) ヘッダーのアイコン

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

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

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



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

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

MASAa.net

コメント