読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

「B!」はてなブックマークボタンを記事タイトルにネイティブっぽく設置

プログラミング プログラミング-はてなブログカスタマイズ

f:id:bulldra:20150709095021j:plain

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

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

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

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

 以前につくった、バイラルメデイア風シェアボタンと基本的には同じ構造なのですが、記事タイトル自体にまぎれさせるようにしています。

f:id:bulldra:20150709094925j:plain

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

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

 デザイン画面の「記事上」に以下のHTMLを記述します。(※ブックマークエントリページからはてなブックマークレットのURLに変更)

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

 PCで表示する場合にはURLに「touch」をつけないほうが綺麗に表示されます。

<a class="head_share_bookmark" href="http://b.hatena.ne.jp/bookmarklet?url={Permalink}" target="_blank" title="あとで読む"><i class="blogicon-bookmark lg"></i></a>
</style>

 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で直接位置合わせをしています。

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

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4

  • 作者: 大竹孔明,小川裕之,高梨ギンペイ,中江亮,株式会社まぼろし
  • 出版社/メーカー: エムディエヌコーポレーション
  • 発売日: 2015/03/25
  • メディア: 単行本
  • この商品を含むブログを見る

関連記事