はてなブログのヘッダーメニューの設置とカスタマイズ（PC用）

ヘッダーにメニューを設置してカスタマイズしました

お詫び：今回の記事は「コピペで簡単」って記事ではないです。

 

スマホ対応はまだしてませんが、パソコンで見るとタイトル下にメニューが表示されます。

メニュー自体は前から設置していたのですが、ちょこっと手直ししました。

テーマによっては簡単にメニューを設置できるみたいですが、当ブログは自力でCSSいじっているのでメニューの設置も自力でやりました。

今回のコードは、あまり初心者向けではないので参考になるかは微妙です。そもそも、コードの出来に自信ありませんww　駆け出しなので許してちょ☆

サンプルコード

まずはHTMLです。これをデザイン→カスタマイズ→ヘッダにぶち込めばベースができます。

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

リンク先のアドレスはご自身のブログのカテゴリーURLを貼ってくださいね。

id=”js-fix-nav” の記述は後々jQueryで使うので付与してます。

 

そして、CSSです。これは丸パクリしても微妙だと思うので、ご自身のブログにあった色とか境界線にしてみてくださいね。

※もしここにコードが表示されてない場合は、ページを再度読み込んでください。

まだスマホ対応してないので、画面が600px以下の端末だとメニューを非表示にしています。

 

実はここからがポイント

これだけでも完成なんですが、このブログのメニューは下にスクロールしてもずっと上にメニューが表示されています。メニューから逃げられません。どこまでも追いかけます。（邪魔？）

これはjQueryを利用しています。本当はjQueryを使うとブログの読み込み速度が落ちて微妙なんですが、我慢できずにやってしまいました。

先ほどのHTMLのコードの下に以下の記述をして出来上がりです。

.offset().top でメニューから一番上までの距離が計算されます。.scrollTop() は一番上からスクロールされた距離が計算されます。

スクロールされた距離がメニューの位置を超えると画面上に固定されるように、.css()でCSSを変更します。

 

上部固定はメニューだけではなく、シェアボタンにしても良さそうですね。

 

今回のメニューは端末の幅が狭いと文字数の関係でレイアウトがくずれてしまうので、スマホでは表示させないようにしています。まだスマホ用を作ってないので、もし完成したらこのような形でコードも載せたいですね。