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

2007年09月29日

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

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


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

個別記事のテンプレートの編集は、
　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();">



同じカテゴリー（プチ技）の記事画像
16. 特定の月日にメッセージを表示する
13. ファビコンを付ける
8. 日時と曜日、1時間単位でメッセージを変えて表示する
5. ブログのサイトマップを表示する
4. 長いプロフィールの一部を隠す
2. オススメ「地域ブログ」 の表示
同じカテゴリー（プチ技）の記事
 16. 特定の月日にメッセージを表示する (2007-09-29 14:48)
 13. ファビコンを付ける (2007-09-24 00:00)
 8. 日時と曜日、1時間単位でメッセージを変えて表示する (2007-09-09 00:00)
 5. ブログのサイトマップを表示する (2007-09-02 01:00)
 4. 長いプロフィールの一部を隠す (2007-09-02 00:00)
 2. オススメ「地域ブログ」 の表示 (2007-09-01 01:00)


Posted by お京 at 11:36 │プチ技
このBlogのトップへ│前の記事│次の記事
この記事へのコメント
正常に書き込みができるかどうか、テストしてみます。
できますように…。　（ー人ー）
Posted by お京お京 at 2007年09月29日 11:40
できてます！
お気に入りに追加しました。
Javaは全くなので勉強になります！
Posted by まゆまゆ at 2007年09月29日 13:10
＞まゆさん

ご確認、ありがとうございます♪　m(_ _)m
お気に入りに加えて戴き、ありがとうございました。

JavaScript … 実はわたしも、解かっていません。　(笑)
本を見ながらで、動いたら バンザ～イ!! しています。
Posted by お京お京 at 2007年09月29日 14:58
バッチリですね！
ただ初期値の色をスタイルシート側でも同じ色にしておいた方がいいかもしれないですけどね。

僕もこの機能はお気に入りの1つで、メインブログの方では画像にして設定しています。

ちなみに紹介されているjavascriptでもちょっとイジってやれば画像もOKですよ。
「obj.style.backgroundColor = "#eeffff";」を「obj.style.backgroundImage = "url(画像のurl)";」にするだけです。
簡単でしょ(^ー^* )フフ♪
Posted by nory at 2007年10月01日 23:08
＞nory さん

> ただ初期値の色をスタイルシート側でも同じ色にしておいた方が…

ありがとうございます。
おっしゃる通りですね。

#author{
width :200px;
border :1px solid #00514D;
background-color :#ffffff;
}
#email{
width :200px;
border :1px solid #00514D;
background-color :#ffffff;
}
#url{
width :200px;
border :1px solid #00514D;
background-color :#ffffff;
}
#text{
width :400px;
height :200px;
border :1px solid #00514D;
background-color :#ffffff;
}

… のような感じになるのでしょうか。。。

背景を画像にする件も、ありがとうございます。
どこかのブログで、試してみます♪
Posted by お京 at 2007年10月01日 23:48
このページの上へ▲