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

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

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

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

コメント

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

CAPTCHA


最近の記事

  1. WordPress ブロックエディター 記事投稿マニュアル(ダウンロード用PDF)
  2. 「雑誌取材」や「TV番組取材」という名目の広告営業にご注意!
  3. フリーランスに必要な「稼ぎ力」「継続力」を身につける
  4. ブログって何をどう書いたらいい?

アーカイブ

制作実績一覧

  1. コロナウイルス対策 リモーバ
  2. 霊能者が占うスピリチュアルサロン medium
  3. 沖口まこと体操クラブ
  4. やまもとサンクリニック/西宮
  5. 山崎由香のHappyLifeブログ
  6. HappyLife様
  7. salondeuniverse
  8. Nai‘a~ナイア~
  9. M-Style