記事タイトルにはてブボタンを設置

　記事タイトルにシェアボタンを設置しているブログも多いのですが、読み込みが目線に追いついてなかったり、記事を読むまえからズラズラっとボタンや広告が表示されると萎えてしまうことがあります。

　そうはいっても、「あとで読む」ためにブクマしておきたいとか、タイトルだけで大喜利をしたくなるという感覚もわかるので、タイトル部分にアイコンフォントでリンクを設置する方法を考えました。

ネイティブアドのようにさりげなく

　以前につくった、バイラル風シェアボタンと基本的には同じ構造なのですが、ネイティブなタイトルにまぎれさせるようにしました。

　タイトルの一部のように見えるので、「あとで読む」と思ったときにしか気にならないし、それでいて明示的なアイコンなので誤クリックもないと思われます。

「B!」ボタンの設置方法

　デザイン画面の「記事上」に以下のHTMLを記述します。

<a class="head_share_bookmark" href="http://b.hatena.ne.jp/entry/{Permalink}" target="_blank" rel="nofollow"><i class="blogicon-bookmark lg"></i> あとで読む</a>

　CSSを以下のように記述します。設置するブログにあわせて位置を調整してください。

.head_share_bookmark{
  color: #ffffff !important;
  font-size:80%;
  position:absolute;
  top: 5px;
  right: 5px;
  font-weight: bold;
}

　スマートフォンの場合はフッタに以下のように記述します。

<style>
.head_share_bookmark{
  color: #ffffff !important;
  font-size:80%;
  position:absolute;
  top: 5px;
  right: 5px;
  font-weight: bold;
}
</style>

　はてなブログのスマートフォン表示で本格的にCSSを利用する方法については以下をご確認ください。ちょっとしたスタイル変更であれば、styleタグで十分だと思いますが。

「あとで読む」「あとでやる」に繋がってほしい

　以上のようにすることで、記事タイトルに「B!」はてなブックマークボタンをさりげなく設置することができます。JavaScriptでのリンク挿入処理をした方がスマートなのですが、この手の表示対応でいちいちスクリプト処理を走らせるのもアレなので、CSSで位置合わせをしています。

　シェアボタンについては色々な考え方があるし、どうしたって自分の好みが優先されるものですが、個人的には読み出す前から「シェア」や「広告」を求めるってのが好きじゃないんですよね。とはいえ「今は気分が乗らないからあとで」や「スマートフォンだと試せないからあとで」といったリーチも必要だと思うし、そういう需要も合算してバズや実行動に繋がったら嬉しいですね。この記事も「あとで読む」や「あとでやる」のために押してもらえると喜びます。

関連記事