最近なぜかフェイスブックの記事が多くなっていますが・・・それは置いておいて、今日は先日書いた
『サイドバーにブログ共有ボタンを設置する方法』
について質問がありましたので追記というか注意点を書かせていただきます。
さて質問して頂いたのはこの方。
医業コンサルタントとして熱い想いを持っていられる素晴らしい方です。
今回質問いただいたのは、ボタンがずれてしまうんですがどうすればよいのですか?
というものでした。
すいません<(_ _)>
私の言葉足らずでした。
ボタンがずれるとはどういう状況かというとこういう状況。
本来であれば下記のようにならなければいけないはずがずれてしまっています。
これはフィード購読ボタンのサイズが原因なんですね。
通常、フィード購読ボタンをサイズを変更せずに設置した場合、タグは
<iframe src="//www.facebook.com/plugins/subscribe.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&layout=standard&show_faces=true&colorscheme=light&font&width=450&appId=162836930463524" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
のようになります。
ここで見て頂きたいのが赤字の部分
width:450px
これはボタンの幅を表しています。
450pxというと大分大きいですね。
メインカラムのほとんどを占めるぐらいの大きさです。
こちらをご自身のボタンに合わせて変更して下さい。
また、このタグでは高さを指定しておらずそのまま貼りつけると150pxになっています。
そのため上の写真のように大きく間が空いてしまっているんですね。
そのため、幅と併せて高さを設定してあげる必要が出てきます。
なら
width:100px;height:60px;
なら
width:130px;height:20px;
なら
width:400px;height:60px;
となります。
ちなみに の場合、Show facesにチェックを入れていない場合、縦のサイズは20pxになります。
ただ上記のサイズはボタンそのもののサイズになっています。
しかし、少し大きめに指定した方が、スペースをわざわざ空けなくても良いので幅は+10px、高さは+2px大きめにするのがオススメですよ!
頑張って設置してみて下さいね^^