コメントとトラックバック欄のカスタマイズ

声優blog banner普及委員会 のエントリーのおかげで、
ものすごい数のコメントとトラバをいただいたのですが、
デフォルトのままだとすごい見にくい事に気づいたり。

そんなわけで、一つ一つのコメントを枠で囲んで、
なおかつフォントサイズを小さくしてみました。
それだけでずいぶんと見やすくなった(*'-')

カスタマイズしたのはスタイルシート と 個別エントリーアーカイブ。
苦労したのが <$MTCommentBody$> に含まれる <P>タグ の無効化。
コメントの下に1行空くのはいいんだけど、上に1行空くのが嫌で。
それは入れ子にした指定を行うことで解決しました。

まずはスタイルシートに下記のソースを追加します。
それぞれの役目は下の方で簡単に説明してます。

.solo-frame {        color: #666666;        font-size: 8pt;        border: 1px double #888888;        padding: 5px 10px 5px;        }

.comment p {
       color: #666666;
       font-size: 8pt;
       margin: 0px 0px 1em;
       }

.solo-posted { text-align: right; }

続いて、個別エントリーアーカイブのテンプレートの
<MTComments> と <MTPings> の中をカスタマイズ。

<MTComments> <div class="solo-frame"><div id="c<$MTCommentID$>"> <div class="comment"><$MTCommentBody$></div></div> <div class="solo-posted">投稿者 <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTCommentAuthorIdentity> : <$MTCommentDate$> </div></div><BR></MTComments>

<MTPings>
<div class="solo-frame"><div id="p<$MTPingID$>">
&raquo; <a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a>
from <$MTPingBlogName$><br /><$MTPingExcerpt$></div><BR>
<div class="solo-posted">トラックバック時刻 :  <$MTPingDate$>
</div></div><BR></MTPings>

<div class="solo-frame"></div> で一つ一つを枠で囲んでいます。
<BR>タグを入れてるのは枠同士がくっついてしまうため。

<div class="comment"></div> で <$MTCommentBody$> に含まれる
<P>タグ を無効化してます。marginで上下を 0 にしてます。
このままだと下の空行も 0 になってしまうので、下の部分のマージンを
1em にして1文字分の空行を作って対応しています。
0px 0px 1em は [上] [左右] [下] のマージンの指定。

<div class="solo-posted"></div> は文字の右寄せ。

これで保存して再構築すれば完成です。
一つ一つが枠で囲まれたのになってるハズ。

関連記事(同じタグの記事が新しい順に表示されます)
トラックバックURL
当サイトへのリンクがないトラックバックは、迷惑トラックバックと判断されます

コメントを投稿する





コメントはありません