(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】メニューパネルアイコンを非表示にするカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での「メニューパネルアイコンを非表示にする」カスタマイズについてまとめてみました。

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

以前、ヘッダーの【サーチパネル】と【メニューパネル】のアイコンは、Webアイコンフォント Font Awesome 5を使って変更しました。

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

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

【THE THOR】メニューパネルアイコンを非表示にするカスタマイズ

このタイトルロゴの左右にある【サーチパネル】と【メニューパネル】のアイコンは、ある意味WordPressテーマ THE THOR(ザ・トール)独特なものです。

このタイトルロゴの左右にあるアイコンのお陰で、WordPressテーマ THE THOR(ザ・トール)を使っていると言うのが分かってしまいます。

そこで思い切って【サーチパネル】と【メニューパネル】のアイコンを非表示にする設定を行ってみました。

先ずは左側の【サーチパネル】のアイコンからです。

【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■サーチパネルを表示するか選択」で[PC/スマホで表示しない]に設定します。

これで左側の【サーチパネル】のアイコンは表示しなくなりました。

【THE THOR】メニューパネルアイコンを非表示にするカスタマイズ

問題なのが右側の【メニューパネル】のアイコンです。

【メニューパネル】のアイコンは削除したいのですが、スマホ表示において固定フッターエリアの項目として表示設定しているメニューボタンは残しておきたいところです。

しかし、【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■メニューパネルを表示するか選択」で[PC/スマホで表示しない]に設定すると、スマホ用固定フッターの中のメニューボタンが有効になりません。

症状はメニューボタンは表示しているもののメニューボタンをクリックしても反応しません。

そこでスマホ表示のみ【メニューパネル】のアイコンを表示するために、【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■メニューパネルを表示するが選択」で[PCで表示しない]に設定したところ有効にならずメニューパネルのアイコンが表示してしまいます。

【THE THOR】メニューパネルアイコンを非表示にするカスタマイズ

これについては、これまでのカスタマイズでなっている可能性も有り何とも言えない状況です。

これ以上原因を探るのは時間が勿体ないので、今回強制的ヘッダーのメニューパネルのアイコンを非表示にするカスタマイズを行いたいと思います。

メニューパネルアイコンを非表示にするカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「メニューパネルアイコンを非表示にする」カスタマイズを行います。

カスタマイズ内容

「メニューパネルアイコンを非表示にする」カスタマイズ内容は、下記の通りです。

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

/************************************
** ●ヘッダーのメニューパネルアイコンを非表示にするカスタマイズ
************************************/
.t-headerColor.t-headerCenter .menuBtn__link {
	display: none;
}

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

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

【THE THOR】メニューパネルアイコンを非表示にするカスタマイズ

今回のカスタマイズでは、【サーチパネル】はアイコンはWordPressテーマ THE THOR(ザ・トール)側の設定で削除し、【メニューパネル】のアイコンは今回のカスタマイズでWordPressテーマ THE THOR(ザ・トール)側の設定に関係なく非表示にしています。

最後に

今回のカスタマイズ&設定により、ヘッダーがかなりスッキリしました。

またパッと見、WordPressテーマ THE THOR(ザ・トール)を使っているとは分からないと思います。

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

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】