【はてなブログ】メニューに簡単な工夫してアクセス伸びたカスタマイズ
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的にレスポンシブがいいと勝手に信じているのでレスポンシブデザインで当分の間は我慢します。

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

当サイトを閲覧いただきありがとうございました。

最後に現在お気に入りのアプリを紹介させていただきます。レビューも高く使ってみるとわかりやすくてハマります

FX初心者ガイド-ゲーム感覚デモトレードで簡単に投資練習

FX初心者ガイド-ゲーム感覚デモトレードで簡単に投資練習

Advan inc.無料posted withアプリーチ

『FXチャートって難しそう...投資も株もやったことない...そんな初心者でも始められますか?』
そんなFX初心者全ての期待に応えたアプリ。デモトレード付きの無料FX練習アプリ。

こんな方にオススメ

  • FXってそもそも何?儲ける方法を知りたいという方
  • 口座開設の仕方やFX会社がわからない方
  • デモトレードで本格的にFXシュミレーションの練習をしたい方
  • バイナリーオプション(ハイロー)やMT4、MT5に興味のある方

銀行にお金を預けても超低金利の時代...。「自分の力で儲ける」ということを始めてみませんか?

正直無料でここまで出来るとは思わなかった!なんといってもわかりやすいので、初心者向けだと思います! 基礎を知りたい人には向いてますね
おすすめの記事