メニューにたった1つ簡単な工夫を加えるだけでアクセスを伸ばすカスタマイズの紹介です。初心者でも導入しやすいようにCSSのコピペコードも公開しています。
グロバールメニューを固定して透明化する方法
200degrees / Pixabay
はてなブログのレスポンシブデザインを使っている人はスクロールしたとき（下に移動）するとメニューが見えなくなってしまい、読者がもしメニューから他のカテゴリーを読みたいと思うとヘッダーまで戻る必要があります。これは直帰率を上げる原因にもなります。
使用しているテーマがあらかじめ固定されたメニューならメニューならいいのですが、そうでない場合は、読者のために固定メニューに設定することをおすすめします。
[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”5″ titleweight=”bold”]
「 はてなブログ」アフィリエイトで月3万稼ぐ2つの最短ルート限定公開「収入で悩んでいる人向け」
[/st-mybox]
メニューを固定化する方法
スクロールして固定化するカスタマイズははてなプロユーザー向けになります。無料ユーザーの人は規約違反となりますのでご了承ください。
以下のコードをデザイン→カスタマイズ→デザインCSSに貼付けてください。
この設定によりスクロールするとトップにメニューが固定されます。しかし、これだけの設定ではトップの固定メニューが邪魔で記事が読みにくいです。
スクロールしたときにメニューを透明化させることによって記事を読みやすくさせます。
スクロールしたメニューを透明化させる設定
メニューを透明化させるのはあなたの自由ですが、読者のことを考えると設定することをおすすめします。設定方法も簡単です。
先ほどの固定メニューとやり方は同じです。デザイン→カスタマイズ→デザインCSS以下のコードを張りつけます。
貼付ける場所はデザインCSSの１番下でもかまいませんが、すでにグロバールメニューのカスタマイズ（フォントの変更や文字の大きさの変更）をデザインCSSに貼付けている人はその箇所に付け加えることをおすすめします。
その理由はいろいろカスタマイズしているなかで、自分がどこをカスタマイズしたのか忘れないようにするためです。CSSを見たときに同じ箇所で設定していると再び変更するのも簡単です。
では話は戻します。以下のコードをデザインCSSに張りつけてください。
この（0.6）の値を変更していくと透明度が変わります。値が低いほど透明化します。
レスポンシブ設定でない人
レスポンシブ設定をしていない人（パソコンとスマホを別々に設定している）は今回のカスタマイズは必要ないと思います。
僕はSEO的にレスポンシブがいいと勝手に信じているのでレスポンシブデザインで当分の間は我慢します。
最後まで読んでいただきありがとうございました。
