はてなブログ

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

メニューにたった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的にレスポンシブがいいと勝手に信じているのでレスポンシブデザインで当分の間は我慢します。

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

ABOUT ME
inakaweb
inakaweb「buchio]です。いなかでアフィリエイト活動しております。基本的に僕のアフィリエイト経験はここで全て放出しております。あなたの何か役立つきっかけになればと思います。成績;ブログは月収15万ほど・ココナラは600件ほど売り上げ→現在月収30万ほどにいたる。いつも依頼していただく方々には感謝しかない。
現在キャンペーンサービスのご案内

[当サービスお得情報]半額以下割引キャンペーン!

当サイトでは以下のサービスを代行させていただいております。

  • グーグルアドセンス取得代行
  • ホームページ作成
  • ブログ作成・成果のでるノウハウ・サポート付き
  • 記事作成
  • 時短効果におすすめの大量の記事販売1000円〜
  • 自動ほったらかしサイト作成マニュアル・設置代行

学生・主婦の方から社会人の方まで幅広くご依頼をいただいております。

上記のサービスはいずれも好評です。特にアフィエイトをしている人でなかなか成果の出ない人や初心者で何からすれば良いのかわからない人にはおすすめのサービスとなっております。

サービスご依頼ご希望の方はサイト内に設置「お問い合わせ」フォームより依頼・または下記よりご連絡ください。当サービスはプロフィールにもありますよう「ココナラ」にて500件以上の販売実績と評価4.8以上であるゴールド会員認定

今回事情拡大に伴い、新規ココナラスタートキャンペーンも実施しております。ココナラより購入頂いたお客様ももっと格安でご案内させて頂いております

どうぞご利用ください。ご依頼お待ちしております。

ココナラから依頼