【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す
格安SIM比較サイトを更新している時に気がついたのですが、CSSで幅いっぱいまで広げていたTwitter埋め込みウィジェットが何故か右側に余白が空くようになってしまいました。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
- 目次で流し読みする ･*･:≡( ε:)
原因は埋め込みコードの変更？
こうなってしまうとコンテンツ幅に合わせて広げているレイアウトが出来なくなってしまいます。どうしてもコンテンツ幅に合わせておきたかったので、jQueryを利用して強引に幅100%に調整しました。
Chromeの開発者ツールで調べてみたところ、Twitterの埋め込みウィジェットが吐き出すソースコードが変更されたみたいで、幅が最大520pxに固定されてしまったようです。CSSでmax-width:100% !ipmortant;のように幅いっぱいに指定しても効かなくなってしまったようです。
jQueryで強引に幅100%に戻してみる
CSSが効かないとなると、jQueryとかでどうにかなるんじゃないかと考えてググってみたら同じことを考えている方が居ました。
まずはウィジェット内に適用させるためのCSSファイルを作成します。参考サイトと同じようにtw.cssと名前をつけて保存しました。
.timeline {
max-width: 100% !important;
width: 100% !important;
box-sizing:border-box;
}
このファイルをjQueryでウィジェット内に適用させます。ウィジェットはiframeが実行されるので、その中の<head>内にスタイルシートを読み込むパスを指定します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
function changeWidget() {
var twFrame = $('iframe#twitter-widget-0');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="【CSSファイルまでのパス】/tw.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
これでようやく元に戻りました。このコードもTwitter側の仕様変更によっては使えなくなってしまいます。告知なしで変更するのホント勘弁して欲しいです…。
参考記事以外に同じような情報が無かったので、もしかしてあまり問題視されていないのかな…？
