SpringStar★

ドラマ感想日記~拘りを持たず程よく頑張る

コメント欄修正してみる。

コメント欄が狭いかんじがしていたので、変えてみました。
デザインのcssのところにコレを入れてます。

/*コメント欄の修正*/
/*コメント欄全体の枠組み*/
div.comment{
border:1px solid #E5F1F0;
padding:0px 12px;
}
/*それぞれのコメント*/
div.commentshort p{
margin:10px 0;
border-top:1px dashed #F57765;
padding:12px 20px;
}

(padding-->内側の余白:上下 右左;)(margin--->外側の余白:上下 右左;)

ソースをみると、コメント全体は<div class="comment"></div>というように、commentのクラス名で囲まれ、
そして、
それぞれのコメント欄は、<div class="commentshort">~</div>の中にはいっていて、
commentshortというクラス名で囲まれてます。

コメントの文章は、
<p>~</p>の中に入り、
<br>で改行せれているということですね。

div.commentshort p{は、commentshortの中のそれぞれのコメントを指定してます。
つまいpタグでそれぞれのコメントがかこまれていて、こんなかんじです。
<div class="commentshort">
<p>AM 10:00 ***
○○○○○○○<br>
○○○○○○○<br>
</p>

<p>AM 11:00 ***(返信)
○○○○○○○<br>
○○○○○○○<br>
</p>
</div>


それぞれのクラス名がわかれば上のようなかんじで枠の色を指定したり、コメントとコメントの間に線を指定することができました。

テンプレートによって適した色にしなければならないので、ソースのstylesheetのところから探しだして統一感が出せたようです。

コメント全体の外枠はいらないかもしれませんが、枠を作る場合以下のようにしました。

このテンプレートの場合は、広告の枠の部分が、
hatena-asin-detail
というクラス名だったのでstylesheetから検索して色を探すことができましたが、
ソースを見ると上の方にlink rel="stylesheet"という部分が3つあり、一番最後のところで見つけることができるようです。

それぞれのコメントとコメントの間に線を入れると見栄えがいいと思いますが、その色も同じ3番目のところのすぐ上でリンクの指定色のところ、
a{
color:#F57765;
}

で探せました。
どうも、主要な設定は3番目のスタイルシートらしいですね。
お粗末な説明でわかりにくいと思いますが、ソースが出せれば簡単だと思います。プラウザにもよりますが、firefoxの場合は右クリックで即だせますね。

TOP