コメント欄をふきだし風にする方法

アメブロの新CSS編集用デザインで、コメント欄を「ふきだし風」にするカスタマイズ方法をご紹介します。

旧CSS編集用デザイン向けはこちら

アメブロの旧CSS編集用デザインで、コメント欄を「吹き出し風」にするカスタマイズ方法を解説します。ユーザー間の交流が多くSNS要素の強いアメブロで交流の場となるコメント欄を会話風にできます。

ユーザー間の交流が多くSNS要素の強いアメブロですので、その交流の場の一つとなるコメント欄を賑やかな雰囲気にできると思います。

コメント欄をふきだし風にする

このカスタマイズは、CSSの編集で行います。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

画像等も使いませんので、CSSの末尾にコードを追加するだけで簡単にできます。

以下にコード例をご紹介しますので、CSSの末尾に追加してみて下さい。

/************************************************
  新CSS：アメブロのコメントをふきだし風にする
************************************************/
[data-uranus-component="commentOwner"],
[data-uranus-component="commentOwner"].is-owner {
  background-color: transparent;
}
[data-uranus-component="commentText"] {
  position: relative;
  margin: 10px 10px 20px 0;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #cccccc; /* ふきだしの枠の色 */
  background-color: #ffffff; /* 訪問者コメントの背景色 */
}
[data-uranus-component="commentText"]:before,
[data-uranus-component="commentText"]:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
}
[data-uranus-component="commentText"]:before {
  left: 20px;
  border-width: 15px;
  border-top-color: #cccccc; /* ふきだしの枠の色 */
}
[data-uranus-component="commentText"]:after {
  left: 21px;
  border-width: 14px;
  border-top-color: #ffffff; /* 訪問者コメントの背景色 */
}
[data-uranus-component="commentOwner"].is-owner [data-uranus-component="commentText"] {
  background-color: #f7f7f7; /* 管理人コメントの背景色 */
}
[data-uranus-component="commentOwner"].is-owner [data-uranus-component="commentText"]:after {
  border-top-color: #f7f7f7; /* 管理人コメントの背景色 */
}

色を変えたい場合は

もし、ふきだし内の背景色を変えたい場合は、コード内の訪問者コメントの背景色、管理人コメントの背景色というコメント（注釈）の付いている行で色を指定することで、管理人以外と管理人のコメントの背景色を別々に変更することができます(各々2ヶ所ずつ変更箇所があります)。

まとめ

以上、アメブロの新CSS編集用デザインで、コメント欄を「ふきだし風」にするカスタマイズ方法をご紹介しました。

CSSにコードをコピペして保存するだけでできる簡単な方法ですが、コメント欄の雰囲気がかなり変わると思いますので、もしよかったら試してみて下さい。