どうも！LSSです！！
CSS、いじくりだすと楽しいですねｗ
前回、前々回と「コメントボタン」をカスタマイズしていましたが、今回は
「コメント欄にいただいた、ひとつひとつのコメント」
をCSS装飾してみました！
サンプル
↑こんな感じにコメントが表示されるようにしてみました。
なお、引用させていただいたのはギャクバリ(id:minimalist_gyakubari)さんから、昨日の記事にいただいたコメントです。
このコメントを読んでLSSが思ったのは
「コメント欄全体を枠で囲むようなデザインにすれば、コメントボタンがはてなブログ標準のコメント用のボタンである事が分かりやすくなるかな？」
でしたが、やってるうちになんか違う方向に行ってしまい、今回のような内容となりましたｗｗｗ
コード
.comment li{
border-radius:12px;
border:5px ridge #BFFFAF!important;
background-image:radial-gradient(circle 300px at 35% 35%,#ffffff,#E0F0C0)!important;
margin:1em;
padding:0.5em!important;
box-shadow:3px 3px 3px 3px green;
}
↑この内容を、デザインCSSにコピペすると、コメントがサンプルのように装飾されます^^
解説
.comment li{
はてなブログの記事のソースを見ると、コメント欄周りのコードは
<div class="comment-box">
<a class="leave-comment-title js-leave-comment-title">コメントを書く</a>
<ul class="comment">
<li class="read-more-comments" style="display: none;"><a>もっと読む</a></li>
</ul>
</div>
のようになっています。
<ul>タグに"comment"というクラスが指定されており、</ul>までの間に<li>タグが入っています。
恐らく、はてなブログのシステムは、この<ul>タグの中に、JavaScriptで<li>で囲んだコメントを書き出して並べてるものと思われます。
ですので、個々のコメントに対する指定として
.comment li
（訳：「commentクラスの中のliタグ）
というセレクタを指定しています。
border-radius:12px;
12ピクセルの角丸
border:5px ridge #BFFFAF!important;
枠線で囲み、枠線は5pxの太さ、ridge（飛び出して見える表現）、色は#BFFAF。
テーマの指定とバッティングしているようなので!importantをつけて優先度を上げました。
background-image:radial-gradient(circle 300px at 35% 35%,#ffffff,#E0F0C0)!important;
背景にまた「円形グラデーション」を使用しています（好きだなーｗ）
↑昨日も張りましたが、これですね。
「半径300pxの円形に広がるグラデーション、
中心は左上角から見て右に35%、下に35%の位置、
色は中心から外側に向かって#ffffffから#E0F0C0に変化していく」
という指定になっています。
margin:1em;
コメント欄の外側に1文字分の余白を取っています。
こうしないと、枠の下端が次のコメントの枠の上端とくっついてしまいます。
padding:0.5em!important;
コメント欄の内側に0.5文字分の余白を取っています。
こうしないと枠ギリギリまで文字が詰まってしまい、見づらかったです^^;
box-shadow:3px 3px 3px 3px green;
最後に、コメントの枠そのものの影を
「右に3px、下に3px、ぼかし3px、広がり3px、色はgreen」
で表示しています。
コメント欄全体を囲もうとしてたのに
結局、個々のコメントに対する指定に変わってしまいました。
というのも、最初はコメント欄全体に対して囲み指定しようと試みたんですが、
例えば
.comment-box{
border:5px solid;
}
のように.comment-boxに対して指定すれば、コメント欄全体への囲み指定はできます。
が、ちょっと気にいらない部分があって、それだと「幅をめいっぱい使ってしまう」んですね^^;
↑つまりこんな風になってしまいます。
margin（外側の余白）を少し入れると、突然極端に狭くなったりと原因不明の挙動に陥ったので、いったん投げ出しましたｗｗｗ
が、今回の内容もこれはこれで面白い！と記事にしています^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
