コメント欄の背景を変える方法【アメーバブログカスタマイズ方法】

さて、今回はコメント欄のカスタマイズに関してお話していきます。

アメブロのコメントって使いづらいし見にくいですよね。

←クリックすると大きくなります。

シンプルすぎです。

←クリックすると大きくなります。

なので、このコメント欄を見やすくカスタマイズしてみました。

カスタマイズ次第では吹き出しみたいにすることもできますので挑戦してみましょう。

まず必要になるのが「画像」です。

上の画像、中間の画像、下の画像です。

今回は私が作成した画像を差し上げますのでダウンロードしてください。

あ、この画像はブログの横幅628px以上でなければ使えません。

※ダウンロードは右クリックして”対象ファイルに保存”をクリックしてください。

＞＞コメント欄[上]の画像のダウンロードはコチラ
＞＞コメント欄[中間]の画像のダウンロードはコチラ
＞＞コメント欄[下]の画像のダウンロードはコチラ

そしたら画像をアップロードしていただいてそのURLを下記のタグに挿入してください。

/*コメント背景カスタマイズ　ここから*/ #comment_module .each_comment{/*コメント背景画像上*/ margin: 0; padding:0 0 10px 0; background: url(画像１（上の画像）) ; background-repeat : no-repeat; background-position:top; color:#FFFFFF;} #comment_module .comment_body{/*コメント背景画像中*/ margin: 0; padding:0 15px;/*コメント分の左右の余裕*/ background: url(画像２（中間の画像）) ; background-repeat : repeat-y; color:#333333;} #comment_module .comment_footer{/*コメント背景画像下*/ margin:0; padding-top: 28px;/*画像の高さが目安*/ background: url(画像３（下の画像）) ; background-repeat : no-repeat; } #comment_module .label{/*コメントタイトル*/ font-weight: bold; font-size:12px; padding:10px 0 10px 10px;/*タイトルの位置*/ } .comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/ padding-left:30px; } .comment_footer span.comment_date{/*名前と日付の間隔*/ padding-left:20px; } #comment_module .comment_footer{/*点線消す*/ border-top:none; } /*コメント背景カスタマイズ　ここまで*/

そしたらCSS編集の一番下に貼り付けてください。

そうすればコメント欄が私のブログと同じように変わるはずです。