はたらきアリの節約コンシェルジュ

格安スマホやマイネオ、生命保険、住宅ローン、食費、光熱費など多くの生活にかかる固定費用を無理なく簡単に楽して節約する方法をメインにお金を増やす方法や子育てについて書きます。

はたらきアリの節約コンシェルジュ

【はてなブログ】ボトムナビゲーションなどアクセスアップ手法まとめ

スポンサーリンク

f:id:finana:20190530021516p:plain

 こんばんわ。はたらきアリです。@hatarakiari0818

 

今日も引き続きカスタマイズネタの記事です。

 

どうぞお付き合いください。

 

今日はアクセスアップのためのツールとしてボトムナビゲーションを設置した内容です。

(長いので以下ボトナビと呼びます)

 

これも最近の人気ブログサイトでは当然のように設置されていますね。

 

ボトナビの目的はただ一つ!

 

愛する読者さまのために決まってます。

読者がいかに快適に自分の記事を読んでいただけるかに決まってます。

(ワンクリックでも多くのクリックを自分のサイトに取り込。。。)

 

ワードプレスを利用している有名ブロガーさんは当然のようにボトナビが付いています。

 

読まれるための必須アイテムなのだから設置しないわけにはいかない!

 

はてなブログでもいかにワードプレスに近づけれるか、検証した内容をまとめました。

 

  

 ボトムナビゲーションを設置する

 

まずはじめにですが、今回もネットの賢人の力をおおいにお借りしました。

 

元CAバンビ様のサイトからボトナビの設置方法が分かりやすかったので参考にさせていただきました。

 

www.bambi.pro

 

ボトムナビゲーションとは?

 

まず、ボトナビとはサイト画面を見ていたらメニュー画面でも記事画面でも画面の下部に表示される案内バーのことです。

f:id:finana:20190612005329p:plain

このように常に画面に張り付いているので読者は目についてしまうのです。

 

気になってくれたらしめたもので、ボタンを押してもらってお勧めしたい記事やカテゴリーをクリックしてもらうためのものです。

 

長くサイトに滞在してもらうキッカケにもなるのでサイトを運営するうえで利便性の高さを追求することはもはや当たり前ともいえます。

 

上の画面では4項目は以下の通りです。

  1. ホーム
  2. おすすめ記事
  3. 人気カテゴリー
  4. 自己紹介記事への誘導

すべてのリンクをサイト内への誘導に使っています。

 

そして2と3のおすすめ記事やカテゴリーでは複数のページを選んでほしいため、展開メニューを設置しています。

 

ボトムメニュー用HTMLコードの作成

 

※元CAバンビ様のHTMLコード引用

(デザイン→カスタマイズ→ヘッダ→タイトル下へ張り付け)

<!-- bottom navigation -->

<
ul class="bottom-menu"> <li> <!-- ↓↓項目1. ホーム  #の部分にホームのURLを入れる --> <a href="#"> <i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a> </li> <li class="menu-width-max"> <!-- ↓↓項目2. おすすめ すぐ下の"#"はそのまま --> <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">おすすめ</span></a> <ul class="menu-second-level"> <!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる --> <li><a href="#">タイトル1</a></li> <li><a href="#">タイトル2</a></li> <li><a href="#">タイトル3</a></li> <li><a href="#">タイトル4</a></li> <li><a href="#">タイトル5</a></li> </ul> </li> <li> <!-- ↓↓項目3. 読者登録 ↓↓の部分の書き換えが必要です --> <!-- ~hatena.ne.jp/自分のはてなID/URL(http://の部分は無し)/subscribe --> <a href="https://blog.hatena.ne.jp/はてなID/自分のURL/subscribe" target="_blank"> <i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a> </li> <li> <!-- ↓↓項目4. ツイッター ↓↓の部分の書き換えが必要です--> <!-- screen_name=自分のツイッターID" ←@マーク以降のIDを入れる --> <a href="https://twitter.com/intent/follow?screen_name=自分のツイッターID"> <i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span></a> </li> </ul>

バンビ様は

  1. ホーム
  2. おすすめ
  3. 読者登録
  4. Follow

を設置しています。

 

私は記事内にシェアやフォロー簿ボタンをいくつか設置してた関係もあり、すべて記事内を回遊するためのリンクを張り付けました。

 

ここで注意点です。バンビ様のHTMLコードをカスタマイズする場合です。

 

①「ホーム」や「おすすめ記事」などのURLを書き加えてください。
「項目2. すぐ下の"#"はそのまま」と書いてある部分は、そのまま"#"にしておいてください。(URLを入れてしまうと、スマホなのでタップでおすすめを表示するハズが、タップで別URLに飛んで行ってしまうため)

② 読者登録の部分

"https://blog.hatena.ne.jp/はてなID/自分のURL/subscribe"

上記の「はてなID」と「自分のURL」を入れてください。
自分のURLは、https://やhttp://を抜かした部分だけを入れます。
例えば、私の場合は以下のようになります。 

"https://blog.hatena.ne.jp/zuboraca/www.bambi.pro/subscribe"


③ ツイッターの部分

"https://twitter.com/intent/follow?screen_name=自分のツイッターID"

 「自分のツイッターID」の部分に@マーク以降の自分のツイッターIDを入れます。
例えば、私の場合は以下のようになります。

"https://twitter.com/intent/follow?screen_name=bambiRed2018"


なお、ツイッターへのリンクではなく、別のアイコンや項目に変更する場合は以下をご参考になさって変えてください。(他の項目も同じ作りです)

f:id:zuboraca:20180610010905j:plain

 

PC表示の際はボトムメニューを表示しない!

 

レスポンシブの場合は、スマホ以外ではこちらのボトムメニューを表示させないようにする必要があるので、そのコードを書き加えます。 

ちなみに、こちらのコードは上記で紹介した「ボトムメニュー」の<htmlコード>と同じ場所にコピペしますが、こちらは<CSSコード>です。

<style type="text/css">

 CSSコード

</style>

と上記のように囲む必要があります。


↓↓上記のコード<style type="text/css">~~~~</style>の間に挿入するようにコピーしてください。

/*PC表示の際はボトムメニューは表示しない*/

@media(min-width: 768px){

    .bottom-menu{display:none; }

}

<CSSコード>も、<htmlコード>とコピーする場所は同じです。
デザイン→カスタマイズ→ヘッダ→タイトル下にコピペしてください。

 

ボトムメニューのためフッターを底上げする

 

ボトムメニューを設置した場合、一番下までスクロールした際に、スマホ画面のフッターがメニューにより隠れてしまいます。
それを防ぐためにフッターを底上げして表示させる必要があり、そのコードを入れます。

こちらも<CSSコード>なので上で説明しているように<style type="text/css">~</style>の中にコピーしてください。

/*スマホの時だけ*/

@media(max-width: 767px){ 



/*ボトムメニュー付けたのでフッタを底上げする*/

#footer{margin-bottom:48px;}

}

 

コピーする場所は、デザイン→カスタマイズ→ヘッダ→タイトル下。

 

 以上のようにバンビ様のサイトを引用する形で、ボトムナビゲーションの説明をさせていただきました。

 

アクセスアップに役立つその他の方法

 

以前に【ZENO-TEAL】を紹介した記事の中から、アクセスアップにつながるリンクを以下の通りとします。

 

・ヘッダ部分

zeno-teal.hatenablog.com

タイトル下におすすめ記事を画像付きでリンクを貼ることができます。

zeno-teal.hatenablog.com

お勧めカテゴリーを設置します。細分化したい場合は展開メニューからリンクを貼り付けることも可能です。

 

・サイドバー

www.okuni.me

サイドバーに張り付けている各項目のうち、順序が最後に指定してあるものをページ移動中追いかけるように設定するもの。私の記事の場合は【あわせて読みたい記事】として追従させています。

 

ブログは読者に読まれてナンボ

 

このように常に読者の目に届くようにアクセス先を提示できるようになっています。

 

そしておおもとの【ZENO-TEAL】自体もカード型デザインのテーマになので、常に他の記事への誘導が出来ていると言えます。

 

読者一人一人がどのような興味をもってサイトを閲覧してくれているのかは分かりません。

 

ですので興味を持ってもらえるよう、出来る限りの提案を私からするしかありません。

 

特に私のブログのような雑記ブログはその必要が高いと感じました。

(※主なテーマは節約でジャンルを越えて手取を多く残す方法を記事にしています。)

 

サイトではなるべく機会損失がないようにデザインを整え、読んでくださった読者の方の動向というのは【Google アナリティクス】【Google サーチコンソール】でチェックすることがサイトのアクセスアップに繋がるのだと考えています。