中途半端を極める

web関連で役に立ちそうなものを紹介いたします

WEBサービス

FacebookのLike Boxなどのウィジェットを簡単にレスポンシブ対応をする方法

投稿日:

最近レスポンシブ対応のサイトが増えてきました。
しかしFacebookのLike Boxなどはタグを取得する時に横幅を指定して取得します。
どうやってレスポンシブに対応するんだろう?そう思って調べたら対応できるようにするcssを発見しました。

このCSSを入れるとFacebookのウィジェット関連は全てレスポンシブに対応する。

fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
width: 100%! important;
}

もし部分的にレスポンシブ対応したくない箇所がある場合は、適当なdivで括ってあげて、うまくcssを調整すればよいかと思われます。(そんなことめったなことが無い限り無いとは思いますが…)

-WEBサービス

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

メールアドレスが存在しているか確認するウェブサイト「メールアドレス存在・生存・死活確認ツール」

メールを送っても、返信が数日無かったりすると不安になったりすることがありませんか? そういう時は今回紹介するウェブサイトで簡易的ではありますがメールアドレスが存在しているか確認することができます。

悪質な詐欺通販サイト(フィッシングサイト)の見分け方のコツ

最近は通販が当たり前の世の中になっており、日常的に使用されている方も多いのではないかと思います。ただ、普段から使っている人でも詐欺サイトに引っかかってしまったという話も耳にします。 SNSで、勝手にア …

【ハッキングされた?】何もサイトを変更していないのに「wa-track.com」にリダイレクトされてしまう。

twitterなどでもちょっと話題になっていたようですが、何もサイトを変更していないのに、別ページにリダイレクトされるような現象があったようです。(実際に自分も見ました。) ハッキングされた?など不安 …

no image

【blogger設定その1】Bloggerにzenbackを埋め込んでみた

Bloggerにzenbackを埋め込んでみましたので、その手順を記しておきます。 Zenbackとは? Zenback は、設置したブログやサイトの RSS から記事内容を解析し、関連記事やソーシャ …

FC2プレイヤーローカル版も配布停止!もう埒があかないので…作ってみました。

コメントしていただいた方から「ローカル版の配布も終了したみたいです」とコメントがあり、実際に確認してみると、配布先URLの記載が無くなっておりました。 Internet ArchiveでURLのリンク …