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

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


IT補助金導入のホームページ制作

IT導入補助金を利用したホームページ制作

最近の記事

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

アーカイブ

制作実績一覧

  1. princess_jem
  2. 放課後デイサービス happy-wing
  3. every
  4. さわやか鍼灸治療院
  5. アトリエブルームーン
  6. 美コンシャス 沖縄宜野湾店
  7. REAL HOME
  8. 阪神補聴器センター
  9. バレエスタジオ  ステラ