無料版はてなブログでスマホのCSSをJavaScriptを使ってカスタマイズする方法。成功せず。

無料版はてなブログでは、スマホのデザイン(CSS)を設定で一律に変更することができない。レスポンシブ対応のテーマを使えばできるが、そうでない場合、CSSを設定できない。

詳細設定で、headにJavaScriptを追加できるので、JavaScriptを使ってCSSを追加することを考えたが試した限りでは成功していない。

【試した方法 １】jQueryを使って。

$(function(){
	$('#content pre').css('color', '#00a');
});

【試した方法 ２】jQueryを使わず。

window.onload = function() {
	var els = document.querySelectorAll('#content pre');
	for (var i=0, l=els.length; i<l; i++) {
		var el = els[i];
		el.style.color = '#00a';
	}
};

【試した方法 ３】jQueryを使わず。

window.addEventListener('load', function() {
	var els = document.querySelectorAll('#content pre');
	for (var i=0, l=els.length; i<l; i++) {
		var el = els[i];
		el.style.color = '#00a';
	}
});

【試した方法 ４】CSSファイルを別サイトに置いて読み込む。

document.write('<link rel="stylesheet" href="https://ok2nd.sakura.ne.jp/css/hatenablog.css">');