【twitter】埋め込みタイムラインのcssを変更する方法

2016年8月12日

サイトにtwitterのタイムライン表示を行った際に、『タイトル部分のfont-sizeを変更してほしい』というスタイル変更（css修正）の要望があったので、その対処方法を備忘録として残しておきます。

ウィジットをまだ作成していない方は下記から作成できます↓

【ウィジット作成】
https://twitter.com/settings/widgets
※twitterウィジットとは、サイト内に埋め込んで表示させるタイムラインのこと

補足
クライアントのサイトを作成する際に、
ハッシュタグでのタイムライン表示は問題ないが、『クライアントの投稿を表示したい』となった場合はクライアントのtwitterアカウント情報が必要なので注意。

今回やることとして
js で iframe.twitter-timeline にアクセスし、css を読み込ませて font-size 修正するです！

【html】
Htmlのhead内に下記jsを追加

function changeTwitterWidgetDesign(){
var $twitter_widget = $('iframe.twitter-timeline');
var $twitter_widget_contents = $twitter_widget.contents();
if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
$twitter_widget_contents.find('head').append('<link href="style.css" rel="stylesheet" type="text/css">');
}
else {
setTimeout(function(){
changeTwitterWidgetDesign();
}, 350);
}
}
changeTwitterWidgetDesign();