Webデザインやガジェット、格安SIMの情報ブログ

【jQuery】Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す

格安SIM比較サイトを更新している時に気がついたのですが、CSSで幅いっぱいまで広げていたTwitter埋め込みウィジェットが何故か右側に余白が空くようになってしまいました。

※本ページは広告・アフィリエイトプログラムにより収益を得ています。

スポンサーリンク

原因は埋め込みコードの変更?

格安SIM比較---格安SIMの料金・通信量・通信速度などを一覧で比較出来るサイト。

こうなってしまうとコンテンツ幅に合わせて広げているレイアウトが出来なくなってしまいます。どうしてもコンテンツ幅に合わせておきたかったので、jQueryを利用して強引に幅100%に調整しました。

2015-07-05_202712

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>

2015-07-05_203808

これでようやく元に戻りました。このコードもTwitter側の仕様変更によっては使えなくなってしまいます。告知なしで変更するのホント勘弁して欲しいです…。

参考記事以外に同じような情報が無かったので、もしかしてあまり問題視されていないのかな…?

コメントを残す

writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。