ブログのコメント表示を変更

質問

今、【てぃーだブログ】を使ってるのですが、
ブログのコメント表示が見にくいので
テンプレートをカスタマイズして、
HTMLで表示変更をしたいのです。

(1)コメント投稿者の名前が　右に表示されてるのを左に！

(2)コメントとコメントの間に線を引いて、
　コメントに仕切りをつけて見やすく。

としたいのですが、
色々なサイト見ながら変更方法を探しましたが、
分かりませんでした。

HTML初心者の為、
説明下手で分かりにくいかもしれませんが、
変更の仕方を宜しくお願いします。

回答No.1

abril

てぃーだブログを使用していないので、以下は下記のFAQを見て推測した事です。
これによると、スタイルシートを直接編集できる事になっています。
http://faq.ti-da.net/e412044.html

であれば、ブログのソースを見ると、コメントの部分は以下の様にマークアップされている様ですので、

<div class="comments-body">コメント本体</div>
<div class="comments-post">Posted by <a class="aposted" href="#">投稿者名</a> at yyyy年mm月dd日 hh:mm</div>

<div class="comments-post">～</div>のブロックが、質問者様がスタイルを変更したい箇所に相当します。で、ブログのスタイルシート"style.css"を見ると、その中に、".comments-post"というクラス・セレクタがあるので、ここのスタイルの指定を変更すれば良い事になります。
現在、この部分のスタイルの指定はこうなっています：

.comments-post{
margin-top: 0px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
padding-top: 3px;
font-size: 82%;
text-align: right;}

> コメント投稿者の名前が　右に表示されてるのを左に！

"text-align: right;"が右寄せにしている指定ですので、これを削除する、または"text-align: left;"とすれば、このブロック全体が左寄せになります。

> コメントとコメントの間に線を引いて

このブロックがコメントエリアの最後の部分になりますので、このブロックの下に線を引いてやればいいかと思います。スタイルに、以下の指定を追加します。以下は一例です。

.comments-post{
（省略）
border-bottom: solid 1px #000;←追加
}

上記の指定は、「プレーンな形状（solid）の1pxの太さ（1px）の黒い色（#000）の線（border）」をコメントエリアの「下（bottom）」に引くという意味します。なので、border-bottom:に対する3つのそれぞれの値を（ルールに則って）変更する事で、線の形状・太さ・色はお好みにできます。

また、線とコメントの間の余白を調整したければ、paddingやmarginを調整する事でこれも任意の値にできます。