◆コメント欄のカスタマイズ

こんにちは、カスタマイズと復興支援で頑張るたっくんです。


コメント欄に、プロフィール画像を表示させている方も、


いらっしゃるかと思いますが、


この場合、アメブロ以外からのコメントが来た場合は、


画像は表示されません。


何かいい方法はないものか・・・と思っていたら・・・


わざめーばさん、ありがとうございます。


http://ameblo.jp/wazameba/entry-11129655981.html

（リンクしています↑）

コメント投稿者のブログやサイトのサムネイル画像(縮小画像)を表示する方法｜アメブロカスタマイズで人が集まるブログ作り


コメント投稿者のブログやサイトのサムネイル画像を表示しますので、


アメブロ以外でもちゃんと表示されます。


プロフィール画像よりも、ずっとインパクトあると思いますよ。


ちなみに、こちらのカスタマイズは、


CSS編集のほかに、フリープラグインの編集が必要になります。


詳細はこちらでは紹介しませんが、


ぜひわざめーばさんのところに行って、


チャレンジしてみてください。


それで・・・


せっかくですので、


枠線とか色の変更とかもやっちゃいました。


CSS編集


以下のCSSを追加してみてください。


/*コメント欄*/
.commentArea{
padding:0;
border:none;
}
.commentArea .skinBorderHr{
border:none;
}
.skinBorderList li {
margin-bottom:10px;/*コメントの間隔*/
border:none;
}
.blogComment{/*ゲストさまのコメント*/
border:3px solid #f09199;/*枠　太さ 線種 線色*/
background-color:#fef4f4;/*枠内の背景色*/
color:#333333;/*文字色*/
}
.ownerComment{/*管理人のコメント*/
border:3px solid #3eb370;/*枠　太さ 線種 線色*/
background-color:#e0ebaf;/*枠内の背景色*/
color:#333333;/*文字色*/
}



サムネイル画像表示とあわせると、


こんな感じになります。



カスタマイズと復興支援で頑張るたっくんのブログ


管理人側の画像ですが、


私の場合、そのままサムネイル画像を使用しましたが、


もちろんオリジナルの画像を使用することもできます。


なお、コメント欄の枠線等のカスタマイズに関しては、


実験委員さんの、こちらの記事を参考にしました。


http://ameblo.jp/newcss/entry-11052529817.html

（リンクしています↑）

コメント欄（枠線を使って）｜新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


ありがとうございます。


あなたも、ぜひ参考にしてみてください。