ファンブログのSNSボタンの並びや間隔を調整する方法

ファンブログカスタマイズ：HTML 編投稿日：2012年05月14日 00:15

ファンブログにSNSボタンを設置してみよう！で設置したSNSボタンは、SNSボタン付スキンに設置されているものと同じものなんですが、フェイスブックのボタンがちょっと上にズレていたりしているのって几帳面な方は少し気になっているんじゃないでしょうか？

そんな几帳面な方のために簡単にボタンの並びや間隔を調整する方法を説明します。ちなみに私は <div> で囲って class を指定して css で調整していますが、そんな面倒なことをしなくてもある程度でしたら調整ができますので、まずはこちらを試してみてください。( ^ω^;)）

Facebook のいいね！ボタンのズレを調整する

それではちょっと上にズレている、フェイスブックのボタンの調整方法を説明します。フェイスブックのボタンコードは最後に記述されています <iframe src= から </iframe> までのコードになります。

<iframe src="http://www.facebook.com/plugins/like.php?href={$BlogEntryPermalinkUrl$}...
～ 省略 ～ overflow:hidden; width:120px; height:21px;" allowTransparency="true"></iframe>

このコードの最後の方に記述されています height:21px; を height:20px; に変更しますと気持ちよく並びます。

※ お使いのブラウザや解像度によってはボタンの下線が消えてしまう場合がございますが、ほとんどのブラウザでは問題なく表示されますので、裏技として公開しています。( ^ω^;)）
※ 少し手前に同じような表現の ;height=21" という記述がありますがこちらではないのでご注意ください。
※ 右側の余白は width:120px; の数字を変更することで幅の微調整ができます。

mixi チェックボタンの種類を変更して高さを揃える

続いて mixi チェックボタンの種類を変更して高さを揃える方法を説明します。mixi チェックボタンのコードは一番上の <a href="http://mixi.jp/share.pl" から mixiチェック</a> までのコードになります。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="4e48d24a8482d329...
～ 省略 ～ data-button="button-1" data-url="$BlogEntryPermalinkUrl$}">mixiチェック</a>

このコードに記述されています "button-1" を "button-6" に変更しますとボタンの高さを揃えることができます。

Tweet ボタンの余白を調整する

次にツイートボタンにカウント表示させた場合に発生する余白の調整方法を説明します。
ツイートボタンにフェイスブックのボタンと同じようにカウントの吹き出しを表示させたい場合は以下の記述を書き換えて設定を変更してください。

	data-count="none" data-lang="ja">Tweet</a>
<iframe src="http://www.facebook.com/plugins/like.php?href={$BlogEntryPermalinkUrl$}&...

フェイスブックのボタンコードのすぐ上に記述されています data-count="none" を data-count="horizontal" に変更しますと右横にカウントの吹き出しが表示されるようになりますが、ボタンの右側に余白ができてしまいます。

この余白はCSSで調整をすることができますので、以下のCSSコードをスタイルシートの最後に追記してください。
width: 100px!important; の数字を変更することで幅の微調整ができます。

/* Twitterボタンの幅調整 */
iframe.twitter-share-button {
	width: 100px!important;
}

※ ツイートボタンの余白スペースの調整につきましては、こちらのサイト様を参考にさせていただきました。
► 新しくなった公式 Twitter ボタンの余白スペースをカット @ Eiji
► 新しくなった公式Twitterボタン（ツイートボタン）のデザインを修正する＠小粋空間

※ フェイスブックボタンの微調整、mixi チェックボタンの種類の変更、ツイートボタンのカウント設定はHTMLの記述変更となりますので、メイン、アーカイブ、1記事のHTMLの記述を変更してください。
※ ツイートボタンの幅調整はスタイルシートに追記すれば、全てのページに反映されます。
※ 2012年09月02日： mixi チェックボタンの種類を変更してボタンの高さを揃える方法を追記しました。

いかがでしたでしょうか？これだけの記述でこんな感じに調整することができました。几帳面な方はとっても気持ちよくなりますので、ぜひお試しください。( ^ω^;)）

※上記Htmlタグ、CSSコードはコピー＆ペーストでそのままご利用になれます。
※Htmlタグ、CSSコードのご使用につきましては、利用者の自己責任にてお願いします。

≪　前の記事に戻る　｜