読者です 読者をやめる 読者になる 読者になる

英語とappleとDIYと

apple製品、英語関連、DIYについて

はてなブログのメニューを固定してスクロールすると透明化するカスタマイズ

Check!!!▼

スポンサーリンク

f:id:buchibuchi4647:20170419124251j:plain

カスタマイズが最近の趣味のawaです。はてなブログのグロバールメニュースクロールしたときにメニューがトッに固定するようにしてなおかつ記事が見えやすいように透明化する方法のまとめです。

 

グロバールメニューを固定して透明化する方法

はてなブログのレスポンシブデザインを使っている人はスクロールしたとき(下に移動)するとメニューが見えなくなってしまい、読者がもしメニューから他のカテゴリーを読みたいと思うとヘッダーまで戻る必要があります。これは直帰率を上げる原因にもなります。

使用しているテーマがあらかじめ固定されたメニューならメニューならいいのですが、そうでない場合は、読者のために固定メニューに設定することをおすすめします。

メニューを固定化する方法

スクロールして固定化するカスタマイズははてなプロユーザー向けになります。無料ユーザーの人は規約違反となりますのでご了承ください。

以下のコードをデザイン→カスタマイズ→デザインCSSに貼付けてください。

f:id:buchibuchi4647:20170419111443p:plain

 

この設定によりスクロールするとトップにメニューが固定されます。しかし、これだけの設定ではトップの固定メニューが邪魔で記事が読みにくいです。

スクロールしたときにメニューを透明化させることによって記事を読みやすくさせます。

スクロールしたメニューを透明化させる設定

メニューを透明化させるのはあなたの自由ですが、読者のことを考えると設定することをおすすめします。設定方法も簡単です。

先ほどの固定メニューとやり方は同じです。デザイン→カスタマイズ→デザインCSS以下のコードを張りつけます。

貼付ける場所はデザインCSSの1番下でもかまいませんが、すでにグロバールメニューのカスタマイズ(フォントの変更や文字の大きさの変更)をデザインCSSに貼付けている人はその箇所に付け加えることをおすすめします。

その理由はいろいろカスタマイズしているなかで、自分がどこをカスタマイズしたのか忘れないようにするためです。CSSを見たときに同じ箇所で設定していると再び変更するのも簡単です。

では話は戻します。以下のコードをデザインCSSに張りつけてください。

この(0.6)の値を変更していくと透明度が変わります。値が低いほど透明化します。

レスポンシブ設定でない人

レスポンシブ設定をしていない人(パソコンとスマホを別々に設定している)は今回のカスタマイズは必要ないと思います。

以下で紹介されているカスタマイズほうが魅力的だと思います。

www.yukihy.com

 僕はSEO的にレスポンシブがいいと勝手に信じているのでレスポンシブデザインで当分の間は我慢します。

最後まで読んでいただきありがとうございました。