エンジニアがお金について本気出して考えてみた

株式投資や節約などについて書きます

はてなブログの記事上に吹き出し型のソーシャルボタンを設置する方法を、勝手に添削

スポンサーリンク

上の記事にある内容を試してみたのですが、そのまんま使うのも何なので自分なりに修正してみました。

<ul style="list-style-type:none;margin-left:-40px;">
    <li style="display:inline-block;">
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-count="vertical">Tweet</a>
    </li>
    <li style="display:inline-block;">
        <div class="fb-like" data-href="{Permalink}" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>
    </li>
    <li style="display:inline-block;">
        <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
    </li>
    <li style="display:inline-block;">
        <div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>
    </li>
</ul>

Pocketボタンを置く意義をあまり感じていないので、削っています。

そのままコピペで使えますが、左側の余白を変えたければ先頭行のmargin-left:40px;の部分で調整して下さい。