はてなブログで会話形式の吹き出しを実装する方法と効果的な活用法まとめ

どうも、むむむです。

最近吹き出しと画像を使ってLINEやFacebookのような、チャット風の会話形式の吹き出しカスタマイズを行っているブログをよく目にします。

こんな感じのやつです。

 

・・・・・。

 

なんかしゃべれよ！！

 

もちろんはてなブログでもこの会話風の吹き出しは実装できるので、今日はこの会話形式の吹き出しカスタマイズの方法とその効果的な活用方法について書いてみたいと思います。

スポンサードリンク

はてなブログで画像付の吹き出しを実装する方法

まず会話形式の吹き出しを実装するCSSをコピペで追加していきます。

はてなブログでCSSを追加するには、レスポンシブデザインに対応したテーマを使っている場合は、「デザイン」→「デザインCSS」にコピペすればOKです。

レスポンシブデザインではない方は、上記に加え「デザイン」→「スマホ」→「タイトル下」にCSSをコピペしてください。

スマホのタイトル下にCSSをコピペする際は、以下のコードで挟むことを忘れずに！

	<style type="text/css">
	/*この中にCSSを記述 */
	</style>

view raw SP-CSS hosted with ❤ by GitHub

ちなみにこの記事を書くにあたって参考にさせていただいたブログです。合わせて読んでみてください。

シンプルな吹き出し

どんなデザインにもピッタリな、使い勝手のよいシンプルな吹き出しのCSSです。

	/*****ここから会話のCSS*****/
	.talk-wrap{
	display: block;
	clear: both;
	margin:0 auto 3px auto;
	}
	.talk-wrap p{
	margin:0;
	}
	.left-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	background: no-repeat;
	background-size: 180%;
	background-position: center;
	float:left;
	display:inline-block;
	box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
	border: 3px solid #fff; /*左のアイコンの枠の設定*/
	margin-bottom: 10px;
	}
	.talk-left{
	float:right;
	position: relative;
	background: #fff; /*左の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top:10px;
	box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
	margin-bottom: 10px;
	}
	.talk-left:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-right-color: #666;
	position: absolute;
	left: -20px;
	top: 25%;
	margin-top: -9px;
	}
	.talk-left:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-right-color: #fff;
	position: absolute;
	left: -16px;
	top: 25%;
	margin-top: -8px;
	}
	.right-icon{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	-webkit-border-radius:50%;
	background: no-repeat;
	background-size: 180%;
	background-position: center;
	float:right;
	display:inline-block;
	box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
	border: 3px solid #FFF; /*右のアイコンの枠の設定*/
	margin-bottom: 10px;
	}
	.talk-right{
	float:left;
	position: relative;
	background: #fff; /*右の会話の背景色*/
	border: 2px solid #666;
	padding: 3%;
	border-radius: 10px;
	width: 70%;
	margin-top:10px;
	box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
	margin-bottom:10px;
	}
	.talk-right:before {
	content: "";
	display: inline-block;
	border: 10px solid transparent;
	border-left-color: #666;
	position: absolute;
	right: -20px;
	top: 25%;
	margin-top: -9px;
	}
	.talk-right:after {
	content: "";
	display: inline-block;
	border: 9px solid transparent;
	border-left-color: #fff;
	position: absolute;
	right: -16px;
	top: 25%;
	margin-top: -8px;
	}
	.talk-end{
	clear:both;
	}
	/*****レスポンシブ設定*****/
	@media screen and (max-width: 480px){
	.left-icon{
	width: 80px;
	height: 80px;
	}
	.talk-left{
	width: 65%;
	}
	.right-icon{
	width: 80px;
	height: 80px;
	}
	.talk-right{
	width: 65%;
	}
	}
	@media screen and (max-width: 380px){
	.left-icon{
	width: 60px;
	height: 60px;
	}
	.talk-left{
	width: 65%;
	}
	.right-icon{
	width: 60px;
	height: 60px;
	}
	.talk-right{
	width: 65%;
	}
	}

view raw chat-css hosted with ❤ by GitHub

HTMLはこちら

	<!--左の会話-->
	<div class="talk-wrap">
	<div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい！');"></div>
	<div class="talk-left">
	<p>会話内容をここに記述してください！</p>
	</div>
	</div>
	<!--左はここまで-->
	<!--右の会話-->
	<div class="talk-wrap">
	<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください！');"></div>
	<div class="talk-right">
	<p>会話内容をここに記述してください！</p>
	</div>
	</div>
	<!--右はここまで-->
	<!--↓会話部分の最後にこれを必ず付け加えて↓-->
	<div class="talk-end"></div>

view raw chat-html hosted with ❤ by GitHub

実際にブログ内で使うとこんな感じです。

 

どうも、犬の肉球ですUo･ｪ･oU

 

どうも、猫の肉球です(ΦωΦ)

 

LINE風の吹き出し

みんな大好きLINE風の吹き出しパターンのCSSのです。

	/*以下、①背景色など*/
	.line-bc {
	padding: 20px 10px;
	max-width: 450px;
	margin: 15px auto;
	text-align: right;
	font-size: 14px;
	background: #7da4cd;
	}
	/*以下、②左側のコメント*/
	.balloon6 {
	width: 100%;
	margin: 10px 0;
	overflow: hidden;
	}
	.balloon6 .faceicon {
	float: left;
	margin-right: -50px;
	width: 40px;
	}
	.balloon6 .faceicon img{
	width: 100%;
	height: auto;
	border-radius: 50%;
	}
	.balloon6 .chatting {
	width: 100%;
	text-align: left;
	}
	.says {
	display: inline-block;
	position: relative;
	margin: 0 0 0 50px;
	padding: 10px;
	max-width: 250px;
	border-radius: 12px;
	background: #edf1ee;
	}
	.says:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 3px;
	left: -19px;
	border: 8px solid transparent;
	border-right: 18px solid #edf1ee;
	-ms-transform: rotate(35deg);
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
	}
	.says p {
	margin: 0;
	padding: 0;
	}
	/*以下、③右側の緑コメント*/
	.mycomment {
	margin: 10px 0;
	}
	.mycomment p{
	display: inline-block;
	position: relative;
	margin: 0 10px 0 0;
	padding: 8px;
	max-width: 250px;
	border-radius: 12px;
	background: #30e852;
	font-size: 15px:
	}
	.mycomment p:after {
	content: "";
	position: absolute;
	top: 3px;
	right: -19px;
	border: 8px solid transparent;
	border-left: 18px solid #30e852;
	-ms-transform: rotate(-35deg);
	-webkit-transform: rotate(-35deg);
	transform: rotate(-35deg);
	}

view raw LINE-CSS hosted with ❤ by GitHub

後は記事中の吹き出しを使いたい任意の場所で、以下のHTMLを記入すれば完了です。

	<div class="line-bc"><!--①LINE会話全体を囲う-->
	<!--②左コメント始-->
	<div class="balloon6">
	<div class="faceicon">
	★ここにアイコン画像 <img~>★
	</div>
	<div class="chatting">
	<div class="says">
	<p>左ふきだし文</p>
	</div>
	</div>
	</div>
	<!--②/左コメント終-->
	<!--③右コメント始-->
	<div class="mycomment">
	<p>
	右ふきだし文
	</p>
	</div>
	<!--/③右コメント終-->
	</div><!--/①LINE会話終了-->

view raw LINE-HTML hosted with ❤ by GitHub

ブログ内で使うとこんな感じになります。

LINEぽい会話ができるよ

既読スルー

会話形式での吹き出しの効果的な使い方

色んなブログで使われている会話形式での吹き出しですが、今いち使い所がわからない方も多いと思うのでブログでの効果的な活用法をまとめてみたいと思います。

難しい説明を会話形式で説明

文章だけでは説明が難しい場合、会話形式を使うことで読者さんに分かりやすく説明することができます。

 

ピカソの本名って知ってる？Uo･ｪ･oU

 

パブロ・ディエゴ・ホセ・サンティアゴ・フランシスコ・デ・パウラ・ファン・ネポムセノ・クリシピン・クリスピニャーノ・デ・ロス・レメディオス・シプリアーノ・デ・ラ・サンテシマ・トリニダッド・ルイス・ピカソ(ΦωΦ)

 

文章ばかりのブログは読者さんも読む気を失せてしまうので、難しい部分こそ積極的に吹き出しを使った会話形式を導入してみましょう。

コピペで真似できるブログが読みやすくなる装飾カスタマイズ！読みやすいブログは見た目が違う！ - 肉球はとんがりコーンの匂い

ブログにオリジナリティを出す

キャラクターを使ってオリジナリティを出しているブログがあるが、会話形式の吹き出しを使うことでよりキャラを活かすことができるだろう。

キャラ同士の会話のやり取りが面白いなど、使い方次第でブログにオリジナリティを出すのにも使えると思います。

絵が下手でも大丈夫！オリジナルの美少女キャラクターを作成できるWEBサービスまとめ - 肉球はとんがりコーンの匂い

自分のブログに突っ込む

主張の強い記事は内容によっては周りから反感を買ってしまう可能性があるので、そういった記事に吹き出しで突っ込みを入れることで、尖った意見を丸めさせることができるのです。

例えばあなたが好きなタレントについてひどくバッシングした記事を書いていたとして、記事の最後に以下のような吹き出しがあればどうでしょう。

 

お前が言えたことじゃないけどな！Uo･ｪ･oU

 

吹き出しのキャラがあなたの代わりに突っ込んでくれたことで、なんだか許せちゃう気がしないかい？笑

最後に

文章ばかりのブログってそれだけで読む気が失せるので、こういった吹き出しを使うことでかなり読みやすくなるものです。

はてなブログでも簡単コピペで吹き出しを実装できるので、気になる方は是非試してみてください。

以上、最後まで読んでいただき感謝！感謝！

良ければ読者登録もぜひぜひお願いします（＾ν＾）

ではでは、See you！！