WordPressテーマでGoogle+1ボタンを他のボタンと横一列に表示する方法

WordPressのテーマによっては、「はてなブックマーク」や「Twitter」のボタンなどと一緒に「Google+1」ボタンのコードをそのまま使うと横一列に並ばずにずれて表示されます。

share_button

その原因は、テーマに設定されたスタイルシートが原因です。
共有・ソーシャルボタン系は、iframeタグを利用して表示されますが、WordPressのテーマ「Twenty Twelve」の場合、スタイルシートの設定でiframeにmargin-bottomが設定されていて、それがTwitterやはてなブックマークボタンに影響してGoogle+1ボタンがずれた表示になっています。

横一列に表示するには、スタイルシートにあるiframeのマージンの設定を上書きや修正をします。

Twenty Twelveの場合ですと、style.cssに「.entry-content iframe」にmargin-bottom要素があるので、その値を0にします。

.entry-content iframe {
	margin-bottom: 0px;
	margin-bottom: 0rem;
}

iframeのmargin-bottomの値を0に変更すると横一列に表示されます。

share_button2

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です