現代版羊システム

為になることならないことなんでも書いていく雑記です。

5分でできる!固定メニューバーにはてな読者ボタンを設置する方法

f:id:sheepsystem:20170615235511j:plain

はてなブログに固定メニューバーを設置している人は多いです。

この記事を見ているということはお気づきでしょうが、僕のブログにも設置してあります。

この固定メニューバーは常に表示され続けるので、ページ内遷移の上昇が期待でき、ページ/セッション率の上昇、直帰率の低下、に繋がります。

また、はてなブログ特有の読者になるボタンですが、PC画面だとよく、サイドバーのプロフィール欄に設置されています。

しかし、スマホ画面だと、『どこにあるのかがわからない…』といったブログが多く見られます。
読者が増えてほしいのに見つかりにくい読者になるボタン

そんなボタンを固定メニューバーに常に表示させることが出来れば魅力的ですよね?

 今回はそんな魅力を感じるカスタマイズを紹介します!!

参考にした記事

www.yukihy.com

基礎となる固定メニューバーの導入です。今回のカスタマイズはこの記事の『5つのボタンの場合』を基礎として行いました。

今回は、5つのボタンのうち『はてブ順』を読者になるボタンに変更します。

実装画面

実装するとこうなります。

f:id:sheepsystem:20170318193801p:plain

画面下の固定メニューバーに読者になるボタンが表示されていますね。

先ほど紹介した記事では、はてブ順がありましたが正直人気記事と被っているので読者になるボタンと入れ替えました。

導入方法

導入方法は簡単です!

下のコードを『ヘッダー』→『タイトル下』にコピペするだけ!!

これを張り付けた後にやってほしいことがあります。

22行目の

<li><a href='カテゴリのurl'>カテゴリ名</a></li>

カテゴリのURLとカテゴリ名を自身のブログのものに変更してください。

33行目の

<a class="home-btn" href="自身のHPのURL"><i class="blogicon-home lg"></i><br>HOME</a>

自身のHPのURLにトップページのURLをコピペしてください。

 41行目の

<a class="home-btn" href="読者になるボタンURL"><i class="blogicon-subscribe lg"></i><br>読者になる</a>

読者になるボタンURL部分に、はてなブログの『設定』→『詳細設定』→『読者になるボタン』から、以下の画像の部分をコピーし張り付けてください。

f:id:sheepsystem:20170318200452p:plain

 以上で導入作業は終了です。

 まとめ

導入した後は必ず動作確認をしましょう。

特に読者になるボタンは確認必須です。実際にボタンを押して、自身の読者になるページにジャンプするか、URLと共に確認するようにしましょう。

読者になるボタンが常に表示されるとその分読者が増える可能性が上がります。

僕のブログはまだまだ弱小なので、一緒に読者数増加、PV数増加を目指しましょう!

では('ω')ノ