はてなブログの「記事上」ソーシャルパーツをコンパクトに！

GWなこともあり(!?)、ブログのカスタマイズをやってみた。

記事上にコンパクトなソーシャルパーツを！

今回手を入れたのは、エントリタイトル＆カテゴリ下の部分。
図の赤枠で囲ったところに、コンパクトなソーシャルパーツを配置した。

はてなブログでは、標準機能でも「デザイン＞記事」の「ソーシャルパーツ」メニューで「記事上下に表示」させることができる。

デフォルトで選択できるソーシャルパーツを記事上にも表示できるようにしました - はてなブログ開発ブログ

ただ、この標準機能の表示は、記事下と同じデザイン（ブックマーク件数などの吹き出しがボタンの上に表示）で、個人的にちょっと重たく感じたので、これまでは表示させていなかった。

やりたいカスタマイズ方法は、すでに公開されていた！

検索したところ、きなモンさん（id:tubamenote）が公開されている方法が、僕のやりたいことにドンピシャだったので、真似させてもらうことに…。

とても分かりやすく書かれていて、助かりました（ありがとうございます）

ちょっとだけカスタマイズ

そのままでも十分だったが、仕組みを理解するためと、個人的な好みでFacebookボタンの部分をほんのちょっとカスタマイズした。（「シェア」ボタンではなく、「いいね！」ボタンを設定。上マージンを設定等）

参考までに、設定したHTMLコードを公開しておきます。
（Facebook部分以外はきなモンさんのコードをそのまま流用させてもらっています）

<div style="margin: 10px 0px 0px;">
<a class="hatena-bookmark-button" title="このエントリーをはてなブックマークに追加" href="http://b.hatena.ne.jp/entry/{Permalink}" data-hatena-bookmark-title="{Title} - {BlogTitle}" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja"><img style="border: none;" src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" /></a>

<script src="https://b.st-hatena.com/js/bookmark_button.js" async="async" type="text/javascript" charset="utf-8"></script>

<div class="fb-like" data-href="{Permalink}" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"> </div>
<a class="twitter-share-button tweets" href="https://twitter.com/share" data-url="{Permalink}">Tweet</a>
<script>// <![CDATA[
!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>

<script type="text/javascript">// <![CDATA[
!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>
</div>