アメブロのコメント内容をCSSだけで吹き出し風にする

アメブロのコメント内容をCSSだけで吹き出し風にする

アメブロのコメント内容を吹き出し風にしてみた

わざめーば、こと松本です。

こんにちは。

アメブロの記事内で吹き出し風の囲み枠を使う方法を書いたあと、ちょっと変えるだけでコメントに使えそうだと思ったのでCSSを作ってみました。

画像などは使わないので、色や角の丸みなど、好み応じて変更していただけます。

設定は、次のコードをご自分のブログのCSSの最後に追加するだけでOKです(CSS編集用デザイン専用です)

/* コメント内容を吹き出し風に */
.commentBody {
  position: relative;
  display: inline-block;
  margin: 0 5px 0 0;
  padding: 15px 10px;
  vertical-align: top;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc; /* 枠線の色 */
  border-radius: 10px; /* 四隅の丸み */
  background-color: #ffffff; /* 内側の背景色 */
  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
  margin-bottom: 15px; /* ツノの突き出し量+余白5 */
}
.commentBody:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #cccccc; /* 枠線の色 */
  border-width: 10px; /* ツノの突き出し量 */
  left: 15px; /* ツノの位置(左から) */
}
.commentBody:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #ffffff; /* 内側の背景色 */
  border-width: 9px; /* ツノの突き出し量-1 */
  left: 16px; /* ツノの位置+1(左から) */
}

/* オーナーコメントの吹き出し */
.ownerComment .commentBody {
  background-color: #fff0f0; /* 内側の背景色 */
}
.ownerComment .commentBody:after {
  border-top-color: #fff0f0; /* 内側の背景色 */
}

色など変更されたい場合は、注釈(/*と*/の間の文字)を参考にやってみてくださいね。

以上、アメブロのコメント内容をCSSだけで吹き出し風にする方法をご紹介しました。

もしよかったら試してみてください。

なお、冒頭の画像は「なんしか、やってみたがりな方(笑)」のブログに適用した場合です^^

勝手に使ってしまいすみません(_ _)

ちなみに、当ブログはコメントを閉じているので、当ブログでのテストできませんでした(汗)