FC2拍手・Twitterツイート・Facebookいいねボタンを縦に並べる方法

通常は、１段目には「拍手」だけ、２段目に「ツイート」と「いいね」が並ぶ。
なんかレイアウト的に中途半端だなと思った事ありませんか？

というわけで縦に３段にしちゃいましょう。
これらのソーシャルボタンは、各社サイズが違ったりカウントが入ったりするため、単純に横に並べるのは汎用性が低いです。
デザインにこだわるケースでは横に並べる事もありますが、簡単にレイアウトを整えるなら縦がおすすめです。

通常表示されるソースを見てみると、次のようになってます。

<div class="fc2_footer" style="text-align:left;vertical-align:middle;height:auto;">
	<a href="javascript:;" onClick="javascript:window.open('ＵＲＬ');">
		<img src="http://static.fc2.com/image/clap/number/white/1.gif" style="border:0;" />
	</a>

	<table class="fc2_socialbtn" style="margin-right:auto;margin-left:0;border:none;">
		<tr>
			<td style="vertical-align:top;border:none;" class="fc2button-twitter">
				<script type="text/javascript">
					document.write('<a href="http://twitter.com/share" class="twitter-share-button" data-url="ＵＲＬ" data-text="タイトル" data-count="none" data-lang="'+(window.navigator.language || 'ja')+'">Tweet</a>');
				</script>
				<script type="text/javascript" charset="utf-8" src="http://platform.twitter.com/widgets.js"></script>
			</td>
			<td style="vertical-align:top;border:none;" class="fc2button-facebook">
				<iframe src="//www.facebook.com/plugins/like.php?href=ＵＲＬ&send=false&layout=button_count&width=105&show_faces=false&colorscheme=light&action=like&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true">
				</iframe>
			</td>
		</tr>
	</table>
</div>

divやtable、td等にクラスが振られてる事がわかります。
この部分のhtmlは直接編集する事ができませんが、これらのクラスのcssを編集する事により、レイアウトの調節が可能です。

.fc2_footer{height:70px !important;}
.fc2_footer table{position:relative;}
.fc2_footer table td.fc2button-twitter{width:400px;position:absolute;padding:0;margin:0;}
.fc2_footer table td.fc2button-facebook{width:400px;position:absolute;top:24px;padding:0;margin:0;}

これをcssに追加する事により３段になると思います。
各数値はお好みで変更してください。