はてなブログでも「吹き出し会話」風デザインをしたいと思っている方へ、
今回は「吹き出し会話」風デザインのカスタマイズのやり方について書きたいと思います。
Wordpressではよく見かけますが、はてなブログでも実はできるんですね。
ブログで吹き出し会話ができると、オリジナル感が出て親近感がわくブログ記事にすることができますので、ぜひ読んで実践してみてください。
ちなみに今回の「吹き出し会話」カスタマイズのやり方は、ちゃんこめBLOGのKOMEさんのやり方から学ばせてもらいました！（ありがとうございます）
吹き出し会話風のデザインの完成見本
やったー！ついに吹き出しデビューしました！
やっとできたね〜♪楽しいはてなブログ作りには必要だね
次はどんな楽しいブログを書こうかな〜
吹き出し、もうオワコンでしょ。遊んでる暇あったらちゃんと記事書いたら？
こんな感じでできます。
今までのブログ記事よりも、だいぶ親近感がわく感じになりますね。
スマホ画面での見え方はこうです。
（スマホ画面に合わせて、ちゃんとレスポンシブ対応になってます）
スマホ画面での見え方
それでは、早速作ってみましょう。
吹き出し会話風のデザインのカスタマイズの作成手順
１）アイコン画像の作成・アップロード
まず最初にアイコン画像の作成とはてなフォトへのアップロードを行います。
Myアイコン画像があると、ブログの作成者の顔が見えて親近感が湧きますし、オリジナル感が出ると思いますので是非作成してみるといいです。
詳しいアイコン画像の作成方法は、以前のブログ記事で紹介しましたので、そちらの記事をご覧ください。
もし、自分以外の似顔絵アイコンを使用したい方は、
から似顔絵アイコンを入手することができます。
２）はてなブログでのアイコン画像のアップロード
はてなブログで、吹き出し画像を使用したりする場合は、事前にはてなフォトライフ へアイコン画像をアップロードする必要があります。
アップロードの方法の手順を説明したいと思います。
アイコン画像のアップロードはドラッグ＆ドロップでできますので、非常に簡単です。
新規フォルダを作成する時は「クリエイティブコモンズ設定なし」で作成すること
ここまでできればアップロードはOKです。
３）吹き出しカラーの決定
それでは、４種類ある吹き出しのカラー を決めてゆきましょう。
ブログ記事ごとに色を変更することができないので、事前に吹き出しカラーを決めてゆきましょう。下の見本カラーで問題がなければ、そのままでもOKです。
吹き出し背景色は#faf0c6、ふきだし枠線の色は#f0dc8eです！
こちら、吹き出し背景色は#faf0c6、ふきだし枠線の色は#f0dc8eです！
吹き出し背景色は#fceeeb、ふきだし枠線の色は#f9e1dcですよー
吹き出し背景色は#B0E0E6、ふきだし枠線の色は#9fd8dfなんだよね〜
もし、色を変えたい場合は、こちらのパレットを用意しましたので、気に入った色があったらこちらの色をメモしてください。
もし「ここにもない！」という方は、color-sample.comで色を探すと自分だけの色が見つかります。
色が決まったら、次はCSSへの色カスタマイズとCSSタグ埋め込みです。
４）CSSタグの埋め込み（カラーのカスタマイズ）
それでは、CSSタグのカスタマイズに入ります。下のCSSタグをコピーして色の部分のカスタマイズを行いましょう。
カスタマイズ作業は、どこかにコピペして該当部分を書き換えるとやりやすいです。
CSSタグはものすごく長いですが、色をカスタマイズしてコピペするだけですから、作業自体は簡単ですのでご安心を。
#f0f0f0（赤字）→ふきだし背景色
#aaa（紫字） →枠線色
CSSタグ ※一度メモ帳に貼り付けてから使用してください！
/*---------------
◆ ふきだし ◆
---------------*/
/*=== 共通設定 ===*/
/*全体の上下左右の余白*/
.fuki {margin: 20px 0 ;}
/*テキスト回り込み解除*/
.fuki:after,.fuki:before {clear: both; content: ""; display: block;}
/*アイコン画像の設定*/
.fuki figure {margin: 0; display: block;}
.fuki figure img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
vertical-align: middle;
border: 1px solid #fff; /*★アイコン画像の枠線の太さと色の調整*/
}
/*アイコン画像の設定*/
.fuki-img-left {margin-left: 10px; margin-top: 1px; float: left;}
.fuki-img-right {margin-right: 10px margin-top: 1px; float: right;}
.fuki-img-left,.fuki-img-right {width: 90px; height: 90px;}
/*アイコン画像の名前*/
.fuki-img-name {padding: 0; margin-top: 3px; font-size: 10px; line-height: 1.2em; font-weight: 400; text-align: center; display: block;}
/*=== 会話風ふきだし ===*/
.chat-text-left,.chat-text-right {
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★ふきだしの影*/
border-radius: 10px; /*★ふきだしの丸さ調整*/
}
.chat-text-left p,.chat-text-right p {
margin:0 !important;
font-size: 16px;
color: #; /*★ふきだし内テキスト文字色*/
}
/*左からのふきだし*/
.chat-text-left {
background-color: #f0f0f0; /*★①左ふきだし背景色*/
border: 1px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-left:after {
position: absolute;
top: 16px; left: -22px; content: '';
border: 12px solid transparent;
border-right: 12px solid #f0f0f0; /*★①ふきだし背景色*/
}
.chat-text-left:before {
position: absolute;
top: 16px; left: -24px; content: '';
border: 12px solid transparent ;
border-right: 12px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*右からのふきだし*/
.chat-text-right {
background-color: #faf0c6; /*★③右ふきだし背景色*/
border: 1px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}
/*右からのふきだしの三角部分*/
.chat-text-right:after {
position: absolute;
top: 16px; right: -22px; content: '';
border: 12px solid transparent;
border-left: 12px solid #faf0c6; /*③右ふきだし背景色*/
}
.chat-text-right:before {
position: absolute;
top: 16px; right: -24px; content: '';
border: 12px solid transparent;
border-left: 12px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}
/*=== もくもくふきだし ===*/
.mkmk-text-left,.mkmk-text-right{
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★もくもくの影*/
border-radius: 30px; /*★もくもくの丸さ調整*/
}
.mkmk-text-left p,.mkmk-text-right p {
margin: 0 !important;
font-size: 16px;
color: #555; /*★もくもく内テキスト文字色*/
}
/*左からのもくもく*/
.mkmk-text-left {
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
/*左もくもくの丸い部分*/
.mkmk-text-left:before {
position: absolute;
content: ''; top: 16px; left: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
.mkmk-text-left:after {
position: absolute;
content: ''; top: 26px; left: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
/*右からのもくもく*/
.mkmk-text-right {
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
/*右からのもくもくの丸い部分*/
.mkmk-text-right:before {
position: absolute;
content: ''; top: 16px; right: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
.mkmk-text-right:after {
position: absolute;
content: ''; top: 26px; right: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
/*=== レスポンシブ設定 ===*/
@media (max-width: 767px){
/*スマホ表示の時は横幅いっぱいに広げる*/
.chat-text-left,.mkmk-text-left {margin-left: 90px; margin-right: 0;}
.chat-text-right,.mkmk-text-right {margin-left: 0; margin-right: 90px;}
/*スマホ表示の時はふきだし画像サイズを小さくする*/
.fuki-img-left,.fuki-img-right {width: 80px; height: 80px;}
}
/*-- ふきだしここまで --
------------------------*/
カスタマイズが終わったら、今度は完成したCSSタグを埋め込みます。
埋め込み場所は、
管理画面＞デザイン＞カスタマイズ＞デザインCSS
です。
さあ、これで準備が終わりました。
最後は、ブログ記事の中にHTMLタグを埋め込む作業に入ります。
５）HTMLタグの貼り付け＆アイコン画像＋文章作成
まず、ブログ記事で埋め込みたい吹き出しのHTMLタグを埋め込みます。
作業手順としては、
＜１＞（HTML編集画面にて） HTMLタグの埋め込み
＜２＞（編集見たまま画面にて） アイコン画像の埋め込み
＜３＞（編集見たまま画面にて） 名前・文章の書き込み
＜４＞（プレビュー画面にて） 完成レイアウトの確認
＜５＞（HTML編集画面にて） レイアウトの調整
になります。
慣れるまでは、色々な画面をいったりきたり調整が多くなりますが、すぐにできるようになりますので、辛抱強くやってみてください。
＜１＞（HTML編集画面にて） HTMLタグの埋め込み
まず、記事の入れたい箇所にHTMLタグを埋め込みましょう。
※一度メモ帳に貼り付けてから使用してください！
A)左からの会話風ふきだしHTMLタグ
<!-- 左からの会話風ふきだし -->
<div class="fuki">
<figure class="fuki-img-left">
<!-- ふきだし画像 -->ここに画像
<figcaption class="fuki-img-name">
<!-- ふきだし画像の名前 -->なまえ
</figcaption></figure>
<div class="chat-text-left">
<p class="chat-text">
<!-- ふきだし内テキスト -->ここに文章を入れる
</p></div></div>
b)右からの会話風ふきだしHTMLタグ
<!-- 右からの会話風ふきだし -->
<div class="fuki">
<figure class="fuki-img-right">
<!-- ふきだし画像 -->ここに画像
<figcaption class="fuki-img-name">
<!-- ふきだし画像の名前 -->なまえ
</figcaption></figure>
<div class="chat-text-right">
<p class="chat-text">
<!-- ふきだし内テキスト -->ここに文章を入れる
</p></div></div>
c）左からのもくもくふきだしHTMLタグ
<!-- 左からのもくもくふきだし -->
<div class="fuki">
<figure class="fuki-img-left">
<!-- ふきだし画像 -->ここに画像
<figcaption class="fuki-img-name">
<!-- ふきだし画像の名前 -->なまえ
</figcaption></figure>
<div class="mkmk-text-left">
<p class="mkmk-text">
<!-- ふきだし内テキスト -->ここに文章を入れる
</p></div></div>
d）右からのもくもくふきだしHTMLタグ
<!-- 右からのもくもくふきだし -->
<div class="fuki">
<figure class="fuki-img-right">
<!-- ふきだし画像 -->ここに画像
<figcaption class="fuki-img-name">
<!-- ふきだし画像の名前 -->なまえ
</figcaption></figure>
<div class="mkmk-text-right">
<p class="mkmk-text">
<!-- ふきだし内テキスト -->ここに文章を入れる
</p></div></div>
必要な吹き出しをコピペしてみましょう。
右のもくもく吹き出しのHTMLを入れてみましたが、まだこんな風な見え方の状態です。
ここに文章を入れる
＜２＞（編集見たまま画面にて）アイコン画像の埋め込み
次に、アイコン画像を埋め込みますが、画像の埋め込みは編集見たまま画面で行います。
前の章で埋め込んだアイコン画像の見つけ方は以下のように、写真投稿タブから見つけることができますので、実際にやってみてください。
希望の画像が見つかったら、
ここに画像 部分（５文字）を選択して、その上に画像を投稿してください。
すると画像が埋め込まれました。
ここに文章を入れる
「なまえ」 の文字が下の方にいってしまっていますね。
backspaceで余白を調整するようにしてください。（これは、文字を入れてから最後にまとめてやればいいです）
＜３＞（編集見たまま画面にて） 名前・文章の書き込み
再びHTML編集画面にて、名前と文章の書き込みを行います。
編集見たまま画面では
下のようにしか見えませんが、プレビュー画面ではちゃんと吹き出しができていますので安心してください。
なまえ
ここに文章を入れる
の場所に、入れたい名前と文章を書き込んでください。
なお、行変換するとレイアウトが崩れてしまって、あとでの最終調整が大変になりますので、気をつけるようにしてください。
また、名前が不要な場合は削除すれば非表示になります。
＜４＞（プレビュー画面にて） 完成レイアウトの確認
名前と文章を入れてみたら、最後に完成レイアウトを確認してみましょう。
おそらく、こんな風におかしくなっているかもしれません。
うまくできましたか？
名前の位置がおかしくなっていますね。
最後にレイアウト調整してゆきましょう。
＜５＞（HTML編集画面にて） レイアウトの調整
HTMLで最終調整ですが、
正しく入っている場合はこのような見え方になっています。
＜正しいHTML＞
＜先ほどのHTML＞ おかしい
余計な改行がされていましたのでHTMLを削除しましょう。
（あるいは、編集見たまま画面で一行backspaceしても修正することができます）
修正後、もう一度プレビューで確認してみましょう。
うまくできましたか？
これでやっとうまくできました！完成です。
あとは何度か吹き出しの埋め込みをやっていくと、慣れてくると思います。
いかがでしたか？吹き出しを使ったらブログが楽しくなりますよー♪ぜひやってみてくださいね
You Only Live Once...（人生は一度きり）
