15. コメント入力時 入力エリアの色を変える

お京

2007年09月29日 11:36

変更前
=> 変更後のイメージ

コメントを入力する時、入力エリアの枠内の色を変えてみようかなと思いました。

やるべき作業は、個別記事のテンプレートの変更です。

個別記事のテンプレートの編集は、
 1) 滋賀咲くBlog にログイン
 2) 左メニューの「テンプレート」をクリック
 3) 「カスタマイズ」をクリック
 4) 「個別記事」を書替える
 5) 「登録」をクリック

で行います。

「個別記事」のテンプレートは、つぎのように書替えました。

個別記事 変更前
内容 </head> 変更後
</head> タグの直前に、JavaScript を挿入してください。
内容 <!--コメント入力時 入力エリアの色を変える-->
<SCRIPT language="JavaScript">
<!--
//
function changeColor () {
if(!document.getElementsByTagName) return;
var elms = document.getElementsByTagName("input");
for(i = 0; i < elms.length; i++) {
elms[i].onfocus = focusInput;
elms[i].onblur = blurInput;
}
elms = document.getElementsByTagName("textarea");
for(i = 0; i < elms.length; i++) {
elms[i].onfocus = focusInput;
elms[i].onblur = blurInput;
}
}

function focusInput (e) {
var obj;
if(window.event) obj = window.event.srcElement;
else if(e) obj = e.currentTarget;
obj.style.backgroundColor = "#eeffff";
}

function blurInput (e) {
var obj;
if(window.event) obj = window.event.srcElement;
else if(e) obj = e.currentTarget;
obj.style.backgroundColor = "#ffffff";
}
//-->
</SCRIPT>
<!--コメント入力時 入力エリアの色を変えるEND-->
</head> 変更前
内容 <body> 変更後
<body> タグを、次のように書替えてください。 内容 <body onload="changeColor();">


関連記事