WordPressテーマ THE THOR
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「メニューパネルアイコンを非表示にする」カスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ヘッダーのアイコン
以前、ヘッダーの【サーチパネル】と【メニューパネル】のアイコンは、Webアイコンフォント Font Awesome 5を使って変更しました。
現在のWordPressテーマ THE THOR（ザ・トール）の「ヘッダーのアイコン」は次の様になっています。
このタイトルロゴの左右にある【サーチパネル】と【メニューパネル】のアイコンは、ある意味WordPressテーマ THE THOR（ザ・トール）独特なものです。
このタイトルロゴの左右にあるアイコンのお陰で、WordPressテーマ THE THOR（ザ・トール）を使っていると言うのが分かってしまいます。
そこで思い切って【サーチパネル】と【メニューパネル】のアイコンを非表示にする設定を行ってみました。
先ずは左側の【サーチパネル】のアイコンからです。
【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■サーチパネルを表示するか選択」で[PC/スマホで表示しない]に設定します。
これで左側の【サーチパネル】のアイコンは表示しなくなりました。
問題なのが右側の【メニューパネル】のアイコンです。
【メニューパネル】のアイコンは削除したいのですが、スマホ表示において固定フッターエリアの項目として表示設定しているメニューボタンは残しておきたいところです。
しかし、【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■メニューパネルを表示するか選択」で[PC/スマホで表示しない]に設定すると、スマホ用固定フッターの中のメニューボタンが有効になりません。
症状はメニューボタンは表示しているもののメニューボタンをクリックしても反応しません。
そこでスマホ表示のみ【メニューパネル】のアイコンを表示するために、【共通エリア[THE]】ー【ヘッダーエリア設定】に進んで【サーチパネルの設定】の中の「■メニューパネルを表示するが選択」で[PCで表示しない]に設定したところ有効にならずメニューパネルのアイコンが表示してしまいます。
これについては、これまでのカスタマイズでなっている可能性も有り何とも言えない状況です。
これ以上原因を探るのは時間が勿体ないので、今回強制的ヘッダーのメニューパネルのアイコンを非表示にするカスタマイズを行いたいと思います。
メニューパネルアイコンを非表示にするカスタマイズ
WordPressテーマ THE THOR（ザ・トール）での「メニューパネルアイコンを非表示にする」カスタマイズを行います。
カスタマイズ内容
「メニューパネルアイコンを非表示にする」カスタマイズ内容は、下記の通りです。
「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。
/************************************
** ●ヘッダーのメニューパネルアイコンを非表示にするカスタマイズ
************************************/
.t-headerColor.t-headerCenter .menuBtn__link {
display: none;
}
カスタマイズ後のヘッダーのアイコン
今回のカスタマイズによって、ヘッダーは次の様になりました。
今回のカスタマイズでは、【サーチパネル】はアイコンはWordPressテーマ THE THOR（ザ・トール）側の設定で削除し、【メニューパネル】のアイコンは今回のカスタマイズでWordPressテーマ THE THOR（ザ・トール）側の設定に関係なく非表示にしています。
最後に
今回のカスタマイズ＆設定により、ヘッダーがかなりスッキリしました。
またパッと見、WordPressテーマ THE THOR（ザ・トール）を使っているとは分からないと思います。
コメント