ヒト感!!

「人は感情の生き物」だから、人生をハッピーにするヒト・モノ・コトバを広めたい!

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

このエントリーをはてなブックマークに追加

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

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

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

f:id:hito-kan:20150504220452j:plain:w480


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

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


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

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

検索したところ、きなモンさん(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>


きなモンさんエントリの CSS 設定を追加したうえで、「記事上」のHTMLに上のコードを設定すれば、似たような表示になるはず。

標準機能のソーシャルパーツよりもコンパクトにしたい!という方は、ぜひトライのほどを!

追記

その後、カウントを表示しない形に変更しました。

まだ少しいじるかも。