10分でできる!簡単にCSSでイケてる吹き出しをつくる方法(LINE風、角丸、三角形も)

公開日: : 最終更新日:2016/03/30 WEBサービス, アクセス・集客, ブログについて

このエントリーをはてなブックマークに追加

PENGINEさんの記事直後の吹き出しが素敵なので、本ブログでも導入してみようと思います。

PENGINEさんの素敵な吹き出し

まずは、私が素敵だと思ったPENGINEさんの吹き出しを紹介。
ブログにCSSで吹き出しを導入しSNSシェアを狙う

いい感じですけど、これ画像なんですよね。
んで、自分は絵を描くのがうまくないのでCSSでやろうかなと思い、良さげなソースがないか探してみました。

スポンサーリンク

CSSで簡単に吹き出しを作成

いろいろ探してみた所、簡単に吹き出しを作成できるソースを2つ見つけたので紹介したいと思います。

4種類の吹き出し

いろんな種類の吹き出しを作成したい場合は、以下の記事をおすすめします。

参照:CSSだけで簡単に吹き出しを作成する方法4つ!

http://blog.asial.co.jp/1140

オーソドックスな吹き出しや

ブログにCSSで吹き出しを導入しSNSシェアを狙う

丸みのある吹き出しまで
ブログにCSSで吹き出しを導入しSNSシェアを狙う

あとは、これらに線ががついたタイプがそれぞれ作成できます。
本ブログでは丸みのある吹き出しを採用しました。

ブログにCSSで吹き出しを導入しSNSシェアを狙う

導入も非常に簡単で、以下のコードを追加するだけ。

HTMLは、こんな感じ。

<div class="wrapper">
	<div class="box">
		ここにメッセージを。
    </div>
</div>

CSSもこのまま利用できます。

* {
	box-sizing: border-box;
}
 
.wrapper {
   padding: 30px;
   position: relative;
} 
 
.box {
   position: relative;
   background: #ccc;
   height: 70px;
   width: 100px;
   margin-bottom: 20px;
   border-radius: 50px;
}
 
.box:before {
    content: '';
    position: absolute;
    background: #ccc;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    bottom: -20px;
    left: 70px;
}

.box:after {
    content: '';
    position: absolute;
    background: #ccc;
    height: 10px;
    width: 10px;
    border-radius: 5px;
    bottom: -30px;
    left: 90px;
}

簡単ですね!

吹き出しジェネレータ

次は、吹き出しジェネレータです。

http://cssarrowplease.com/

色と、吹き出しのサイズを指定するだけでCSSコードを吐き出してくれる優れもの。
吐き出されるコードはこんな感じ。

.arrow_box {
	position: relative;
	background: #2580f7;
	border: 6px solid #3bf5c3;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(37, 128, 247, 0);
	border-top-color: #2580f7;
	border-width: 30px;
	left: 50%;
	margin-left: -30px;
}
.arrow_box:before {
	border-color: rgba(59, 245, 195, 0);
	border-top-color: #3bf5c3;
	border-width: 38px;
	left: 50%;
	margin-left: -38px;
}

これだけで、オシャレな吹き出しがつくれてしまうとは驚き!

LINE風の吹き出しをCSSで

この記事のやり方を使えば、LINEのチャット形式の吹き出しもCSSで実装できます。

僕も実際に試しています。

CSSでline風の吹き出しを
参照:「社会人2年目、3年目だけど転職できる?」「ブラック企業でエンジニアやってたけど需要ある?」←聞いてきました!

コードをコピペするだけなので、非常に楽です。こちらもぜひ。

スポンサーリンク

まとめ

本日紹介した吹き出しはインパクトがありますので、読み手の注意を惹きつけるという意味ではテキストよりも効果があります。

ですので、記事直後のSNSシェアボタン部分に置けば、これまでよりも注目され、シェアが増えるのでは?と考えています。

導入も10分もあればできますので、ぜひみなさんのブログでも導入してみてはいかがでしょうか?

筆者Twitterアカウント

フォローいただければ、最新記事や、ブログで稼ぐ、アクセスを集める方法などをタイムラインにお届けします。

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!