広告

posted by fanblog

SNSボタンを並べる方法を簡単に書いてみた

このエントリーをはてなブックマークに追加
前にSNSボタンをブログに設置する時のコードなんて記事を書きました。
今回は、そのSNSボタンを綺麗に横に並べたいな、って事で方法を簡単ではありますが少し書いてみます。
snsボタン

前提


こんな事は書くまでもありませんが、まずはボタンの大きさを揃えましょう。SNSボタンは複数の大きさや種類が選べるかと思いますが、ちゃんとそのボタンの大きさは揃えましょう。
また、その時、横幅の指定等がある場合は、それもちゃんと指定しておきましょう。facebookのいいねボタンとかは横幅の初期設定が大きめだった記憶があります。それをちゃんと小さめに指定することで、横に並べた時に変に余白が空けずに並べられると思います。

floatで並べる


SNSボタンのコード1つ1つをdivタグなどで囲って、floatで並べます。floatを使うと上下のズレなどもほとんど生じずに並べる事が出来る印象があります。

具体的には、例えば
<div class="snsb">(twitterボタンのコード)</div><div class="snsb">(はてぶボタンのコード)</div>

のようにdivタグで囲って、css(スタイルシート)で以下のように設定します。
.snsb{
float:left;
}

こうすると、左詰めでボタンが並ぶと思います。

inline-blockで並べる


floatではなく、inline-blockにする事でも横に並べる事が出来ます。
上で紹介したfloatの方法で、スタイルシートの中身を以下のように変えるだけです。
.snsb{
display:inline-block;
}

これでも横に並びます。
floatを使う方法だと、clearをしないとレイアウトが崩れてしまう場合があります。後は、clearをしないと背景部分がなんか上手い事行かなかったりとか。。
inline-blockだと、そういう事は起こらないし、こっちの方法でも良いかもしれないですね。次に紹介するspanタグを使う方法と、原理としては一緒です。

spanタグで囲う


多分単に横に並べたいだけ、と言うのなら最も簡単なのはこれかな、と。spanタグでSNSボタン1つ1つを囲うだけです。ただ、上下のズレなどが発生し易い印象があります。

具体的には、例えば
<span>(twitterボタンのコード)</span><span>(はてぶボタンのコード)</span>

と言う様な感じです。これだけです。
spanはinline要素、と言って、行内に配置される要素で、つまり文字列と同じ様に扱われます。なので、spanタグで囲うと文字列のように左詰めで横に並びます。

spanに関して追記


facebookのいいねボタンはspanで囲うだけでは横に並んでくれない事がある様ですね。特にieだと。
おそらく、スクリプトの読み込みのタイミングと、レンダリングのタイミングなどの問題かと思います。いや、分かりませんが。。

その問題点については、スタイルシートで、「display:inline-block;」を指定して、widthやheightも指定する事で解決出来ました。
出来たんですが、先ほど再度それらのコードが無い状態で横に並ばないのか確認したところ、普通に横に並んで表示されました。。w

良く分かりませんが、もしspanタグで囲うだけではいいねボタンが横に並ばない場合には、inline-blockの指定をしたり、widthやheightの指定をしてみて下さい。
何か詳細分かりましたらコメント等で教えて下さると助かります。

更に追記ですが、googleの+1ボタンも同様の現象が起きました。
display:inline-block;
を指定する事で横に並べる事が出来ましたが、何なんでしょう。。w
現在、自分のページでは、いいねボタンも+1ボタンもspanタグで囲って、
display:inline-block;
を設定している状態です。一応これで横に並びます。

位置調整(vertical-align)


使うボタンによって、または並べる方法によっては上下にずれている事があるかと思います。
そういう時は、cssで調整します。例えば、vertical-alignを使います。

<span>(twitterボタンのコード)</span><span class="hatebub">(はてぶボタンのコード)</span>

例えば、この様に調整したいボタンのspanタグにclassを指定して、cssで調整します。cssには以下の様なコードを書きます。
.hatebub{
vertical-align:bottom;
}

vertical-alignについては、vertical-align−スタイルシートリファレンスなどを参考にして下さい。bottomではなく、top、などにしても揃うかもしれません。

位置調整(padding,margin)


他には単に、paddingやmarginなどを調整して揃える、と言う方法があります。
例えば先ほどの例のようにcssで以下の様なコードを書きます。
.hatebub{
padding-bottom:2px;
}

こうすれば、下に2pxの余白を作れます。そんな感じで調整するだけです。

SNSボタンの横の間隔について


横に並べた時、気になるのは横の間隔です。
間隔を無くして並べたい、という気持ちも分かりますが、残念ながらボタンによってはそれが出来ません。
例えば現在(120302)であればtwitterボタンは横幅159pxになっており、右側に結構余白が空いてしまいます。marginをマイナスに指定すれば消せない事も無いのですが。。

と言う訳で、マイナスmarginを使わないのであれば、twitterボタンは一番右に配置する、などの考慮が必要になります。
他は、googleの+1ボタンも右側に余白が出来てしまいます。それらも考慮して、paddingやmarginを使って間隔は調整しましょう。

facebookのいいねボタンの場合、いいねが1回以上押されると数字と吹き出しが表示されますが、0回の場合は吹き出しが表示されず、その吹き出しの有無で横幅も変わってくるので注意が必要です。残念ながらどちらの場合もボタン自体の横幅は同じになってしまっているので、どちらかに合わせるしか有りませんが。。

縦に並べる


縦に並べる場合は、ボタン1つ1つだけでなく、それら全体もdivタグなどで囲って全体の表示位置の調整などは行う必要があります。

具体的には、例えば、
<div class="snsbl">
<div class="snsb">(twitterボタンのコード)</div><div class="snsb">(はてぶボタンのコード)</div>
</div>
と言う様にして、このクラス”snsbl”のdivタグをどこかに配置する、と言う様な形になると思います。
例えば、
.snsbl{
float:left;
}

と言う様にして、縦並びのSNSボタン群をどこかの左側に表示させる、と言う様な形になると思います。
ただ、ボタン1つ1つに関しては、divタグなどのblock要素のタグで囲えば、それだけで縦に並ぶと思いますので、それ程やる事は無いかと思います。

縦並びの表示位置調整


これに関しては、あまり必要になる事は無いのかもしれませんが、基本的には横並びの時と同じです。vertical-alignは使えませんが、paddingやmarginなどを使って調整すれば良いと思います。

または、
margin:0 auto;
のように、ボタンの左右のmarginをautoに設定することで、真ん中に表示される様になるので、これを使っても良いかと思います。

最後に


SNSボタンはアクセスアップにもつながってきますし、当然重要ではあるんですが、付ければ付けるだけ表示速度も遅くなりますので、本当に必要かどうか、と言うのはボタン1つ1つについて考えてみても良いかもしれません。

まとめとしては、floatを使えば上下にずれずにサクッと横に並ぶんじゃないかな、って感じです。失礼します。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。