【ブログ】記事上のSNS（ソーシャル）ボタンの役割とは【はてブとPocketボタンを記事タイトルの上に設置してみました】
まずはお礼を言わせてください！
皆様、先日の記事に、
ホラー好きが選ぶ！ 楳図かずおの漫画 おすすめベスト5【漂流教室だけじゃない！】 - 広汎性発達障害の女がたまに毒を吐くブログ
たくさんの温かいコメントやはてなブックマーク、スターを頂きまして、誠にありがとうございます！
こんな感じで、小躍りして喜んでおりました！
楳図かずおさんの漫画のファンや、ホラー好きな方が少しでも増えてくれたらとても嬉しいです！
記事をお読み頂きました皆様と楳図かずおさんに感謝致します！
記事タイトルの上にはてブとPocketのボタンを設置
ところで、上記の記事を公開する前に、ブログにあるカスタマイズを行っていました。
記事タイトルの傍にはてブボタンを設置したのでした（Pocketのボタンは後から足しました）。
先日の記事にはてブをたくさんして頂けたのは、もちろん、読者の皆様と楳図かずおさんのおかげですが、これの効果も少しはあったのかも……!?
記事タイトルの上にはてブとPocketのボタンを設置した理由
以前、記事上のSNSボタンを表示させていたが外してしまった
はてなブログの場合、設定で記事上にもSNS（ソーシャル）ボタンを設置出来るのですが、記事上と記事下で設置出来るボタンの設定が分かれていないため、記事下にボタンをたくさんつけると、記事上にも同じだけのたくさんのボタンが出て来ます。
始めの内は、「つけられるものはなんでもつけとこう！」と記事上にも表示させていたのですが、読み込みが遅いのと、場所をかなり取るのがいやになってきて、しばらくして記事上のSNSボタンは外してしまいました。
その後記事上のSNSボタンの役割を知る
しかし先日、「ブログの記事上のSNSボタンは、あとで記事を読みたい方のために設置する」という文章をネットで目にしました。
私は、記事上のSNSボタンというのは、パッと見がちょっとカッコよくなるだけのものかと思っていたので、それを読んで「そうだったのか……！」と目から鱗が落ちました。
そう考えると、「あとで読む」ためにはてブボタンなどを押す方というのは、きっと忙しいからこそそうする訳で、その忙しい方に、記事下までわざわざ画面をスクロールしてボタンを探してもらうというのは、かなり不親切なブログなのでは……。
そして中には、「スクロールするの面倒！」と読まずに閉じてしまう方もいるのでは……。
という訳で、記事上にボタンを復活させることにしました。
しかしやはりあまり場所を取るのはいやだったので、記事タイトルの上のスキマに小さいボタンを並べることにしました。
そしてあとで読む用なら、はてブとPocketがあればいいかなァと思いまして、その2つのボタンだけを設置することにしました。
もしも、邪魔だから記事上のSNSボタンをつけていないとか、外してしまおうかと思っているブロガーさんがいらっしゃいましたら、あとで読む方用に、「はてブボタン」と「Pocketボタン」だけでもつけておくといいかもしれません。
記事タイトルの上にはてブとPocketのボタンを設置するためのコード
ご参考までに、このブログでの「あとで読む」部分のコードを以下に貼っておきます。
<!-- あとで読む --><script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript">
$(function(){ $('.entry-header').before('<div style="text-align:right;display:block"><span style="font-size:small;color:#999">あとで読む⇒</span> <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;vertical-align:top" /></a> <a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a></div>');
});
</script>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<!-- あとで読む終わり -->
はてなブログ以外のブログをお使いの方が見たら、「なんでわざわざjQueryを使う必要があるのか」と疑問に思うかもしれませんが、はてなブログではテンプレートをあまり細かくいじれないのです。
なので、「記事タイトル（.entry-header）」の前に、jQueryによって、はてブボタンやPocketボタンを割り込ませている感じになります。
はてなブログをお使いの方は、上記コードを、
管理画面⇒デザイン⇒スパナみたいなマーク⇒記事⇒記事上
に貼り付けると同じように表示出来ると思います（ただ、お使いのテーマによっては、記事タイトルが「.entry-header」でない可能性もあります。その場合は、各ブラウザのデベロッパーツールなどで、記事タイトルのid名やclass名を調べてみてください）。
Chrome DevTools | Web Tools - Google Developers
「div style=……」から「/div」までの部分を変えれば、ボタン以外にも何かを割り込ませることが出来るはずですので、そういったブログカスタマイズをお考えの方は、よかったらお使いください（ただ、カスタマイズの際には必ず元のファイルのコピーを取って、自己責任でお願い致します）。
チェックついでに気が付いた、はてなスターとはてなブックマークコメントの不具合
今回、上記のボタン設置と同時に、ヘッダーのメニュー部分を少し直しました。
スマホで閲覧すると、ヘッダーのメニュー部分に意図しないスキマが出来るのが前々から気になっていたので、この際だからこれも直しておくか、と軽い気持ちでやり始めたのですが……、
ボタン設置より、そのスキマ直しの方で結構ドツボにハマってしまいました。
原因をやっとの思いで突き止めたものの、その部分を取り除くと見た目が変わってしまい、あちら立てればこちらが立たず……と、結構長いことヒイヒイ言いながらいじくる破目になりました。
そしてとりあえず大丈夫そうになったので、IEでも見た目をチェックしておこうと、久々にIEを起ち上げてこのブログを見てみたら、カスタマイズ部分は無事表示されていたのですが、なんと、はてなスターが表示されていないではないですか！
それと、記事下に表示する設定にしてある「はてなブックマークでのコメント」が、PCだと表示されていないのです（スマホでは表示されています）。
表示されるはずの「はてなブックマークでのコメント」
はてなに問い合わせてみたのですが、原因不明のようで、まだ解決していません……。
私がいろいろカスタマイズしているせい……？ という不安もあるのですが、しかし、IEだけ適用とか、PCでのみ適用とか、そんな高度なコード（シャレじゃないですよ）は私には書こうと思っても書けないので、やっぱり運営にどうにかしてもらわないといけない問題なのかなァ……という感じです。
しかし、私なぞはスマホのちょっとしたスキマを直すのに、
となっていましたから、はてなスターとかはてなブックマークコメントとか、こんな複雑そうなシステムの不具合を直さなきゃいけないことになったら、おそらく発狂します。
はてなの運営様、ゆっくりでいいので……解決をお待ちしております！
読者の皆様にはご不便をおかけしますが、しばらくの間、はてなスターをお使いになる場合はIE以外のブラウザを、はてなブックマークでコメントをなさる場合は、はてブボタンを押してコメントをして頂けますようお願い申し上げます。
宜しくお願い致します！
追記
2015年11月5日、はてブコメントは表示されるようになっていました！
しかしIEではてなスターが表示されない問題はいまだに解決していないようです……。
更に追記
その後TwitterとFacebookのボタンを追加しました。
こちらはCSSの設定も必要なので上記よりちょっと面倒です。
一応コードを載せておきます。
CSSに以下のコードを追加
/ ^^^^^^^^ リストボックス ^^^^^^^^^^ /.list-box { display: table; float:right; text-align:right; display:block; margin-bottom:10px; }
.hidari { display: table-cell; }
.migi { display: table-cell; padding-left:10px; }
/ ^^^^^^^^ リストボックス終わり ^^^^^^^^^^ /
管理画面⇒デザイン⇒スパナみたいなマーク⇒記事⇒記事上に以下のコードを追加
<!-- あとで読む --><script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript">
$(function(){ $('.entry-header').before('<div class="list-box"><div class="hidari"><a href="https://twitter.com/share" class="twitter-share-button"{count}>Tweet</a></div><div class="migi"><div class="fb-share-button" data-layout="button"></div></div> <div class="migi"> <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-noballoon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a></div><div class="migi" style="padding-left:0"><a data-pocket-label="pocket" data-pocket-count="none" class="pocket-btn" data-lang="en"></a></div></div><br clear="both">'); }); </script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<!-- あとで読む終わり -->
カスタマイズする際は必ず元のコードをコピーを取っておいて、自己責任でお願い致します。