0) {echo('');} echo(""); ?>

個別記事ページのテンプレデザイン再改造を本日行いました。再構築はまだ2~3日後になると思いますので、現時点で結果が反映されているのはここ2~3日分のページです。(ちなみに、カレンダーが表示されているページが反映されているページです)
以下に具体的な改造、設定部分を残しておきますので、参考にしたい方はどうぞ。

読む前に念頭に入れておく事

以下に書く文章は、Another HTML-lintさんで自分のサイトをチェックし、「HTMLを正しく書いて高得点を狙おう。」と云うもので、更にLivedoorブログのDOCTYPE宣言を無理矢理「HTML4.01 Transitional」に変更させてあるのが前提でのお話です。恐らく殆どのブログのテンプレートがXHTML1.0で書かれていると思われますので、各人が以下に書いてある事を自分用に勉強し直して使用して下さい。

個別記事ページの特性

個別記事ページがTOPページやカテゴリページと違うのは、トラックバック情報やコメント情報がある事です。テンプレートが最初から正しい構文で作られていたら、何の問題も無いのですが。。。。。

チェックするとやっぱりマイナス100点位行っちゃいます。思いっ切り間違っているようです(´Д`;)
HTML4.01でチェックしても、XHTML1.0でチェックしても、これでもかと「~~~は出来ません」コメントの嵐です。

と言うわけで、トラックバック情報部分と、コメント情報部分を思いっ切り書き直しました

テンプレートのトラックバック情報の部分を改造

とにかくエラーの嵐だったが、エラーの原因の殆どが<input>タグは<body>内や<table>内に直接書くのはダメ!と云う事でしたので、意外とアッサリ片付きました。以下、改造結果を<IfArticleAllowPing>内の部分のみ書きます。

<IfArticleAllowPing>
<div class="trackbackurlbody">
<div class="trackbackurlttl">トラックバックURL</div>
<div class="trackbackurl">
<table cellspacing="5" border="0">
<tr>
<td width="99%"><p><input type="text" value="<$ArticleTrackBackUrl$>" class="trackbackbox"></p></td>
<td width="1%" align="right"><p><input type="button" value="クイック" onClick="quickTrackBack('<$ArticlePermalink$>'); return false;"></p></td>
</tr>
</table>
</div>
</div>
</IfArticleAllowPing>

上記の様に<input>タグの前後を<p></p>タグで囲ってあげ、HTML4.01的には</input>タグを外してあげますと、構文的に正しくなるようです。

テンプレートのコメント情報の部分の改造

これが<table>タグ使いまくった、とんでもなく酷い構成になっていましたので、レイアウトはイチから作りなおし。
注:一部に色がついていますが、頭から書き換わっています

<!-- 改造投稿フォーム -->
<div id="formbody">
<form action="<$ArticleCommentUrl$>#errors" method="POST" name="comment_form" onSubmit="javacript:setCommentAuthor(this); return submitOnce(this.button);">
<div style="OVERFLOW: none; WIDTH: 350px; align: center; text-align: right" >
名前: <input id="author" name="author"><br>
メール: <input id="email" name="email"><br>
URL: <input id="url" name="url"><br>
情報を記憶: <input id="bake" type="checkbox" name="cookie" style="padding:0;margin:0px;" value=""><br >

評価: <select id="rank" name="rating">
<option value="" selected
       >--</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>
<input type="radio" id="radio" value="face" name="rating_icon">
顔&nbsp;&nbsp;&nbsp;
<input type="radio" id="radio2" value="star" name="rating_icon" checked>
星&nbsp;&nbsp;

<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" border="0" alt="絵文字選択"></a>
</div>
<div style="OVERFLOW: none; WIDTH: 450px; height: 245px; align: center; text-align: center" >
 <textarea id="text" name="body" rows="10" cols="50"></textarea>
<div id="emoji" style="position:absolute; background-color:#FFFFFF; left: 30px; border:1 solid #000000; margin:0 0 0 0; padding:0 0 0 0; display:none;"></div>
<input type="submit" value=" 投稿する " class="button" name="button">
</div>
</form>
</div>
<!-- 改造投稿フォーム -->

以上です。これで殆ど減点されません。(まだ改造するかもしれませんが)
全体的に<TABLE>タグで囲っていたものを<DIV>タグに変更しただけですが、<form>や<input>は<table>タグと相性が悪いようなので気をつけましょう。

ちなみに上記、オレンジで記した場所はコメントの★★★★★とか評価を付ける部分なのですが、
この「評価」で吐き出す画像のタグだけがXHTML準拠なのです。
コメント内の他の部分、絵文字画像や改行タグはHTML準拠なのにですよ!

コメント内の絵文字画像のタグにalt属性が付かない(減点対象)とかありますが、まぁその程度は気にしないでおいて、「評価」部分の吐き出すタグが許せないので削除する事にしました。

最後に

最後にはcgiの書き方まで調べて、アッチもコッチもと、リンク先のcgiっぽい部分や人気ランキングのスクリプトも正しい文法に直して、デフォで90点台の評価が貰える所までこぎつけました。

ドンドン深みにハマる作業をやっていますが、意味があるのか無いのか、全く解りません(笑)

2007.10.30追記
コメント部分のソース修正終了しました