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
執筆者Kirito Nakano

関連する記事

RELATED ARTICLES
【漫画】第34話「良い記事や文章を書くための10のコツ」
【漫画】第34話「良い記事や文章を書くための10のコツ」
良い記事の定義は人や内容によって変わりますが、基本的には「需要がある、読みやすい、信頼できる」ことが当てはまります。サイトやブログにプロ...
【漫画】第31話「サイトのテーマを決めるには広告一覧を見よう」
【漫画】第31話「サイトのテーマを決めるには広告一覧を見よう」
サイトやブログのテーマは自分の「得意なこと」がベストであり、それがないときは「興味や関心があること」で決めます。これは編集者や記者ではな...
【漫画】第33話「コンテンツの作り方!市場調査でニーズを把握」
【漫画】第33話「コンテンツの作り方!市場調査でニーズを把握」
アフィリエイトで稼ぐためにジャンルを選び、テーマを決めて、キーワードを探しました。ただ、ここまではいわゆるマーケティングであり、サイトの...

著作・制作など

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

ピックアップ

PICKUP