このブログのサイドナビゲーションに配置してあるウィジェット

• 最近の投稿
• アーカイブ
• カテゴリー
• 最近のTweet

のタイトル（h3要素）にそれぞれ個別のアイコン（背景画像）を付けたい！と思っていたものの、ウィジェットなのでh3タグに id やら class やらを付けられず、断念しておりました。 が、最近かじり始めたJavaScript DOM を使えば実現できそうなので、勉強がてらトライ。どうにかこうにか実現できました。 備忘録的にコードをぺたり。

	window.onload = function() {
		var oElements = document.getElementById('sidebar').getElementsByTagName('h3');
		for (var i = 0; i < oElements.length; i++) {
			var oElement = oElements[i];
			switch (oElement.innerHTML) {
				case '最近の投稿':
					oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/flag.gif)';
					break;
				case 'アーカイブ':
					oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/document.gif)';
					break;
				case 'カテゴリー':
					oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/folder.gif)';
					break;
				case '最近のTweet':
					oElement.style.backgroundImage = 'url(/wp-content/themes/journalist/images/bitcons/comment.gif)';
					break;
			}
		}
	}

onload イベント時に getElementById と getElementsByTagName を使ってサイドバーのh3要素を探し出し、case 文で h3要素のinnerHTML ごとに css の background-image を切り替える… おお…楽しいぞ JavaScript…（笑） （ただし、コードを書くに当たって参照してたサイトが 「getElementById」を「getElementsById」って書いてくれていたおかげで30分以上悩んでいたのは内緒だ） しかし、改めてソースコード見たら background-image のURL、共通部分が冗長ですな。書き直すかー。気が向いたら。 あと、これを外部ファイルにしようと思っても、読み込み処理のタイムラグのせいで一筋縄にはいかないようで。これもそのうち対応したいっす。 あ、ソースコードの表示に際して、SyntaxHighlighter Evolved なるプラグインも導入させていただきました。導入に際してお借りしたフンドシはこちら。

WordPressにソースコードを綺麗に表示させるプラグイン SyntaxHighlighter Evolved を設置 | WordPressで綴るパソコン生活

http://kantan.hp2.jp/?p=647

あー、気持ちイイわこれ。色々覚えていきましょい。