普段はMacのChromeを使ってるんですが、ブログのデザインを変えたときにSafariやFirefoxで自分のブログを見ると、Facebookのいいねボタンが切れているのに気付きました。最初はブラウザの互換性の問題かと思ったんですが、よく見るとボタンが「Like」ではなく「いいね!」になっているのが原因でした。ボタンのピクセル数を測ってみるとLikeの場合は79pxで、いいね!の場合は101pxでした。ところがHTMLソースを見ると、iframeのwidthが100pxになっています。allowTransparency="true"></iframe>じゃあwidthを変更すれば解決だよね〜!・・・と思ったんですが、このボタンははてなダイアリーの管理ページから利用の有無を選択するボタンなので、HTMLソースを細かくカスタマイズすることはできません。するか?解決策というわけで解決策です。CSSでwidthを変更します。HTMLソース内で指定されているwidthよりも優先度を上げることと、facebookのiframeだけを狙い撃ちにすることがポイントです。スタイルシート」で、以下のような定義を追加します。!important;}HTMLソース内で指定されているwidthよりも優先度を上げるために「!important」をつけています。facebookのiframeだけを狙い撃ちにするために「src属性に"facebook"が含まれるもの」を指定しています。自動生成されるHTMLソースにはいいねボタンを識別できるようなclass属性が付いていないので、苦肉の策としてこのようなセレクタを指定しています。いうわけで、ちゃんと表示されるようになった「いいねボタン」はこちらになります。できればこんなことをしなくても、はてなさんが標準のwidthを変更してくれると助かるんですけどね〜。僕と同じように気になっている人がいたら参考にしてみてください。はてなブログPro株式会社ソニックガーデンで働くRubyプログラマ。2017年11月に「プロを目指す人のためのRuby入門」を出版。blog)はてなブログをはじめよう!JunichiItoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。