コメント欄(個々のコメント)に画像枠を付ける方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、CSS編集用デザインを適用したアメブロの、コメント欄に画像枠を付けるカスタマイズ方法をご紹介します。

(旧デザイン向けのカスタマイズ方法はこちらへ移動しました)

コメント一件一件に、画像枠を付けることで見やすく見栄えがするコメント欄へとカスタマイズしてみましょう。

また、管理人が返信したコメントには、ひと目でわかるように別の画像枠を付けることにしましょう。

では、やり方です。

まずは、枠に使う画像を用意しましょう。

今回は、サンプルとして以下のような画像を使ってみました。

コメント ヘッダ部用

コメント ボディ部用

コメント フッタ部用

管理人コメント ヘッダ部用

管理人コメント ボディ部用

管理人コメント フッタ部用

これらの画像を、ヘッダ部用一つと、ボディ部用を複数枚、そしてフッタ部用一つを縦に並べることでに見えるようにします。

画像が用意できたら、CSSの編集で、以下のようなコードをユーザーCSSの末尾に追加してください。


/* コメント全体の外枠を消す */
.commentArea{
  border:none;
}
/* コメント一覧上部の点線を消す */
.commentTitleArea{
  border:none;
}
/* コメント間の点線を消す */
.commentList li{
  border:none;
}
/* 各コメント ヘッダ部*/
.commentHeader{
  padding:10px 14px 6px 14px; /* 文字周辺の余白 ↑→↓←の順 */
  background-image:url(ヘッダ部の画像URL);
  background-repeat:no-repeat;
  background-position:left top;
}
/* 各コメント ボディ部 */
.commentBody{
  padding:0 14px 6px 14px; /* 文字周辺の余白 ↑→↓←の順 */
  background-image:url(ボディ部の画像URL);
  background-repeat:repeat-y;
  background-position:left top;
}
/* 各コメント フッタ部 */
.commentFooter{
  padding:0 14px 0 14px; /* 文字周辺の余白 ↑→↓←の順 */
}
.blogComment{
  padding:0 0 10px 0;
  background-image:url(フッタ部の画像URL);
  background-repeat:no-repeat;
  background-position:left bottom;
}

/* 管理人コメント ヘッダ部 */
.ownerComment .commentHeader{
  background-image:url((管理人)ヘッダ部の画像URL);
}
/* 管理人コメント ボディ部 */
.ownerComment .commentBody{
  background-image:url((管理人)ボディ部の画像URL);
}
/* 管理人コメント フッタ部 */
.ownerComment{
  background-image:url((管理人)フッタ部の画像URL);
}

画像のURLは、それぞれ該当する画像のURLを設定してください。

また、画像によって文字周辺の余白を適切に設定する必要があります。

余白は、使用する画像によって最適値が異なってきますので、試行錯誤して、良い設定値を見つけてください。

なお、以下に、コピペで試せるCSSを書いておきますので、よかったら参考にしてみてください。

サイズは、CSS編集用デザイン3カラムを選択した場合の初期状態に合わせてあります。


/* コメント全体の外枠を消す */
.commentArea{
  border:none;
}
/* コメント一覧上部の点線を消す */
.commentTitleArea{
  border:none;
}
/* コメント間の点線を消す */
.commentList li{
  border:none;
}
/* 各コメント ヘッダ部*/
.commentHeader{
  padding:10px 14px 6px 14px; /* 文字周辺の余白 ↑→↓←の順 */
  background-image:url(https://stat.ameba.jp/user_images/20120309/16/sozai-land/5d/22/p/o0440005011841254623.png);
  background-repeat:no-repeat;
  background-position:left top;
}
/* 各コメント ボディ部 */
.commentBody{
  padding:0 14px 6px 14px; /* 文字周辺の余白 ↑→↓←の順 */
  background-image:url(https://stat.ameba.jp/user_images/20120309/16/sozai-land/e6/3a/p/o0440001011841254625.png);
  background-repeat:repeat-y;
  background-position:left top;
}
/* 各コメント フッタ部 */
.commentFooter{
  padding:0 14px 0 14px; /* 文字周辺の余白 ↑→↓←の順 */
}
.blogComment{
  padding:0 0 10px 0;
  background-image:url(https://stat.ameba.jp/user_images/20120309/16/sozai-land/ad/a4/p/o0440005011841254624.png);
  background-repeat:no-repeat;
  background-position:left bottom;
}

/* 管理人コメント ヘッダ部 */
.ownerComment .commentHeader{
  background-image:url(https://stat001.ameba.jp/user_images/20120309/16/sozai-land/6d/b7/p/o0440005011841255352.png);
}
/* 管理人コメント ボディ部 */
.ownerComment .commentBody{
  background-image:url(https://stat001.ameba.jp/user_images/20120309/16/sozai-land/48/60/p/o0440001011841255354.png);
}
/* 管理人コメント フッタ部 */
.ownerComment{
  background-image:url(https://stat001.ameba.jp/user_images/20120309/16/sozai-land/d9/eb/p/o0440005011841255353.png);
}

以上、CSS編集用デザインを適用したアメブロの、コメント欄に画像枠を付けるカスタマイズ方法をご紹介しました。

よろしければお試しください。

関連記事

コメント欄全体に画像枠を付ける方法
アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り

2012/03/09 2011/03/07の記事を新デザイン向け記事に書き直して再アップしました。