几帳面なA型気質のための、こだわりコメントカスタマイズ

ブログを長く続けているとありがたいことに、コメントしてくださる方も増えてきます。
そこで気になってくるのがコメント周りの無機質のデザインなんですが……

この場所のカスタマイズ方法は千差万別、各自のブログデザインに合わせて行っていくのがベストなので、具体的な説明をするのは難しいものがあります。

なので今回は、当ブログで実際に行ったことを簡単に解説したいと思います。
その中で参考になる点がございましたら、ぜひお試しになってください。

まずはデフォルトのデザイン

もうダメです。この時点で気になっちゃう点が二か所あります。
イエローのボーダー箇所なんですが、二行になって表示されてる点がすごく気になる。

なんですっきり一行になってないかな～
他の方のブログでは、ちゃんと一行になってるのに。

カスタマイズ後のデザイン

横幅を調整してみたら、スッキリしました♪
ついでにボーダーを非表示にして背景色を足し、タイトルのフォント色もピンクに変えてみました。プレゼントのところは使用頻度が低いと思ったので、非表示に。

追加したCSSはこちら

#comment_show {
background-color: #fdfbf2; /*背景色*/
border: none; /*ボーダー非表示*/
padding: 15px; /*余白*/
width: 380px !important; /*横幅*/
}
#comment_show h4 {
color: #FF6699; /*フォント色*/
}
#comment_module #comment_present {
 display: none !important; /*非表示*/
}

最後にコメント欄全体のタイトルのフォントをイエローに変え、ポイントにお猿さんの背景画像を敷いて終わりです。出来上がりの感じは実際に「コメント」のところをクリックしてみてください。

#追記：
トラックバックの欄もカスタマイズしてみました。
ピンク部分のコメント記入欄を画像ボタンに変更しました。
投稿者と管理人の名前を色分けするように変更しました。
参考記事：「管理者のコメントを色分け表示する方法」