【はてなブログ】メニューに簡単な工夫してアクセス伸びたカスタマイズ
200degrees / Pixabay

メニューにたった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に貼付けてください。

f:id:buchibuchi4647:20170419111443p:plain

 

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

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

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

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

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

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

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

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

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

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

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

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

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

企業向けHP/個人向けブログ|無料制作サービス6月30日まで

ホームページ・ブログ制作依頼に高額料金を払っていませんか?

フリーランス・個人事業主だからこそ無料でできるサービス。もちろん、無料だからといって質の心配無用。多数の企業様とのご依頼経験を積んだプロによるサービス。

今回は指定のサーバーに契約していただ人のみ限定のサービスとなります。たったこれだけの条件でHPやブログを運営可能。

・おしゃれなHPで集客したい・お店の商品をネットで販売したいなど

・学生・主婦が隙間時間にブログで稼ぐのは当たり前の時代!コソッとバレずに副収入を稼ぐノウハウもご一緒にプレゼント!

今回の企画は6月30日までの期間限定となりますので、お早めのご依頼お待ちしております

※現在、多数のご依頼をいただいております。

依頼をご希望の方に関してはお問い合わせよりご連絡ください。基本即日対応させていただきますが、納期につきましては多少前後することがありますのでご了承ください。

※初めてホームページを依頼するという方も安心してご相談くださいませ。

初めてで分からないのはお客様皆様ご一緒です。まずはお気軽にお問い合わせくださいませ。

おすすめの記事