コメント欄を見やすくしてみよう

ども、みけねこです。

コメント欄にプロフィール画像を表示できるようになって、コメントした人がだれかわかりやすくなったとお喜びの皆さん、
喜ぶのはまだ早いですよ。
ほんとにコメント欄、わかりやすくなってますか？


もっとコメント欄をわかりやすくする方法があるんです。


こちらをご覧下さい。






↑　こっちより　↓　こっちの方が見やすいでしょ。







プロフィール画像を表示させていなくても、コメント毎に枠で囲れば、それだけでコメント欄が見やすくなりますよ。



CSSを編集してこちらを挿入するとコメントを枠で囲めます。


#comment_module .each_comment {
margin: 10px; /* コメントの枠の外の余白 */
padding: 15px; /* コメントの枠の中の余白（枠からコメントまでの幅） */
border: 3px solid #54FF9F;　/* 枠の太さと種類と色 */
background: #F0FFFF; /* 背景の色 */
}

赤い文字を自分の好みで変更して下さい。



色の指定方法はカラーチャートを見れば分かります。

例えばこちら　→　http://color_chart.nazca.co.jp/



すでに、CSSに　#comment_module .each_comment {　～　｝がある場合は追記するなり、上書きするなりして下さい。


サンプル

#comment_module .each_comment {
margin: 10px;
padding: 15px;
border: 3px solid #54FF9F;
background: #F0FFFF;
}

　　　　 ,／””￣￣”ヽ
　　　,/　　 ＿＿ ＿　゛
　　 /　　 /““　 “”　ヽ |
　　 |　　 / -━　　━.| |
　　 |　　 |.　 “”　ｌ　“ .|.|
　　 （ヽ　| 　　ｒ ・・ｉ. 　||
　　　りﾘﾘ　　/=三t.　｜
　　　｜ﾘﾉ.　　　　　　｜
　　　 |　　 、　 ｰ- " ﾉ
　　　｜　　　”ｰ-- "｜

#comment_module .each_comment {
margin: 10px;
padding: 50px;
border: 3px double #FF0000;
background: #FFFF00;
}

　 　　　/　　　　 ＼ 　 ＼
　　　　/　――　＼　　　　 /
　 ＿ノ　　　　　 ＼　　＿ノ
　　　　　 ＿＿＿＿
　　　 ／@　@　@　@ヽ
　 　 /@／￣￣￣｀ヽ@ヽ
　　 / /　　　　　　 　 |　 |
　　 | /　 ⌒　 ⌒　　 | @|　/ヽ
　　 ||　（●） （●） 　 |　| / 　 ヽ
　　 /　　　　　　　　　|@| ヽ/〉　ﾉヽ
　 /　　　　　　　　　　|　|　//ヽﾉ /
　{　　　　　　　　　　 / /|//　　 `
　 ヽ、　　　　　　　ノ / //
　　ヽ｀`ー――‐''"ノx//x|
　　　 ￣／○＼￣x //x| |
　　　| 〈__/ｙ/ヽ__〉x//ヽ,|x|
　　 .|x　x // x　x(⌒　 /x |
　　 .|=＝＝＝＝//'ー'＝=|
　　　!、＃＃＃〈/＃＃＃/
　　　 ヽ､＃＃＃＃＃＃/、
　　　　　ヽ、＃､＃＃／ヽ.ヽ、
　　　　　　_|＃_|_＃_|　　　ヽ.ヽ、
　　　　　（Y^ヽ（Ｙ^ヽ|　　 　 ヽ､ニ三

#comment_module .each_comment {
margin: 10px;
padding: 15px;
border: 10px inset #696969;
background: #DCDCDC;
}
　　　　　　　　　　　　　　∧＿∧
　 　　　　　　　　　　　　（ ｀･ω･)＜ちょ待てｗ　そこは俺の家だｗ　ちょ待てよ！ｗ
　　　　　　　　　　　　 ∩（ っ¶っ¶∩
　　　　　　　　　　　　 | ノ ￣￣￣　ヽ
　　　　　　　　　　　　/　　●:::::::::::● |　　ンゴォォォォォーｗ
　　　　　　　　　　　 |　　:::::::( _●_):::: ミ
　　　　　　　　　　　彡､::::::::: ＼＼＼:::::､｀＼
　　　　（　. .:.::;;;._,,'/　＿＿::ヽノ＼＼＼:::/´>　 )
　　　　　）.:.:;;.;;;.:.）(＿＿＿）::::::::::/＼＼＼　(_／ 　ｽﾞｼｰﾝｗ
　　　　ノ. ..:;;.;.ノ　　|　::::::::::::::::::::/　　＼＼＼
　　　（　,.‐''~ ﾜｰ 　|　::::／＼:::::＼ .　　.＼＼＼丿ヽﾉヾ/丶
（..::;ノ　)ﾉ__. 　＿ 　| ::/ 　＿ )::::: _）ｺﾞｰ..ヽ＼＼_ﾉヽﾉヽﾉヽ ）
　）ﾉ__ '|ﾛﾛ|／　 ＼∪.___.|ﾛﾛ|／　 ＼/ヽ　ヽ＼　　　　　）ﾉ
＿|田|_|ﾛﾛ|_|　ﾛﾛ|＿|田|.|ﾛﾛ|_|　ﾛﾛ|＿　　（.:;;.;;丶　 　丿ｿ

#comment_module .each_comment {
margin: 10px;
padding: 15px;
border: 8px ridge #32CD32;
background: #98FB98;
}
　　　,ｒ' ⌒ ヽ、　 _＿_　　,ｒ' ⌒ヽ、
　　 /　/⌒ 、γ´　　　ﾞＹ　, ⌒ヽ ヽ
　　.|　{　~　｝:ー　　ー .｛　~　}　|
　　.ヽ　ヽヽ　（● ） （● ）　/ ノ　ﾉ　・・・
　　　 ヽ　i 6 i　（_人__）　（　d i　/
　　　　ﾉ　,ー.i　 `⌒´　　,ー,.　（
　　　.（　　　　{　　　　　 i　　　　）
　　　　ヽ、＿ノヽ_　　__入_＿_.ノ
　　　　　　　／／　　／ /ヽ
　　　　　　 L二つ二二ノ　 ヽ
　　　　　　 /　/　 人　 ＼　 }
　　.　 　 ∠'∠_／ ヽヽ､＿.ノ

#comment_module .each_comment {
margin: 10px;
padding: 15px;
border: 12px groove #191970;
background: #6495ED;
}
　 　　 　┐　　　　　　　 　　　　 ┐
　　じ コ　　　 ＿　　　　　笑　ち
　　ゃ l　　 ／　　 ヽ.　　　わ　ょ
　 ね ヒ　 l　@　 @　l　　 せ　w
　 え l　　l　 　U　　 l　　 ん　w
　 か吹　 ヽ,　ー　 ﾉ.　　 な　朝
　　w い　　/ i　　　 ヽ、　 w　か
　 w た　/ /l　　　　l　! └　　ら
└　＿__|　i_l＿＿＿l　l＿＿
　／　　 し'幵幵幵幵ソ |
'　　　　└─────┘ｶﾀｶﾀｶﾀ…

#comment_module .each_comment {
margin: 50px;
padding: 15px;
border: 20px outset #BC8F8F;
background: #EEE8AA;
}

　 |┃　　　ガラッ　　　 ＿＿＿_
　 |┃　三 　 　 　 　 ／　　　 　 ＼
　 |┃　 　 　 　 　 ／　─　 　 ─　＼
　 |┃　　　　 　 ／ 　 （●） 　（●）　 ＼
　 |┃　三　　　 |　 　 　 （__人__）　　 　 |
　 |┃ 　 　 　 　 ＼＿＿ ｀ ⌒´ ＿＿／
　 |┃　　　 　 　 ／　| |_　　　　　_| | ｀ヽ
　 |┃　三　　 ／　　 |　 ＼ 　 ／　 |　　 ＼
,⊆ﾆ´⌒￣￣"　　y ┤　 __|_/　　 ├-r､　 ヽ
⊂二、 ,ノ──-‐'´|　 ￣　∧￣￣ 　 | l"　 |
　 |┠ '　　　　　　　|　 　 　 　 　 　 　 l/'⌒ヾ
　 |┃三　　　 　 　 |　 　 　 　 　 　 　 |ヾ___ｿ

サンプルは色の選択とか数値とかテケトーなんで、ご自分でいろいろお試し下さいね。
ＡＡはコピペしないようにｗ



みけねこでした。