Twitter、はてなブックマークの横幅を設定する方法（CSS）

「Twitter」や「はてなブックマーク」のボタンをサイトに設置すると、Twitterのボタンの右側に広い余白ができ、また、「はてなブックマーク」ボタンの横は狭い余白ができ、それぞれのボタンで意図しない幅が設定されてしまいます。

ボタンの幅を自分の意図する幅に変更する方法

Twitter、はてな、それぞれiframeに設定された値によって幅が設定されています。その値を変更することはできませんが、それより優先順位の高い値をiframeに設定することで幅を変更できます。

Twitterのiframeにclassが設定されていて、そこには「twitter-share-button」また「twitter-tweet-button」が設定されています。

style.cssなどCSSファイルに「twitter-share-button」クラスを追加して、幅widthと値を設定し、「!important」を追加することで幅を設定できます。

.twitter-share-button {
	width:100px !important;
}

はてなブックマークボタンもifameにclassが設定されていて、そこには「hatena-bookmark-button-frame」が設定されています。

style.cssファイルに「hatena-bookmark-button-frame」を追加して、幅widthと値を設定し「!important」を追加して優先度を上げることで、設定した値が反映されるようになります。

.hatena-bookmark-button-frame{
	width:200px !important;
}