【FC2ブログ】ソーシャルボタンを横並びに揃えるためのHTMLとCSS

2014/06/12 -0001/11/30 編集

ブログ

ブログに設置するソーシャルボタンを横並びにできたので、備忘録的に記録します。

ブログ個別記事の下部に、↑のようなソーシャルボタンを横並びにして置けないかといろいろ試行錯誤して、やっと形にできました。

一番頭をひねったのは「Pocketボタン」の設置位置でした。
私だけかもしれませんが、なぜかInternet Explorer11では、画像の上にカウント数が表示される「Vertical」タイプのボタンが消えてしまいました。

さらに不思議なことに、画像横にカウント数がある「horizontal」タイプのボタンはIEでも他のブラウザでも表示できました。原因はサッパリわかりませんが、とりあえず画像が表示されて動いているのでいいかと思いました。

そして、

ソーシャルボタンをキレイに並べる : Main's

こちらのサイトを参考に、ソーシャルボタンを横並びにすることに成功しました。

ただ、全ブラウザで共通の幅に調整することはできませんでした。FirefoxやChrome、Safariでは幅は同じなのにIEになると少しだけ幅が離れていたりするので、このあたりの違いは適宜調整をお願いします。ウチのブログではとりあえず利用者が多いSafariやChrome、Firefoxで正常に幅が表示されるように調整しました。

HTMLコード

<ul class="social">

<li class="facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href=自分のサイトなりFacebookのURLなど&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</li>

<li class="hatebu">
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>

<li class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="自分のアカウント" data-lang="ja">ツイート</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>

<li class="pocket">
<a data-pocket-label="pocket" data-pocket-count="horizontal" class="pocket-btn" data-lang="en"></a><script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</li>

</ul>

上記コードは↓のCSSで「float:right」を指定しているので、HTMLで上から順番にコードをコピーすると、設置したときに「下のコードが一番右から表示」されます。↑で言うと、Pocketのボタンが一番右になり、Twitter、はてブ、Facebookの順になります。なぜこんなめんどくさいことをやったかというと、どうしても右揃えにしたかったので。

また、Pocketボタンを一番右にしたかったんですが、調整が上手くいかず、どうしても余計な幅が空いてしまいました。そこでPocketボタンを一番左に持ってくるようにするときちんと並んだので、もうこれでいいかなと思い、これ以上余計なことをしてレイアウトを崩すのはやめました。

CSS

/***************************************** ▼ ソーシャルボックス ▼ */
ul.social li {
display: block;
float:right !important;
}

li.twitter {
width: 80px;
　height: 25px;
}

li.hatebu {
width:100px;
}

li.facebook {
border: none;
　overflow: hidden;
width: 100px;
height: 21px;
}

li.pocket {
width:100px;
}
/***************************************** ▲ ソーシャルボックス ▲ */

↑のCSSで各ボタンの幅などを調整して終わりです。お疲れ様でした。
たぶん、これよりもっと効率的にボタンを配置する方法などもあると思うので、目についたところのリンクを貼っておきます。参考にしてください。

HTMLコード

CSS

関連リンク