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

レスポンシブデザインで、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. WEBサイト内の電話番号表記がskype番号になってしまうのを制御する…

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

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

コメント

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

CAPTCHA


最近の記事

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

アーカイブ

制作実績一覧

  1. Nai‘a~ナイア~
  2. M-Style
  3. みなとワンピース
  4. オーダースーツ 中山手縫製所
  5. テープ起こし アトリエ・ソレイユ
  6. 西宮市議会議員 よつや薫
  7. ジョディのお店
  8. cafe sucre
  9. start-up