レスポンシブデザインでインラインフレームをフィットさせる
レスポンシブデザインで、Facebookの「いいね」を設置した場合、インラインフレームなのでレスポンシブになってくれず、はみ出てしまいます・・・
なので、CSSで画面におさまるようにする方法を書いていらっしゃるサイトを見つけたので、メモです。
Facebook like boxをレスポンシブデザインにフィットさせる方法
※↑こちらのサイトで詳しく説明されていらっしゃいます。
CSSに以下の記述を入れます
div.fb-like-box, div.fb-like-box iframe[style], div.fb-like-box span { width: 100% !important; }
すると、あら不思議!見事にフィットしました!
ちなみに、このスタイルを入れておくとGoogleカレンダーなどのインラインフレームの場合にもこのスタイルを適用すれば、レスポンシブになりました!(*^_^*)
便利ですね!
こんな感じで使いまわします。
</pre> <div class="fb-like-box"><iframe src="Googleカレンダーのソース" height="高さ" width="幅"></iframe></div> <pre>