レスポンシブデザインでインラインフレームをフィットさせる

レスポンシブデザインで、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>

関連記事

  1. WEBサイト内の電話番号表記がskype番号になってしまうのを制御する…

  2. CSS3でドロップシャドウ(影)を付ける

  3. Google AJAX Feed APIで静的HTMLに外部ブログを読…

  4. Googleカレンダーをホームページに表示させる方法

コメント

  1. この記事へのコメントはありません。

CAPTCHA


最近の記事

  1. WordPressのバックアップ
  2. 女性起業家の方へ

アーカイブ

制作実績一覧

  1. 芦屋気功療法院
  2. ホメオスタジア 敏感肌・乾燥肌用クレンジング&洗願ジェル
  3. office-aki
  4. looplus 神戸の不動産買取・売却・リフォーム
  5. 12starz
  6. SOARist
  7. ダンスウェア ララック様
  8. デジタルイースト
  9. 西表島 シュノーケル・カヌーツアーcrossriver