目次

【アメブロカスタマイズ】コメント欄を吹き出し風にする方法

「新CSS編集用デザイン」向けと「旧CSS編集用デザイン」向けの両方あります

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

ユーザー間のコミュニケーションも多く、SNS要素の強いアメブロですので、そのコミュニケーションの重要な場の一つであるコメント欄を吹き出し風にして、楽しさを演出してみてはいかがでしょうか。

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先にチェックしておいて下さい。

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ヶ所ずつ変更箇所があります)。

アメブロの独自属性「data-uranus-component-?????」を使っていますので、もしも、この独自属性の名前が変更となると当記事のコメントは無効になりますが、全体が無効になって初期状態に戻るようにしてありますので、大きな表示崩れにはなりにくいと思います。

旧CSS編集用デザインの場合

旧CSS編集用デザインの場合も、以下のようなコードをCSSの末尾に追加することで同様にコメント欄を吹き出し風にカスタマイズすることができます。

/* アメブロのコメントを吹き出し風にする(旧CSS) */
.commentBody {
  position: relative;
  margin: 10px 10px 20px 0;
  padding: 15px;
  border-radius: 15px;
  border: 1px solid #cccccc; /* 吹き出しの枠の色 */
  background-color: #ffffff; /* 訪問者コメントの背景色 */
}
.commentBody:before,
.commentBody:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
}
.commentBody:before {
  left: 20px;
  border-width: 15px;
  border-top-color: #cccccc; /* フ吹き出しキダシの枠の色 */
}
.commentBody:after {
  left: 21px;
  border-width: 14px;
  border-top-color: #ffffff; /* 訪問者コメントの背景色 */
}
.ownerComment .commentBody {
  background-color: #f7f7f7; /* 管理人コメントの背景色 */
}
.ownerComment .commentBody:after {
  border-top-color: #f7f7f7; /* 管理人コメントの背景色 */
}

まとめ

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

簡単ですが、コメント欄の雰囲気が変わると思いますので、もしよろしければ試してみて下さい。

(準備中)
(準備中)