« ぼくも RSS が大変な事に... | トップページ | Javascript を利用してスタイルを変更する(3) »

2003.12.06

Javascript を利用してスタイルを変更する(2)

スタイルシートを操作するもう 1 つの方法を提案します.「詞織: 自作スタイルシートの適用」や「埼玉住人: 引用をわかりやすくしよう」で,link 要素や style 要素をなんとか埋め込んで,スタイルシートを適用しようという試みがされています.すばらしいテクニック.

でも本来おくべきところに link 要素や style 要素をおくわけではないので,XHTML の文法違反になってしまいます.この点はなんとも残念です.

ぼくも先人のマネをしてみたのですが,link 要素や style 要素ではなくて,script 要素を埋め込みました.そして外部ファイルにした javascript を読み込んでスタイルシートを操作します.こうして XHTML の文法違反になるのを避けてみました.

script 要素を埋め込んだのは,マイリンクの中です.なるべく下側になるのが良いでしょう.

<script type="text/javascript" src="/handshaking/style.js"></script>

/handshaking/ の部分は,ご自身の Weblog のディレクトリ名,つまりファイルをアップロードする場所に変更してください.

javascript のファイルは,ダウンロードして改変してみてください.

Download file [javascript のファイル]

この例では,見出しのスタイルと本文の字の大きさ,長文引用時の枠線などをのスタイルシートを操作しています.

下にソースコードを貼っておきます.

公開後に間違いを発見したので修正しました.

// ココログ用 javascript によるスタイルシート操作
// これは,正しい XHTML を保つために,スタイルシートの操作を javascript で行う試みです.
// これは自由に使用し,改変して,配布してかまいませんが,正しい XHTML を心がけましょう.
// マイリストになにかの項目を足すときに,そのメモの部分に以下のタグを書きくわえます.
//	<script type="text/javascript" src="style.js"></script>
// そのマイリストの項目よりも先に出現するものしか,操作できません.
// おのひろき 
// http://onohiroki.cocolog-nifty.com/foaf.rdf
//
// ココログ タイトルとサブタイトル
document.getElementsByTagName("h1")[0].style.fontSize = '54px';
if(document.getElementsByTagName("h2").length){
	document.getElementsByTagName("h2")[0].style.fontSize = '64px';
	document.getElementsByTagName("h2")[0].style.color= '#768BA0';
	document.getElementsByTagName("h2")[0].style.paddingTop = "30px";
}
// 各パートの横幅
document.getElementById("container").style.width="90%";
document.getElementById("right").style.width="23%";
document.getElementById("center").style.width="77%";
if(window.innerWidth < 500){
	document.getElementsByTagName("h1")[0].style.fontSize = '2em';
	document.getElementsByTagName("h2")[0].style.fontSize = '2em';
	document.getElementById("right").style.width="100%";
	document.getElementById("center").style.width="100%";
}
if(window.innerWidth > 1600){
	document.getElementById("right").style.width="12%";
	document.getElementById("center").style.width="88%";
}
// 記事の見出し
var i=0;
do {
	document.getElementsByTagName("h3")[i].style.fontSize = '2em';
	document.getElementsByTagName("h3")[i].style.color = '#FFFFFF';
	document.getElementsByTagName("h3")[i].style.backgroundColor = '#768BA0';
	document.getElementsByTagName("h3")[i].style.padding = '0.3em';
	document.getElementsByTagName("h3")[i].style.borderStyle = 'solid';
	document.getElementsByTagName("h3")[i].style.borderWidth = '2px';
	document.getElementsByTagName("h3")[i].style.borderColor = '#667B90';
	i+=1;
} while (i < document.getElementsByTagName("h3").length);
// 本文 p 要素
var i=0;
do {
	document.getElementsByTagName("p")[i].style.fontSize = 'medium';
	i+=1;
} while (i < document.getElementsByTagName("p").length);
// 長文引用 blockquote 要素
if(document.getElementsByTagName("blockquote").length){
	var i=0;
	do {
		document.getElementsByTagName("blockquote")[i].style.fontSize = 'medium';
		document.getElementsByTagName("blockquote")[i].style.padding = '0.3em';
		document.getElementsByTagName("blockquote")[i].style.borderStyle = 'solid';
		document.getElementsByTagName("blockquote")[i].style.borderWidth = '1px';
		document.getElementsByTagName("blockquote")[i].style.borderColor = '#667B90';
		i+=1;
	} while (i < document.getElementsByTagName("blockquote").length);
}
// 整形済みテキスト pre 要素
if(document.getElementsByTagName("pre").length){
	var i=0;
	do {
		document.getElementsByTagName("pre")[i].style.color = 'green';
		document.getElementsByTagName("pre")[i].style.padding = '0.3em';
		document.getElementsByTagName("pre")[i].style.borderStyle = 'solid';
		document.getElementsByTagName("pre")[i].style.borderWidth = '1px';
		document.getElementsByTagName("pre")[i].style.borderColor = '#667B90';
		i+=1;
	} while (i < document.getElementsByTagName("pre").length);
}

|

« ぼくも RSS が大変な事に... | トップページ | Javascript を利用してスタイルを変更する(3) »