プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

FC2ブログ十数件、アメブロ数件、Yahoo!ストア、Yahoo!オークションストア、カラーミーショップ、ビジネスサイト数件、趣味サイト数件を現在仕事とプライベートで管理・運営中。過去には他のASPやCMSもいろいろ。

全記事表示リンク
検索フォーム
ユーザータグランキング
最新コメント
<>+-

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

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

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

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


<div class="fc2_footer" style="text-align:left;vertical-align:middle;height:auto;">
<a href="javascript:;" onClick="javascript:window.open('URL');">
<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="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=URL&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に追加する事により3段になると思います。
各数値はお好みで変更してください。 にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

COMMENT

EDIT COMMENT

非公開コメント

テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

sightseeingに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。スライドショー

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。奥入瀬

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。月と木

torn_paperに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。破れた紙風

wantedに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
アクセスランキング
[ジャンルランキング]
コンピュータ 427位
[サブジャンルランキング]
Webサイト作成 20位