コメント欄全体に画像枠を付ける方法

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

こんにちは。

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

先日は、コメント一件一件に画像枠を付ける方法をご紹介しましたが、今回はさらにその外側のコメント欄全体を囲むように画像枠を付けてみたいと思います。

それでは早速やり方です。

まずは、枠に使う画像を用意する必要があります。

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

コメント全体 ヘッダ部用

コメント全体 ボディ部(リスト部)用

コメント全体 フッタ部(投稿ボタン部)用

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

画像が用意できたら、次はCSSの編集です。

ユーザーCSSの末尾に以下のような設定を追加します。

/* コメント全体 内側余白を調整 */
.commentArea{
  padding:12px 0 12px 0; /* ↑→↓←の順 */
}
/* コメント全体 ヘッダ部 */
.commentTitleArea{
  margin: 0;
  padding: 10px 14px 6px 14px; /* ヘッダ部の余白 ↑→↓←の順 */
  background-image:url(ヘッダ部の画像URL);
  background-repeat:no-repeat;
  background-position:left top;
}
/* コメントリスト部 */
.commentList{
  padding-left: 14px; /* コメントリスト部 左余白 */
  padding-right: 14px; /* コメントリスト部 右余白 */
  background-image: url(ボディ部の画像URL);
  background-repeat:repeat-y;
  background-position: left top;
}
.commentList li{
  margin: 3px 14px 0px 14px;
}
.commentList li:first-child{
  margin-top: 0;
}
/* コメント投稿ボタン部 */
.commentBtnArea{
  padding: 14px 0px 14px 0px; /* 投稿ボタン部の余白 ↑→↓←の順 */
  background-image: url(フッタ部の画像URL);
  background-repeat:no-repeat;
  background-position: left bottom;
}

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

また、画像に合わせて各部の余白を適切に設定する必要があります。

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

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

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

もちろん、コメント欄(個々のコメント)に画像枠を付ける方法と共存できる設定になっています。

/* コメント全体 内側余白を調整 */
.commentArea{
  padding:12px 0 12px 0; /* ↑→↓←の順 */
}
/* コメント全体 ヘッダ部 */
.commentTitleArea{
  margin: 0;
  padding: 10px 14px 6px 14px; /* ヘッダ部の余白 ↑→↓←の順 */
  background-image:url(https://stat.ameba.jp/user_images/20120313/22/sozai-land/99/b7/p/o0470004011849844935.png);
  background-repeat:no-repeat;
  background-position:left top;
}
/* コメントリスト部 */
.commentList{
  padding-left: 14px; /* コメントリスト部 左余白 */
  padding-right: 14px; /* コメントリスト部 右余白 */
  background-image: url(https://stat.ameba.jp/user_images/20120313/22/sozai-land/75/26/p/o0470001011849844934.png);
  background-repeat:repeat-y;
  background-position: left top;
}
.commentList li{
  margin: 3px 14px 0px 14px;
}
.commentList li:first-child{
  margin-top: 0;
}
/* コメント投稿ボタン部 */
.commentBtnArea{
  padding: 14px 0px 14px 0px; /* 投稿ボタン部の余白 ↑→↓←の順 */
  background-image: url(https://stat.ameba.jp/user_images/20120313/22/sozai-land/df/09/p/o0470010011849844933.png);
  background-repeat:no-repeat;
  background-position: left bottom;
}

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

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

関連記事

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

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