コメント欄の文字に色を付けたい

個人的な「日記」に関しては、コメントを受け付けないようにしているのだが、社内で使う「イントラブログ」の場合はコメント欄を使うようにしている。

単に報告書を提出する代わりに記事を書くだけではなく、お互いの記事にコメントを付け合うことをしたかったからMTに切り替えたわけです。

社内の仕組みを“ブログ化”させると、いろいろと応用が考えられ、「セールス伝言板」もブログでやっちゃえとT君へ提案。

先日「Wiki」を使っての「伝言板」については、使い勝手の悪さから有耶無耶にされてしまって、私としては哀しい思いをしたが、「ブログ版ならどうだ!」とT君に連絡したのだが…

「伝言を伝えたらコメント欄に“済”を入力すればいいんですね」とT君。
「そうだよ。簡単でしょ。」と私。
「“済”は赤い字にならないのですか?」と予想もしなかったことを言うT君。

む、む、む、赤い字にしろってか。
デフォルトを赤文字にしちゃえば簡単だが、“済”以外にも入力するたろうに…。
めんどうな事を言うもんだ。

やれやれ。

さてここからは3段階改造記録である。

★ステップ1

コメント欄のタグを有効にする。

設定→基本→許可するHTMLタグ→カスタム設定
ここを変える。
a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,span style,div class

これで赤文字になるが
<span style=”color:red”>済</span>

スタイルシートに定義したものだけを使ってもらう方が安全だろう。
<div class=”f_red”>済</div>

これでOKと思ったが、うーん「タグを埋め込め」なんて言っても「できん」って却下されるか、とんでもないことをしでかすだろうな。

★ステップ2

タグ挿入ボタンをコメント欄に設置することにした。

「コメント編集にQuickTags入れてみました」
http://caetla.oops.jp/blog2/archives/2005/06/04_1810.php
を参考にフォントカラーを指定するタグの挿入ボタンを配置。
これで完璧。

と思ってみるが、
T君の「“済”は赤い字にならないのですか?」を深読みすると「自動的に赤い文字になる」ということかも。
それと「目立つように大きい文字にする」とかも、きっとセットなんだろう。

★ステップ3

ごちゃごちゃやるのも面倒になってきたので、“済”を画像ファイルでやることにした。
32×32ピクセルで真っ赤な■を作り、その中に白文字の“済”。
これなら結構目立つだろう。

さてこれをコメント欄に埋め込む方法だが、以下のスクリプトで対応。

<head>~<head>の間に

<script type="text/javascript" language="javascript">
<!–
function SetChar(strNum)
{
var strMsg;
strMsg = "<img src=\"<$MTBlogURL$>" + strNum + ".gif\" />";
document.comments_form.text.value+=strMsg;
}
//–>
</script>

テキスト入力欄の上に

<img width=16 height=16 src="<$MTBlogURL$>sumi.gif" onclick="SetChar(‘sumi’)" border="0" />

設定→基本→許可するHTMLタグ→カスタム設定
に img src を追加。

これにて任務完了。

今度こそ使ってよ。T君!!




関連エントリー