SNSボタンを横並びで表示させる方法

最近のポータルサイトで増えてきたSNSボタンの配置パターン。

▼横並びイメージ


SNSボタンを横並びに表示させることも可能です。

まず「管理画面」→「デザイン」→「テンプレートの編集」→「PC:記事ページ」→「読み込み」の順に操作してパソコン記事ページのテンプレートを編集できる状態にします。

そして </head> の直前に
<style type="text/css">
<!--
div.social-buttons {
border-color:#9A9A9A;
border-width:1px 0 1px;
border-style:dotted;
position:relative;
padding:3px 0 5px;
margin:15px 0 30px;
}
div.social-buttons ul li {
margin: 2px 3px 0 0;
padding: 2px 0 0 3px;
display:block;
float:left;
}
-->
</style>
を挿入します。

さらに、ボタンを並べたい場所。

例えば「タイトル下」にボタンを配置したい場合は、
<!-- AD_TITLE_UPPER -->
<h1><$TITLE$></h1>
<!-- AD_TITLE_LOWER -->

の直後に
<div class="social-buttons">
<ul>
<li><a href="http://b.hatena.ne.jp/entry/<$URL$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$TITLE$>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
<li><iframe src="http://www.facebook.com/plugins/like.php?app_id=141238105967932&amp;href=<?php echo urlencode($param["url"]); ?>&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>
<li><g:plusone></g:plusone></li>
</ul><div style="clear:both;"></div>
</div>
を挿入します。

最後に「テンプレートを保存」で保存して完了です。