画像1
ひさしぶりのブログ改造講座。
今回はコメントフォームのちょっとした改造。けどやることはちょっとしたことでもないと感じる人も多いかも。
上の画像のように、「コメントする」などの文字を自分のすきな文章に変えるという改造です。「コメントするするする?」と変わってますでしょ。
実際のうちのコメのとこは、コメントが確認してから反映ということの説明を。
デフォルトだと大体のとこが「コメントする」になってるはずなんでこれがちょっとかたい表現で変えたいって人も多いかもです。
数年前はものすごい簡単に変更できた部分なんですが、デザインの内部バージョンアップで簡単にはできなくなったんですよ。
いつものことですが、失敗してもいいようにHTMLいじる前にデザインは保存してくださいね。

イメージ1133

デザインのカスタマイズで個別記事のページのHTMLのところへ。
ここの青いろになってるところが問題のところ。
昔はこのコメントフォームがずらずらとHTMLで書いてあったのですが、いまはこのように一行になってライブドアのほうから引き出されるように。
これによって長いHTMLが短くなって見やすくなったのですが逆にコメントフォームの簡単な改造ができなくなったってわけです。
でここを消して昔のというかコメントフォームのHTMLに書き換えてしまうという作業に。
コメントフォームのHTMLはライブドアブログのカスタマイズwikiのほうの
CommentFormのHTMLタグセットというところに。
ここにあるHTMLを上の画像の青色で反転してるところを消して入れ替えれば一応は完成というか下地は完成です。

<IfArticleAllowComment>
<!-- CommentForm -->
<div class="article-option" id="comment-form">
<h3>コメントする</h3>
<IfCommentNeedAuth>
<script type="text/javascript"><!--
if (typeof(authorized_name) == "undefined") {
document.writeln('<scr'+'ipt type="text/javascript" src="<$BlogAuthJsUrl$>"></scr'+'ipt>');
}
//-->
</script>
<script type="text/javascript"><!--
document.writeln('<div class="comment-auth-announcement">');
if(authorized_name) {
document.write('<p class="authorized"><span class=\"authorized-name\">' + authorized_name + 'さん</span><a href=\"" _ article.logout_url _ "\">ログアウト</a></p></div>');
}
else {
document.write('<p>このBlogにコメントするには<a href=\"" _ article.login_url _ "\">ログイン</a>が必要です。</p></div><style type="text/css"><!-- #comment-form-body { display: none; } --></style>');
}
//-->
</script>
</IfCommentNeedAuth>
<div id="comment-form-body">
<form action="<$ArticleCommentUrl$>#errors" method="post" name="comment_form" onSubmit="javacript:setCommentAuthor(this); return submitOnce(this.button);">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr class="input-auther">
<th>名前</th>
<td><IfCommentNeedAuth>
<script type="text/javascript"><!--
if(authorized_name)
document.write(authorized_name);
else
document.write('<input id="author" name="author" />');
//-->
</script><Else><input id="author" name="author" /></IfCommentNeedAuth>
</td>
</tr>
<tr class="input-email">
<th>メール</th>
<td><input id="email" name="email" /></td>
</tr>
<tr class="input-url">
<th>URL</th>
<td><input id="url" name="url" /></td>
</tr>
<tr class="input-etc">
<th> </th>
<td>
<label class="input-memorize" for="bake">情報を記憶<input id="bake" type="checkbox" name="cookie" /></label>
<label class="input-rating">
評価<select id="rank" name="rating">
<option value="">--</option>
<option value="1">1(最低)</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5(最高)</option>
</select>
</label>
<label class="input-rating-face" for="radio-rating-face"><input type="radio" id="radio-rating-face" value="face" name="rating_icon" />顔</label>
<label class="input-rating-star" for="radio-rating-star"><input type="radio" id="radio-rating-star" value="star" name="rating_icon" />星</label>
</td>
</tr>
<tr class="input-facemark">
<th> </th>
<td><a href="javascript:void(0);" id="emojiLink1" onClick="showEmojiPanel(this.id, 'text')"><img src="http://parts.blog.livedoor.jp/img/usr/cmn/tool.gif" id="tool" width="18" height="18" alt="絵文字" title="" /></a></td>
</tr>
<tr class="input-comment-body">
<th nowrap> </th>
<td>
<div class="textarea-outer">
<textarea id="text" name="body"></textarea>
<div id="emoji" style="display: none;"></div>
</div>
</td>
</tr>
<tr class="submit">
<th> </th>
<td><input type="submit" value=" 投稿する " class="button" name="button" /></td>
</tr>
</form>
</tbody>
</table>
</div>
</div><!-- CommentForm End -->
<script type="text/javascript" language="javascript"><!--
loadCommentAuthor(document.comment_form);
//-->
</script>
</IfArticleAllowComment>


カスタマイズwikiのほうHTML使えばいいのですがこちらにも。
スクロールバーの中のものをコピペでいけるはずです。テストしたので大丈夫のはず。

でwikiのほうのHTMLをつかう場合に一部問題が。

イメージ1136

絵文字のアイコンのところがURLじゃなくアイコンになってるのよwikiだと。そのURLが書いてないのでそのままコピペして載せちゃうとアイコンがない状態のコメントフォームに。
で上の画像のところにURLを追加するということ。ってちょっと場所わかりづらいかしら。

<td><a href="javascript:void(0);" id="emojiLink1" onClick="showEmojiPanel(this.id, 'text')"><img src="http://parts.blog.livedoor.jp/img/usr/cmn/tool.gif" id="tool" width="18" height="18" alt="絵文字" title="" /></a></td>

こういう「絵文字」って書いてあるところがあるんでそこに赤いURLを追加してください。ちなみにこの記事に書いてあるスクロールバーに囲ってあるHTMLはこのアイコンURL追加済みです。

イメージ1137

でこのHTMLの中の青反転してあるような日本語のところがあります。そこを好きに変えれば完成ってことです。
一番上の画像で説明すればこの「コメントする」を「コメントするするする?」にしたってことです。
俺の今(2009/11)のコメントフォームはここと、コメントの投稿ボタンの文字を変えてます。この二つ以外も変えることができるのでいろいろとやってみてください。HTMLがあれば大体のことはできますのでがんばってくださいな。

画像2

動作になんの問題も無いのですが、うちみたいにコメントが一回下書きになるようにしていてコメントすると別画面に飛んで「受け付けました」というページが出るのですが、上の画像のようにそれが旧管理画面バージョンのほうになってしまうという。
wikiに書いてあるHTMLが古いってことなんですよな。新バージョンのほうもちょこっといろいろやればできそうなんですが今回は見送り。
動作しなくなったら手加える予定です。コメントが下書きにならないとなにも問題は無いです。

ちょいとわかりづらかったかも。毎度かいてますがHTMLいじる場合は保存の徹底と無理なときは無理しないでね。
コメント一覧やトラバ一覧も同じようにやれば改造できるのですがそれはまた今度やれればやります。

2009/11での仕様