アメブロの記事内で会話を吹き出しで書いてみる

アメブロの記事内で会話を吹き出しで書いてみる

アメブロの記事内で会話を吹き出しで書いてみた

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

こんにちは。

最近、SNSのボタンなどでよく見かけるCSSを使った吹き出しを参考にしてアメブロ記事内で試してみたので、無理やり会話風に書いてみます(汗)

松本さん!
アメブロの記事を会話形式で書きたいんですが・・・、
アメブロをカスタマイズして吹き出し風に表示することってできますか?
はい、できますよ。
そうなんですか?ぜひ教えて下さい。
じゃ、まずは次のコードをご自分のブログのCSSの最後に追加して下さい。

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

/* 吹き出し2(右下に下向きツノ) */
.fukidashi2 {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 15px 10px;
  vertical-align: top;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc; /* 枠線の色 */
  border-radius: 10px; /* 四隅の丸み */
  background-color: #f0ffff; /* 内側の背景色 */
  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
  margin-bottom: 15px; /* ツノの突き出し量 */
}
.fukidashi2:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #cccccc; /* 枠線の色 */
  border-width: 15px; /* ツノの突き出し量 */
  right: 30px; /* ツノの位置(右から) */
}
.fukidashi2:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  border-style: solid;
  border-color: transparent;
  border-top-color: #f0ffff; /* 内側の背景色 */
  border-width: 14px; /* ツノの突き出し量-1 */
  right: 31px; /* ツノの位置+1(右から) */
}

記事で使うときは、

<div class="fukidashi">★</div>

というタグで使います(黄色い方)。
「★」の部分を吹き出し内に書きたい内容に変更して下さいね。
青い方は、以下のようなタグになります。

<div class="fukidashi2">★</div>

あ、でも・・・、

会話なら・・・、
こんな形の方が
いいかもしれませんね。

これもCSSを書いときます。

/* 吹き出し(左向きにツノ)*/
.fukidashi_l {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 15px 10px;
  vertical-align: top;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc; /* 枠線の色 */
  border-radius: 10px; /* 四隅の丸み */
  background-color: #fffff0; /* 内側の背景色 */
  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
  margin-left: 15px; /* ツノの突き出し量 */
}
.fukidashi_l:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 100%;
  border-style: solid;
  border-color: transparent;
  border-right-color: #cccccc; /* 枠線の色 */
  border-width: 15px; /* ツノの突き出し量 */
  top: 10px; /* ツノの位置(上から) */
}
.fukidashi_l:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 100%;
  border-style: solid;
  border-color: transparent;
  border-right-color: #fffff0; /* 内側の背景色 */
  border-width: 14px; /* ツノの突き出し量-1 */
  top: 11px; /* ツノの位置+1(上から) */
}

/* 吹き出し(右向きにツノ)*/
.fukidashi_r {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 15px 10px;
  vertical-align: top;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc; /* 枠線の色 */
  border-radius: 10px; /* 四隅の丸み */
  background-color: #f0ffff; /* 内側の背景色 */
  box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
  margin-right: 15px; /* ツノの突き出し量 */
}
.fukidashi_r:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #cccccc; /* 枠線の色 */
  border-width: 15px; /* ツノの突き出し量 */
  top: 10px; /* ツノの位置(上から) */
}
.fukidashi_r:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #f0ffff; /* 内側の背景色 */
  border-width: 14px; /* ツノの突き出し量-1 */
  top: 11px; /* ツノの位置+1(上から) */
}

記事で使うときは、左にツノが出ている方が、

<div class="fukidashi_l">★</div>

というタグで使います。
「★」の部分を吹き出し内に書きたい内容に変更するのは同じです。
また、右にツノが出ている方は、以下のようなタグになります。

<div class="fukidashi_r">★</div>

ちなみに、これらのタグは吹き出し部分だけで、顔の画像は普通に横に置いただけです。
はい。      
あと、アメブロカスタマイズの常ですが、残念ながらスマホには(普通は)反映されませんので、うまく使おうと思うと、もう少し工夫が必要かもしれませんが、ひとまずご紹介です。
よかったら試してみてくださいね。
ありがとうございました^^