【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressTHE THOR

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

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

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

以前、ヘッダーの【サーチパネル】と【メニューパネル】のアイコンは、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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

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



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

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

MASAa.net

コメント