twitterのウィジェットを設置してみたんだけど、なんかそこだけゴシック体になっちゃってなんだかなー…と思ったので、無理やりフォントを変えてみたよ。

ウィジェット自体はみんな大好きなiframeで生成されてるんだけど、JavaScriptを使って、そのiframeのhead部分にcssファイルを追加して読み込ませてしまおうという手法です。 外部cssファイルそのものを参照させてるので、cssを書ける人であればかなり柔軟にカスタマイズ可能です。

同志のためにソースコードを貼っておくけど、まず準備物から。

• twitterアカウント
• ウィジェットコード(ここで取得できるよ)
• カスタマイズ用のcssファイル(外部参照するため、自身のサイトの空きスペースにアップロードしてURLをメモっておいてください)

以下、ソースコードとなります。※利用は自己責任でお願いします(ないとは思うけど、twitter側から怒られても当サイトは一切責任を持ちません/笑)

ウィジェット設置用のタグ。※サンプルはうちのtwitterのURLになっているので、各自自身のものに置き換えてください。

<div id="twitter">
	<!-- twitterウィジェット用のタグ。開始。 -->
	<a class="twitter-timeline" href="https://twitter.com/_carisome_?ref_src=twsrc%5Etfw">Tweets by _carisome_</a>
	<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
	<!-- twitterウィジェット用のタグ。終わり。 -->
</div>

ここの最初のdivタグのidをもとにJavaScriptで操作を行うため、このidを控えておいてください。 これを、ウィジェット置きたい場所のソースコードに追加する。

次にJavaScript側のソース。

<script>
<!--
function changeTwitterWidgetCss(loop){
	//1.twitterのウィジェット埋め込み用のタグを入れた親要素のIDを指定してね
	var parentId = 'twitter';
	//2.ウィジェットに適用させたいCSSファイルのURLを入れてね
	var cssUrl = 'https://***.com/twitter.css';

	//以下、書き換える必要なし

	//1で指定した要素が存在するか確認するよ
	if(document.getElementById(parentId)){
		//1で指定した要素にiframeが存在するか確認するよ
		if(document.getElementById(parentId).querySelector('iframe')){
			//変数idにiframeのIDを格納するよ
			var id = document.getElementById(parentId).querySelector('iframe').getAttribute('id');
			//変数widgetにiframe要素を格納するよ
			var widget = document.getElementById(id);
			//widget内のbody要素が空でないか確認するよ
			if(widget.contentWindow.document.body != ''){
				//link要素を生成するよ
				var elm = document.createElement('link');
				//link要素にhref属性を追加して値としてcssのURLを設定するよ
				elm.setAttribute('href',cssUrl);
				//link要素にrel属性を追加して値としてstylesheet設定するよ
				elm.setAttribute('rel','stylesheet');
				//link要素にtype属性を追加して値としてtext/css設定するよ
				elm.setAttribute('type','text/css');
				//widgetのhead要素にlink要素を追加するよ
				widget.contentWindow.document.head.appendChild(elm);
			}else{
				//widget内のbody要素が空だったとき、500ミリ秒後に再実行するよ
				re(loop + 1);
			}
		}else{
			//iframeが存在しなかったとき、500ミリ秒後に再実行するよ
			re(loop + 1);
		}
	}
	//再実行用の関数
	function re(loop){
		//試行回数が10回に達したら処理をやめるよ(無限ループ防止用)
		if(loop < 10){
			//500ミリ秒後に実行
			setTimeout(function(){
				changeTwitterWidgetCss();
			},500);
		}
	}
}
//DOM要素の読み込みが終わったら(ページが準備できたら)、関数を実行するよ
document.addEventListener("DOMContentLoaded",function(){
	changeTwitterWidgetCss(0);
});
//-->
</script>

これをbodyの閉じタグの直前にコピペして、1.と2.と指定している変数部分を書き換える。 1.の"parentId"に、先ほどのdiv要素のidを指定してください。 2.のcssUrlに、ウィジェットに適用させたいCSSファイルのURLを指定してください(ウィジェット側からは自身のサイトは外部サイトとなるため、「http(s)://」から始まるURLを指定すること)。

上記2か所以外は書き換える必要ないですが、気になる方のために一応動きの説明をすべて記載しております。 補足として、なぜわざわざ親要素となるdivで囲んで、そのidをもとに操作をしているかという点について。 勘のいいひとは、そもそもiframeのidを調べて直接指定すればいいじゃんと思うかもですが、iframe自体がtwitterのウィジェット側のjsで生成されているため、いつ仕様が変わるとも限らないので安全策のためこうしておきました。

こんなめんどくさいことをするひとがどこまでいるかは分かんないけど、ご自由にお使いくださいませ。