Posted at

Twitterのウィジェット(埋め込みタイムライン)のスタイルをカスタマイズする

More than 5 years have passed since last update.

Twitterのウィジェットを高さ以外もカスタマイズできるスクリプト - Qiita

こちらの改良版です。

Twitterの埋め込みタイムラインウィジェットはあまりカスタマイズできないのでjsで外からスタイル変更する方法です。

ただ、ウィジェットのidやクラスが変わると使えなくなったりします。

また、スタイルを変更するのはtwitterのブランドデザイン?的にあまりよろしくないことなのかもしれないので参考程度に。。。

/** 新しいTwitterウィジェットのスタイルを設定* */

function decorateWidget(id) {
var $twwgt = $(id);
var decorate = function($el) {
$el.find(".timeline-header").css(/*スタイルを変更*/);
$el.find(".timeline-footer").css(/*スタイルを変更*/);
return $el;
};

//ウィジェットが読み込まれるまで再帰
if ($twwgt.length > 0 && $twwgt[0].contentWindow.document.body.innerHTML !== "") {
decorate($($twwgt[0].contentWindow.document));
} else {
setTimeout(function() {
decorateWidget(id);
}, 500);
}
}
decorateWidget("#twitter-widget-0");