みなさんこんにちは！こっは〜です！
やーん、嬉しい〜！
これがブログ人生初！吹き出しです♪（ｖ＾＿＾）ｖ
ずっとやりたくてやりたくて、ついに今日！
せかせかやりましたよぉ。
吹き出しを作りたいっていうみんなの為に紹介しますね♪
（乱用しちゃいそう......）
はてなブログで吹き出し会話形式を楽しもう！
作り方は簡単です！コピペだけで済みます！
（というか、もうなんでもコピペで作れちゃうのね。
先人様達ありがたや...）
CSSのコピペで吹き出しを作ろう！
今回こちらのサイトを参考にさせていただきました。
こちらにアクセスすると、
CSSを作ってくださっていますのでまずはコピー。
はてなブログに戻り、
【ブログ管理画面】→【デザイン】→【デザインCSS】
デザインCSSの中に先ほどコピーしたCSSをペーストします。
（場所はどこでも大丈夫です。）
吹き出しに使うアイコンを選ぶ
先にアイコンを選び、画像のURLを取っておきます！
（簡単だから大丈夫！）
使っているかたはそこから使う写真に右クリックで【画像のアドレスをコピー】で終わりです。
使ったことがない方は、
いつも記事を書く画面の右側を見てください。
【写真を投稿】を押すと、今までアップした画像が出てきますね。
新しくアイコンにする画像を読みこむ場合はここに画像をペーストしてきてね。
画像をクリックして上の
写真を投稿
+写真を投稿
今月のファイル利用量 ⚪︎％
HatenaBlog(Private) ◻️←ここ！！！ここ押すと飛べます！
それで画像のアドレスをコピーしてください。
わかったかな？
コピペしてきたCSSを簡単に変更する！
先ほどコピペしてデザインCSSに貼ったきた最後の行の
.クラス名::after {background-image:url(画像のURL);} .クラス名::after {background-image:url(画像のURL);}
こちらの部分を自分でカスタマイズすることになりますが、簡単！
まず変えるのは２箇所。
【クラス名】と【画像のURL】のみです！
クラス名は吹き出しのアイコンの名前です。
半角英数字と「-ハイフン」「.ピリオド」のみ使えます。
簡単でわかりやすい名前をつけてみましょう！
（アイコンが犬だったら「dog」とかw）
そして、先ほどの画像URLを貼ります。
完成！！！
いよいよ吹き出し設置！記事投稿しよう！
あとは、記事を書く時に、吹き出しを入れたい箇所を
HTML編集で入れます。
<p class="l-fuki クラス名">テキスト</p>
これをHTML編集で入れて、
先ほどの【クラス名】（dogとか）
と、吹き出しにしたい文章を【テキスト】の所にいれます。
※<p class="l-fuki クラス名">テキスト</p>
このlはlightです。吹き出しが右から出てきます。
左から出したい人はここを「r」にしてください。
これ→<p class="r-fuki クラス名">テキスト</p>
さて、プレビューしてみてください！どうですか？？
出来ましたか？
初心者でも簡単にデザインをカスタマイズできますね♪
自分仕様にしていけばしていくほど楽しくなるよブログ......
やぴー！
最後まで読んでいただきありがとうございます☆
こっは〜。