【はてなブログ】会話形式（簡易版）のスマホ用CSS

会話形式（簡易版）のスマホ用デザインcssです。

会話形式

記事にもどる

【はてなブログ】1行で書ける会話形式の吹き出し（簡易版）を作ってみた！使い分けもOK！

2017.11.8

過去に「会話形式の吹き出しを記事内で使う方法」という記事を紹介しました。 はてなぶろぐでは、吹き出しを使ったコンテンツを作成できたのですが、ある程度画像が決まっているならより簡単に設置できるので作ってみました。 一行で書けるので、会話形式を頻繁に使う人はこっちの方が扱いやすいかもしれません。...

CSS

.p-right,
.p-left {
  border: 1px solid #555;
  border-radius: 10px;
  width: calc(100% - 95px);
  padding: 12px 10px;
  margin-top: 20px;
  margin-bottom: 30px; 
  position: relative;
}
.p-left {
  margin-left: auto;
}
.p-right:before,
.p-left:before {
  content: '';
  position: absolute;
  top: 10px;
  width: 15px;
  height: 15px;
  border-bottom: 1px solid #555;
  border-right: 1px solid #555;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, white 0);
}
.p-right:before {
  right: -9px;
  transform: rotate(-45deg) skew(15deg, 15deg);
}
.p-left:before {
  left: -9px;
  transform: rotate(135deg) skew(15deg, 15deg);
}
.p-right:after,
.p-left:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 55px;
  height: 55px;
  border: 1px solid #555;
  border-radius: 40px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.p-right:after {
  right: -75px;
}
.p-left:after {
  left: -75px;
}