【コピペで簡単】吹き出し CSSテンプレート 基本4つと応用3つ

/ 1月 26, 2017/ デザイン

今回は、「吹き出し」として、見出しや記事中に使えるテンプレート、7選をご紹介します。

コピペするだけ、簡単です。

 

吹き出し CSSテンプレート 7選

使い方

利用されているテーマのCSS(スタイルシート)に、設定を追加することで、利用できます。「外観」→「テーマの編集」から、テーマの「style.css」に、以下をコピーして、追加してください。

その後、吹き出しを使いたい場所に、指定のタグを挿入すれば、OKです。

 

※タグは、コチラ(↓)のプラグインを使うと、ワンクリックで使えて便利です。

「AddQuicktag」で、面倒なタグ打ちから、オサラバ!

 

① 基本の吹き出し(4つ)

1.右向き

右向き吹き出し❶

/* 吹き出し 右向き */
.balloon-right1 {
background: #f05941;
color: #fff;
padding: 8px 0px 8px 20px;
margin: 40px 0px 20px 0px;
position:relative;
height:auto;
}
.balloon-right1:before {
content: ' ';
width:0;
height: 0;
position:absolute;
border:10px solid transparent;
border-left-color: #f05941;
top:25%;
left:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-right1">右向き吹き出し❶<br>ここにコメントを入れてね</div>

 

右向き吹き出し❷

/* 吹き出し 右向き */
.balloon-right2 {
border:2px solid #f05941;
background: #fff;
color: #111;
padding: 8px 0px 8px 20px;
margin: 40px 0px 20px 0px;
position:relative;
height:auto;
}
.balloon-right2:after {
content: ' ';
width:0;
height: 0;
position:absolute;
border:10px solid transparent;
border-left-color: #f05941;
top:25%;
left:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-right2">右向き吹き出し❷<br>ここにコメントを入れてね</div>

 

線の太さ・カラーは、お好みで変えてくださいね。

 

2.左向き

左向き吹き出し❶

/* 吹き出し 左向き */
.balloon-left1 {
background: #f05941;
color: #fff;
padding: 8px 0px 8px 20px;
margin: 40px 0px 20px 0px;
position:relative;
height:auto;
}
.balloon-left1:after {
content: ' ';
width:0;
height: 0;
position:absolute;
border:10px solid transparent;
border-right-color: #f05941;
top:25%;
right:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-left1">左向き吹き出し❶<br>ここにコメントを入れてね</div>

 

左向き吹き出し❷

/* 吹き出し 左向き */
.balloon-left2 {
  border:2px solid #f05941;
  background: #fff;
  color: #111;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
  position:relative;
  height:auto;
}
.balloon-left2:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-right-color: #f05941;
  top:25%;
  right:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-left2">左向き吹き出し❷<br>ここにコメントを入れてね</div>

 

線の太さ・カラーは、お好みで変えてくださいね。

 

3.上向き

上向き吹き出し❶

/* 吹き出し 上向き */
.balloon-top1 {
  background: #f05941;
  color: #fff;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
  position:relative;
  height:auto;
}
.balloon-top1:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-bottom-color: #f05941;
  bottom:100%;
  left:50%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-top1">上向き吹き出し❶<br>ここにコメントを入れてね</div>

 

上向き吹き出し❷

/* 吹き出し 上向き */
.balloon-top2 {
  border:2px solid #f05941;
  background: #fff;
  color: #111;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
  position:relative;
  height:auto;
}
.balloon-top2:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-bottom-color: #f05941;
  bottom:100%;
  left:50%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-top2">上向き吹き出し❷<br>ここにコメントを入れてね</div>

 

線の太さ・カラーは、お好みで変えてくださいね。

 

4.下向き

下向き吹き出し❶

/* 吹き出し 下向き */
.balloon-bottom1 {
  background: #f05941;
  color: #fff;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
  position:relative;
  height:auto;
}
.balloon-bottom1:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-top-color: #f05941;
  top:100%;
  left:50%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-bottom1">下向き吹き出し❶<br>ここにコメントを入れてね</div>

 

下向き吹き出し❷

/* 吹き出し 下向き */
.balloon-bottom2 {
  border:2px solid #f05941;
  background: #fff;
  color: #111;
  padding: 8px 0px 8px 20px;
  margin: 40px 0px 20px 0px;
  position:relative;
  height:auto;
}
.balloon-bottom2:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-top-color: #f05941;
  top:100%;
  left:50%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-bottom2">下向き吹き出し❷<br>ここにコメントを入れてね</div>

 

線の太さ・カラーは、お好みで変えてくださいね。

 

② 応用の吹き出し(3つ)

5.グラデーション

/* 吹き出し 下向き グラデーション */
.balloon-bottom1 {
color: #321313;
background: -webkit-linear-gradient(top, #e84a5f 0%, #f2ead3 100%);
background: linear-gradient(to bottom, #e84a5f 0%, #f2ead3 100%);
padding: 12px 0px 12px 15px ;
margin: 40px 0px 20px;
position:relative;
height:auto;
}
.balloon-bottom1:after {
content: ' ';
width:0;
height: 0;
position:absolute;
border:10px solid transparent;
border-top-color: #f2ead3;
top:100%;
left:5%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-bottom1"><strong>下向き吹き出し(グラデーション)<br />
 ここにコメントを入れてね</strong></div>

 

6.ストライプ

/* 吹き出し 左向き ストライプ */
.balloon-left1 {
  background: -webkit-repeating-linear-gradient(45deg, #a6e3e9, #a6e3e9 5px, #e3fdfd 5px, #e3fdfd 20px);
  background: repeating-linear-gradient(45deg, #a6e3e9, #a6e3e9 5px, #e3fdfd 5px, #e3fdfd 20px);
  padding: 12px 0px 12px 15px ;
  margin: 40px 0px 20px;
  position:relative;
  height:auto;
}
.balloon-left1:after {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-right-color: #e3fdfd;
  top:65%;
  right:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。(↓)

<div class="balloon-left1"><strong>左向き吹き出し(ストライプ)<br />
 ここにコメントを入れてね</strong></div>

 

7.点線囲い

/* 吹き出し 右向き 点線囲い */
.balloon-right1 {
  color: #fff;
  background-color: #0b409c;
  padding: .3em;
  margin: 40px 0px 20px;
  position:relative;
  height:auto;
}
.balloon-right1 span {
  display: block;
  padding: .55em 1em;
  border: 2px dashed #fff;
}
.balloon-right1:before {
  content: ' ';
  width:0;
  height: 0;
  position:absolute;
  border:10px solid transparent;
  border-left-color: #0b409c;
  top:65%;
  left:100%;
}

CSSを追加後、使いたい場所に、下(↓)のタグを入れてください。

<div class="balloon-right1"><span><strong>右向き吹き出し(点線囲い)<br>
ここにコメントを入れてね</strong></span></div>

 

線の太さ・カラーは、お好みで変えてくださいね。

応用編は、コチラ(↓)を使ってアレンジしたものなので、ご参考までに。

【コピペで簡単】タイトル(見出し)CSSテンプレート 15選

 

まとめ

吹き出しを作るには、いろいろなやり方がありますが、なるべくシンプルで、簡単な記述にしました。あとは、最下部の2行の「%」値をいじって、吹き出し△の位置を変えたり、角を丸くしたりなど、自分好みのアレンジに変えて、CSSカスタマイズを楽しんでください!

カラーは、自分のサイトの配色に合わせたり、目立つ色を使うとアピールできるので、オススメです。

 

コチラもおすすめです

【コピペで簡単】タイトル(見出し)CSSテンプレート 15選

直感的に、すぐ配色セットを選べる、本当に使えるカラーサイト7選

 

2 Comments

  1. 吹き出しジェネレータ作ってみました。
    http://generator.web-alpha.info/fukidashi/

    簡単にできるので、ぜひ試してみてください。

    1. はじめまして、コメント頂きありがとうございます。
      リンク先のジェネレータを拝見しました。
      ぜひ機会がありましたら、使わせて頂きたいと思います。
      今後とも、どうぞよろしくお願いいたします(*’▽’)

コメントを残す