無料ブログでも吹き出しトークなんて怖くない！

以前WordPressで吹き出し可能なプラグインを紹介しましたが、無料ブログでも「吹き出し」やりたいですよね。見てたら楽しそうですもんね。

でもCSSとかHTMLとかよくわからない。
どうにかネット上で探してきたCSSを貼ってみたものの、吹き出しの色とか画像のサイズとか変えたくてもどこをどう変えればいいのかわからないということが多いかと思います。

じゃあ、できるだけ簡単に変更できちゃうようにしてみようということでFC2ブログをベースに考えてみました。
僕もCSSできるのかって聞かれると「いや～わかんないっすね」と即答してしまう程度なので、調べに調べまくってコーディングしてみました。
もし、ココ変だよってところがあったらコメントいただけると幸いです。

ちなみに、今回はいつもの二人はお休みです。
おなじ「吹き出し」ではあるんですけど、出処が違う吹き出しなので観てるあなたも僕も混乱しそうなので。
ここでもプラグインではなく、新しいオリジナル吹き出しで表示するようにしました。

新しいオリジナル吹き出しの記事も参考にしてみてくださいね。

FC2にこの方法で吹き出しを追加してみる

まずはこの方法でFC2に吹き出しを追加するとどんな感じになるのか気になるかと思いますので、画像とリンクを貼っておきますね。

実際のページを見るにはココ：FB-800とかりんの日記

CSSをFC2テンプレートに適用させる

上記のような吹き出しを適用させるためにFC2ブログの「テンプレートの設定」から行っていきます。
このとき、万が一間違ってしまっても大丈夫なようにテンプレートの複製をおすすめします。

編集したいテンプレートを選んだら、スタイルシート編集でコードを追加します。

スタイルシート編集で追加するコードは以下のコードです。
以下のコードをすべてコピーして貼り付けてください。
これでとりあえず吹き出しで会話をするための準備ができました。

/****************************************************************
*                            吹き出し                           *
****************************************************************/
:root {
	/* 左アイコン時の色指定 */
	--balloon-left-color: white;			/*吹き出し色指定*/
	--balloon-left-border-color: black;		/*吹き出し枠色指定*/
	--balloon-left-font-color: black;		/*吹き出しフォント色指定*/

	/* 右アイコン時の色指定 */
	--balloon-right-color: blue;			/*吹き出し色指定*/
	--balloon-right-border-color: red;		/*吹き出し枠色指定*/
	--balloon-right-font-color: white;		/*吹き出しフォント色指定*/

	/* その他 */
	--icon-size: 90px;						/*アイコンサイズ*/
	--balloon-size: 550px;					/*吹き出しサイズ*/
}

.balloon{
	display:block;
	clear: both;
	overflow:hidden;
}

/* アイコン設定 */
/* 左アイコン */
.left-icon{
	display: inline-block;
	float: left;
	background-color: #ccc;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 5px;
	width: var(--icon-size);
	height: var(--icon-size);
	border: 0px solid #ccc;
	background-size: contain;
}

/* 右アイコン */
.right-icon{
	display: inline-block;
	float: right;
	background-color: #ccc;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 5px;
	width: var(--icon-size);
	height: var(--icon-size);
	border: 0px solid #ccc;
	background-size: contain;
}

/* 吹き出し設定 */
/* 左吹き出し */
.left-balloon{
	display: inline-block;
	float: left;
	position: relative;
	padding: 10px;
	background:  var(--balloon-left-color);
	border-style: solid;
	border-width: 1px;
	border-color:  var(--balloon-left-border-color);
	border-radius: 0 10px 10px 10px;
	color:  var(--balloon-left-font-color);
	max-width: var(--balloon-size);
	margin:20px 10px 0 15px
}
.left-balloon:before {
	content: "";
	position: absolute;
	top: -1px;
	left: -11px;
	border: 10px solid transparent;
	border-top-color: var(--balloon-left-border-color);
}
.left-balloon:after {
	content: "";
	position: absolute;
	top: 0px;
	left: -9px;
	border: 10px solid transparent;
	border-top-color: var(--balloon-left-color);
}

/* 左吹き出し */
.right-balloon{
	display: inline-block;
	float: right;
	position: relative;
	padding: 10px;
	background:  var(--balloon-right-color);
	border-style: solid;
	border-width: 1px;
	border-color:  var(--balloon-right-border-color);
	border-radius: 10px 0 10px 10px;
	color:  var(--balloon-right-font-color);
	max-width: var(--balloon-size);
	margin:20px 15px 0 10px
}
.right-balloon:before {
	content: "";
	position: absolute;
	top: -1px;
	right: -11px;
	border: 10px solid transparent;
	border-top-color: var(--balloon-right-border-color);
}
.right-balloon:after {
	content: "";
	position: absolute;
	top: 0px;
	right: -9px;
	border: 10px solid transparent;
	border-top-color: var(--balloon-right-color);
}
/****************************************************************
*                        吹き出し終わり                         *
****************************************************************/

会話形式の記事を書く

次に記事を書く際に以下のHTMLコードを使います。

左側に画像が表示される吹き出しの場合はこちらのコードをコピーして

• 画像URL：表示したい画像のURL
• ここは左吹き出し：会話の内容

に置き換えてください。

<!-- 左吹き出し始まり -->
<div class="balloon">
<div class="left-icon" style="background-image: url('画像URL')"></div>
<div class="left-balloon">
ここは左吹き出し（吹き出し内の言葉を記入）
</div>
</div>
<!-- 左吹き出し終わり -->

右側に画像が表示される吹き出しの場合はこちらのコードをコピーして

• 画像URL：表示したい画像のURL
• ここは右吹き出し：会話の内容

に置き換えてください。

<!-- 右吹き出し -->
<div class="balloon">
<div class="right-icon" style="background-image: url('画像URL')"></div>
<div class="right-balloon">
ここは右吹き出し（吹き出し内の言葉を記入）
</div>
</div>
<!-- 右吹き出し終わり -->

どうでしょうか？あなたのブログに吹き出しはでましたか？

きっとあなたの感想はかりんも言ってますが、こうだと思います。
「吹き出しの色がきもちわるくない？」
はい、色変えちゃいましょう。

あなた好みの吹き出しにカスタマイズ

ブログのデザインやカラムのサイズによっては吹き出し本体サイズや色、アイコンサイズを少し変えたいなってときがあります。
ですが、CSS中のいろいろなところを変えないといけなかったり、変え忘れてしまって「アレ？」ってことがあったり。

なにより間違って変えてしまった日には戻せなくなって「もう、あ～きらめた！」なんてことも。
そんなことがないようにできるだけ簡単に変更できるようにしてみましたので、参考にしてください。

吹き出しの色を変える

まずは、あなたが一番気になっているであろう吹き出しの色を変えてみます。というか簡単なのでいろいろ変えてみてあなたのブログに合った色にしてみてくださいね。

先ほどスタイルシートに貼り付けたコードの一番最初の方に以下のような箇所があります。
ここの色を好きな色に変えてみてください。もちろんカラーコードでOKですよ。

	/* 左アイコン時の色指定 */
	--balloon-left-color: white;			/*吹き出し色指定*/
	--balloon-left-border-color: black;		/*吹き出し枠色指定*/
	--balloon-left-font-color: black;		/*吹き出しフォント色指定*/

	/* 右アイコン時の色指定 */
	--balloon-right-color: blue;			/*吹き出し色指定*/
	--balloon-right-border-color: red;		/*吹き出し枠色指定*/
	--balloon-right-font-color: white;		/*吹き出しフォント色指定*/

アイコンサイズを変える

もう少しアイコン大きい方が良かったり、小さい方がいいなってときはここのサイズを変えてみてください。

	/* その他 */
	--icon-size: 90px;						/*アイコンサイズ*/

レスポンシブに対応する

FC2ブログでレスポンシブに対応する場合は「スマートフォン用」のテンプレートの編集を行う必要があります。
一度もスマートフォン用のテンプレートを設定したことがないという場合はテンプレート自体が設定されていませんので、まず好きなテンプレートを追加しましょう。

テンプレートを設定したことがある場合は「テンプレート管理」
テンプレートの設定をしたことがない場合は「テンプレートの追加」から追加後にテンプレートの管理に進みましょう

スマートフォン用テンプレート管理に進んだら先ほどと同様にCSSの貼り付けを行います。
その際以下のようにアイコンサイズと吹き出しサイズをスマートフォンに合ったサイズに変更します。
ここもあなたのブログに合ったサイズに変更しましょう。

	/* その他 */
	--icon-size: 40px;						/*アイコンサイズ*/
	--balloon-size: 160px;					/*吹き出しサイズ*/

まとめ

実は、少しだけ変更を加えてはいますが、ここでも同じようにして吹き出しでの会話を表示させています。

吹き出しを使えば、その寂しさも吹っ飛ぶかもしれません！
基本的には吹き出し用CSSを貼り付けて、会話を入れたいところに吹き出し用HTMLを入れればよいので簡単にできると思います。
ぜひ、活用してみてください。