HTML編集｜固定表示されるメニューバーを解除する方法

byNatchan - 2023/02/06 2023/06/23

0

サイトに固定表示されるメニューバーを解除する方法を教えます。WordpressやBloggerなどでブログを運営する人向けにうっとおしい追従型メニューの外し方を書きました。htmlを1つ書き換えるだけなのでとても簡単です。コーディングの知識ゼロでも大丈夫です。

{tocify} $title={Table of Contents}
Ads
無料体験実施中！月額1,500円で12万冊以上の対象作品が聴き放題になる【Amazon Audible】

固定表示メニューの解除方法

固定表示メニューの解除方法は以下の通りに進めてください。固定表示メニューは英語でSticky Menuと言います。今回教えるやり方は海外のフォーラムで知りました。

STEP1：バックアップをとる

テーマを直接いじることになるのでバックアップを念のため取っておきます。

STEP2："sticky"と検索

html編集画面に入ったら、Ctrl＋Fで"sticky"と検索します。キーの同時押しです。メニューバーに当たるコードを特定してください。

見つけた

この部分はテーマによって変わるのですが、私の場合はheader-header.stickyでした。headerとかmenuとかの記載が近くにあればビンゴです！

STEP3：position:fixed;→relative

stickyのエリアにあるposition:fixed;をrelativeに書き換えたら保存してください。以下のような具合になればOK！これでメニューバーの固定表示が解除されるはずなので再度読み込んでみてください。

position:relative;{codeBox}

よく"display: none"を追加しておけばOKといった解決策がネットで見られますが、これは荒業です。デザインが崩れたり、消えてほしくないものまで消える可能性があるのでおすすめできません！{alertError}

最後に｜固定表示メニューは邪魔

以上、固定表示されるメニューバーを解除する方法をシェアしました。

メニューバーを固定しておくとサイトの離脱率が下がるとか言われていますが、むしろ離脱率上がるレベルでサイトが見にくくなります。

たまにデフォルトで固定表示にしているテーマ/テンプレートがありますが、コンテンツの表示領域がせまくなってユーザーエクスペリエンスだだ下がりなので外した方が絶対快適です。

トップへ戻るボタンがあるだけで十分だからね。

　You may also like :

Ad

初心者でも安心！たった10分で出来るWordPressブログの始め方