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

レスポンシブデザインで、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. Google AJAX Feed APIで静的HTMLに外部ブログを読…

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

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

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

コメント

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

CAPTCHA


最近の記事

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

    至福の時間

アーカイブ

制作実績一覧

  1. 12starz
  2. SOARist
  3. ダンスウェア ララック様
  4. デジタルイースト
  5. 西表島 シュノーケル・カヌーツアーcrossriver
  6. ハミング
  7. hearty
  8. An Rire
  9. スタートアップ