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

コラム、ゲーム、PC・ネット、生活、プロレス情報などを幅広くお届けしています。

おすすめサイトヘッドライン


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


      [ 2014/06/12] PC・ネット・ブログ ブログ 編集

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

sb.jpg

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

一番頭をひねったのは「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で各ボタンの幅などを調整して終わりです。お疲れ様でした。
たぶん、これよりもっと効率的にボタンを配置する方法などもあると思うので、目についたところのリンクを貼っておきます。参考にしてください。

関連リンク


ソーシャルボタンをキレイに並べる : Main's ←今回お世話になったページ
ソーシャルボタンを設置しよう|うぃず FC2テンプレート
ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など | Cappee Design
TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS - hostingjedi
【ブログ術まとめ】保存版!SNSソーシャルボタン設置コード一覧で捗る - ゆめぴょんの知恵
このカテゴリのランダム記事

RSS・Twitterフォロー


My Yahoo! などのRSSリーダーを使うと、AMGブログの更新情報をすぐに受け取ることができます。下記バナーをクリックして、このブログのRSSをリーダーに登録すれば、記事が更新されるたびに最新記事がリアルタイムで入手できます。


Twitterによる更新情報の配信も行なっております。下記バナーをクリックして、アカウントをフォローしていただければ、AMGブログの最新記事があなたのタイムラインに表示されます。




関連するタグ PCブログHTMLcss




タグcloud
リンク
俺とゲームの素晴らしき時間
まじめ系クズの日常
青空プロレスNEWS – 新日本プロレス・WWEの海外最新速報ニュースピックアップ
陰陽座コピーバンド「魂響(Tamayura)」Webサイト 魂響
ニコニコ動画研究部
ひといきゲーム - 無料フラッシュゲームがたくさん!
実は都市伝説
検索窓.com
お手軽ゲーム館
ゲーム生活はじめました。
オールフリーソフト Windows 7・8対応のフリーソフト
オールフリーソフト更新情報
New ひろのブログ
Wii&WiiUおすすめゲームソフト集
☆ニョッキ動画
新作オンラインゲームベスト
フラシュ - 無料フラッシュゲーム
無料ゲーム探索隊
アクションゲームの庵
無料ブラウザゲーム集
無料ゲームのSimple Flash Games
棒人間ゲーム
無料ブラウザゲームnet
フラッシュゲームな日々・・・
フラゲーム
面白オンゲ通信!
ベリーズゲーム
無料防衛ゲームプレイ
はっぴぺ通信2
イジワル海賊団【無料ゲーム本部】
おもしろ フラッシュゲーム ミュージアム
脱出ゲームセンター
無料パチスロゲーム
MMORANK.JP
FPSRANK.JP
無料フラッシュゲーム
ファミコンのネタ!!
おもしろいゲーム 無料ゲームで遊ぼうよ!
オモロ無料ゲーム
だしゅつ! 無料脱出ゲーム
おもしろゲームフラッシュ集-脱出ゲーム集
フリーソフトの樹
ゲーム動画ブログ
その他リンク集

脱出ゲーム大百科 





逆アクセスランキング