【CSS3】Twitterウィジェットをレスポンシブ(可変レイアウト)にする方法

Sponsored Link

Twitterウィジェットをブログに引用すると、デフォルトでは横幅が定義されています。そのため、以下のように表示されます。

※追記:2015年からこの方法ではレスポンシブにならなくなりました。

2015-02-03_013054

これを横幅100%にするには、埋め込まれる「iframe」タグに付くID名を指定して「width」を100%にすれば可能なのですが、Tweetを複数引用するとID名の末尾に数字が増えていきます。

そのため、CSSの「属性セレクタ」を使って指定するようにします。

/*TwitterAPI-style*/
iframe[id^="twitter-widget"] {
    width: 100%!important;
}

「iframe」タグの属性「id」の値が指定した文字(twitter-widget)で始まる場合に適用する。属性セレクタでも、この「始まる場合」の指定はCSS3以降の仕様になります。

すると下にあるTwitterのように、横幅いっぱいに表示されます。(スマホじゃわかりませんがPCなら違いがわかります)

特にメリットはありません。

ただ、Twitterの引用は左寄せがデフォルトであるため、それが嫌な場合は、このように横幅100%で表示するか、センター寄せをするしかありません。

というか、名古屋の地産地消アイドル「ボイメン」(薄井麺)が、「夢の一万人ライブ」という情報にビビっています。

Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。