レスポンシブデザインでインラインフレームをフィットさせる
R-webレスポンシブデザインで、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>
納品時にお客様へ渡すマニュアル作成が面倒な方や、初めてWordPressでブログを書く方へ
【印刷用】WordPres 6.5 記事投稿図解マニュアル
初めてWordPressを使う方もこのマニュアルでブロックエディターの基本的な使い方が分かるように、必要な部分だけを濃縮してまとめました！
WordPressのブログ投稿の基本からちょっとした応用編まで。
私が納品時にお客様へお渡ししているものなので、個人でブログを書いている方はもちろん、制作会社様はフリーランスでWEB制作をされている方はお客様へお渡しいただいても大丈夫です！
