Facebookとtwitterのボタンを並べる方法!divタグで入れ子にする

中野貴利人
監修中野貴利人
株式会社ネットピコ 代表取締役

Facebookとtwitterのボタンを並べる方法!divタグで入れ子にする

このブログでは記事の1番下にFacebookの「いいね!」ボタン、twitterの「ツイート」ボタン、はてブ「ブックマーク」ボタン、LINEの「送る」ボタンを追加しています。

ただ、この2つのボタンを横並びにするときにCSSで位置を調整してみましたが、適当にtableタグで組んでみたところ、Facebookボタンはiframeで取り込んでいるため、tdタグを出力してくれませんでした。

そこでliタグを使うことにしました。そもそもtableタグは表で伝えたいときに使うために好ましくありません。しかしながら、liタグも特に難しくないと思っていたところ、再度ずれてしまいました。

ここは時間をかけたくない箇所だったため、今回はliタグで粘らずにシンプルなdivタグの入れ子にしました。CSSで全体の横幅を100%で調整して、各ボタンにスペースを確保しています。

<div class="social">
<div class="social_inner clearfix">
<div class="social_button facebook">
Facebookソース
</div>
<div class="social_button twitter">
twitterソース
</div>
<div class="social_button hatebu">
はてブソース
</div>
<div class="social_button line">
LINEソース
</div>
</div>
</div>

ソーシャルメディア側の仕様に従いながら、各ボタンごとにdivタグで囲ってwidthを指定しています。埋め込むコードも構造はシンプルです。

.social {
height: 64px;
margin: 24px 0 0 0;
padding: 24px 0 24px 0;
}

.social_inner {
position: relative;
left: 50%;
float: left;
}

.social_button {
position: relative;
left: -50%;
float: left;
margin: 0 10px 0 0;
}

.social_button:last-child {margin: 0;}
.facebook {width: 72px;}
.fb_iframe_widget > span {vertical-align: baseline !important;
.twitter {width: 76px;}
.hatebu {width: 84px;}
.line {margin: 0;}

Facebookの「いいね!」ボタンは72px、twitterの「ツイート」ボタンは76pxになったため、widthの値を変更しました。はてブやLINEなどを追加するときも、値を調整することで1pxのずれもなくなります。

ブラウザチェックはIE7、IE8、GoogleChrome、FireFoxの問題ないです。IE6は縦にずれますが、基本的に「.tag { /property: value; }」などのCSSハックは使わないため、シェア5%未満ということからも放置します。

本サイトでは専門性と倫理観に裏付けられた情報を掲載するように努めておりますが、内容の一部に誤りがあるなどのご指摘はお問い合わせより随時承っております。
公開日公開日 2011.02.04
更新日更新日 2017.10.09

著作・制作など

AUTHOR AND PEOPLE
中野貴利人
中野貴利人
執筆・編集
株式会社ネットピコ代表取締役。著書にど素人でも稼げるネット副業の本など。過去の取材はメディア掲載履歴で紹介。

関連する記事

RELATED ARTICLES
IPアドレスの分散はSEOに効果なし!バックリンクはドメインで評価
IPアドレスの分散はSEOに効果なし!バックリンクはドメインで評価
バックリンク元のIPアドレスの分散については「SEOにはまったく影響しない」とされながらも、一部では「分散されたほうが順位が上がる」や「あま...
ウェブデザインを改善する方法!数値目標と配色設定が大切
ウェブデザインを改善する方法!数値目標と配色設定が大切
デザインを改善するときは数値目標を決める サイトの見た目や操作性が改善されると......
【漫画】第42話「年末年始に稼げる副業!高時給の単発バイトなど」
【漫画】第42話「年末年始に稼げる副業!高時給の単発バイトなど」
年末年始の短期間に集中的に稼ぎたい人は、物流業に注目です。クリスマス商戦から年末年始にかけて、大売り出しのために搬入、仕分け、配送、さら...
【漫画】第37話「アフィリエイトまとめ!稼ぎ方をぎゅっと濃縮」
【漫画】第37話「アフィリエイトまとめ!稼ぎ方をぎゅっと濃縮」
アフィリエイトでは月5,000~1万円程度のお小遣いを稼ぐ主婦や学生がたくさんいますし、月数十万円を稼ぐ会社員も珍しくありません。さらに月100...
【漫画】第40話「女性に人気の副業は?副業マップで選ぶ12タイプ」
【漫画】第40話「女性に人気の副業は?副業マップで選ぶ12タイプ」
副業にはアルバイトやダブルワーク、週末起業、投資、お小遣い稼ぎなどがあり、働いている女性が本業以外で収入を得ること、広義では専業主婦の方...