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

レスポンシブデザインで、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カレンダーをホームページに表示させる方法

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

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

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

コメント

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

CAPTCHA


最近の記事

  1. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  2. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  3. ブログって何をどう書いたらいい?
  4. ホームページ・ブログ・SNS それぞれの特徴と役割そして使い分け

アーカイブ

制作実績一覧

  1. every
  2. さわやか鍼灸治療院
  3. アトリエブルームーン
  4. 美コンシャス 沖縄宜野湾店
  5. REAL HOME
  6. 阪神補聴器センター
  7. バレエスタジオ  ステラ
  8. 大阪京橋のエステサロン Will
  9. 今治タオルのエステローブ Will