Bloggerに「吹き出し」を追加する方法

分かりやすく説明したり、サイトを楽しくしてくれる、便利な吹き出し。

Bloggerの標準機能にはないので、CSSとHTMLで追加するソースを紹介します。

Blogger 吹き出しのサンプル

こちらが、Bloggerに追加した吹き出しのサンプルです。


画像のサイズは、縦 60px、横 60pxです。

吹き出しの色や位置などは、CSSの数値を変更して調整してください。

CSSを追加する

テーマのCSSを追加します。

Bloggerのメニューの [テーマ] ＞[カスタマイズ] ボタンをクリックします。


[上級者向け] ＞ [CSSを追加] を選ぶと、「カスタムCSSを追加」ウィンドウが表示されます。



ちょっと長いですが、こちらのCSSを追加します。

コメントの部分を変更すると、色や位置の調整ができます。

/* 吹き出し スタート */
.balloon-left, .balloon-right {
  width: 100%;
  margin: 5px 0;
  overflow: hidden;
}
.faceicon {
  width: 80px;
  text-align:center;
  margin-top: 0;
  margin-bottom: 0;
}
.balloon-left .faceicon {
  float: left;
  margin-left: 5px;
}
.balloon-right .faceicon {
  float: right;
  margin-right: 5px;
}
.faceicon img{
  width: 100%;
  height: auto;
}
.img-caption {
  font-size: 12px;
}
.says {
  display: inline-block;
  position: relative;
  font-size: 14px;
  border-radius: 12px;  
  background: white;
  -webkit-filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}
.balloon-left .says {
  margin: 5px 0 0 20px;      /* 吹き出し(左)の位置を調整 */
  padding: 20px 15px;
  border:2px solid #aef26a;  /* 吹き出し(左)の色を調整 */
}
.balloon-right .says {
  float: right;
  margin: 5px 10px 0 0;      /* 吹き出し(右)の位置を調整 */
  padding: 20px 15px;
  border:2px solid #fda1f1;  /* 吹き出し(右)の色を調整 */
}
.says:before {
  content: "";
  display: inline-block;
  position: absolute;
  border: 10px solid transparent;
  z-index: 2;
}
.balloon-left .says:before {
  top: 17px;
  left: -19px;
  border-right: 10px solid #FFF;
}
.balloon-right .says:before {
  top: 20px;
  right: -20px;
  border-left: 10px solid #FFF;
}
.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  border: 12px solid transparent;
  z-index: 1;
}
.balloon-left .says:after {
  top: 15px;
  left: -26px;
  border-right: 12px solid #aef26a;  /* 吹き出し(左)の色を調整 */
}
.balloon-right .says:after {
  top: 18px;
  right: -26px;
  border-left: 12px solid #fda1f1;  /* 吹き出し(右)の色を調整 */
}
/* 吹き出し エンド */

HTMLを追加する

左側の吹き出しのHTMLはこちらです。

<!--吹き出しはじまり--><span class="balloon-left"><span class="faceicon">★<img>タグを設定★<span class="img-caption">★イメージの下の説明を設定</span></span><span class="says">★吹き出しの言葉を設定</span></span><!--吹き出し終わり-->

右側の吹き出しのHTMLはこちらです。

<!--吹き出しはじまり--><span class="balloon-right"><span class="faceicon">★<img>タグを設定★<span class="img-caption">★イメージの下の説明を設定</span></span><span class="says">★吹き出しの言葉を設定</span></span><!--吹き出し終わり-->

★<img>タグ★ は、Bloggerに画像を追加して、プレビューのソースをコピペしています。