dandelion-hill

タンポポの綿毛に息を吹きかけて 誰かに届けと書いてます

自分への備忘録 はてなブログのヘッダメニューを常時固定表示してみた

はてなブログの一番上のメニューバー、これを正式になんと呼ぶのか知らないんだけど、ヘルプには確かヘッダメニューと記述していたと思う。

 

ネット上ではグローバルメニューとかグローバルナビなどと呼んでいるみたい。ただ、自前でカスタマイズしたりテーマの作者さんが設置法を解説したりしている独自のグローバルメニューと混同するかも。なのでこの記事ではてなに元々あるページの一番上のメニューをヘッダメニューと呼ぶことにする。

 

はてなブログ有料版だとヘッダメニューは非表示にできる。無料版の場合は非表示にはできない。わたしは無料版なのだがただテーマによってはページをスクロールすると消えたりする。消えずにずっと固定されたままのテーマもある。わたしはどちらかというと固定しておきたい方なのだが使っているデザインテーマはスクロールで隠れてしまう。

 

このテーマはヘッダ画像がブラウザのウィンドウ幅に合わせて大きさが変わる。スマホタブレットでもヘッダ画像の左右が切れることなく表示される。そこが気に入っていてなかなか捨てがたい。そこで作者さんに質問してみた。ヘッダメニューを常時固定表示できませんかと。

 

「そういった方法はありません。」「テーマによっては常時表示にしてあるかもしれませんが、当テーマはなっておりません。」という返答。テーマによっては常時表示出来ているんだから方法がないというのはちょっと納得しがたい部分なのだが、そしてもっと言うならなってないからなるようにはなりませんかと質問したんだけどなあ。

 

まあ、技術的に可能だとしても作者さんのポリシーに合わないからなのか、そこまで労力を費やして便宜を図る必要はないという判断の元での意思表示なのか、なんだかわからんけどそこまで言うんなら仕方がない、自分で探そう。作者さんにも市井のど素人一ユーザーごときには計り知れないなにか事情があっての返答だったのかもしれない。

 

というわけで自分なりに試行錯誤したりネットで探したりでようやく解決。自分への備忘録として残しておく。


以下のフォーム内をすべて選択してコピーして、ダッシュボード→デザイン→カスタマイズ→デザインCSS にペースト。貼り付ける位置はどこでもいいと思うが自分は一番下にした。

/* ヘッダーメニュー固定 */ 
#globalheader-container {
  position: fixed;
}

 

注意点等
  • 検証したのは「Color Book」というテーマ。スクロールでヘッダメニューが消えるテーマなら効果あると思うが他のテーマは未検証。
  • 「Color Book」でこのカスタマイズを実施するとヘッダ画像がヘッダメニューの高さの分だけ隠れる。
  • もしやりたい人がいれば自己責任でどうぞ。
  • 質問はしないでください。答えられる知識がありません。

 

 

追記 (2023年02月06日)

ヘッダメニューの固定表示はできたがヘッダ画像の上に表示でなく前面に被さるようになるのでちょっと不満。解決策が分からずヘッダメニューの背景色を透過させることで対処した。しかしスマホで見ると意外に大きな領域を占めている。これでは邪魔でしか無い。なのでこのカスタマイズは不採用とした。

 

ページトップへ戻る jQuery