今日も元気に、こんにちは★キャロリーナです！ 初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。
今回は、「吹き出しを作る」です。色々なブログを見てくうちに、かわいい吹き出しがついているブログがある！と気づきました。
このような吹き出し型のコメント！みたことありませんか？
やってみたいと思いましたが、初心者では、やり方がわからなかったので調べて簡単だった方法をご紹介します。
まずは結果！
初心者でも簡単にできます！少し難易度が高かったですが、きちんと順序をみてその通りに行えば思う通りの吹き出しがつくれちゃいます！
吹き出しの画像を決める
まずは、どのような吹き出しの画像にしたいかを決めてください。決まったら以下の順序でアップロードが必要です。
画像をアップロードする
まずは、通常のブログ編集画面を開いてください。
ブログ編集画面の右側になる、ピンク枠（写真を投稿）をクリックしてください。
次に、四角に→が書いてある（はてなフォトライフで編集する）をクリックします。
そうしますと、以下のような画面が出てきますので、アップロードを選択してください。
アップロードしたい画像を選択して、ピンクの枠に貼り付けます。
（もしくは、ピンクの場所をクリックして、アップロードしたい画像を選択します）
画像のURLを確認する
こちらをクリックして、fotolifeに戻ります。保存された画像は、右端にあるフォルダ＞HatenaBlogに保存されます。
使いたい画像の上で、右クリックをし、画像リンクをコピーを選択してください。
後で、吹き出しのCSSもコピーするので、どこかにメモしておくことをおすすめします。
吹き出しの実装
次はついに吹き出しの実装です！
デザインでCCSを設定
以下のブログを参考にしています。こちらのブログからCSSをコピーしてください。
もともとCSSが記入してある場合は、後ろに追加します！
長いですが、こちらのCSSが正解です。
吹き出しを実際に使ってみる
ブログ編集画面で、HTML編集を選択してください。
<p class="l-fuki クラス名">テキスト</p>
こちらをコピーして、実際に吹き出しを作りたい部分に貼り付けてください。
吹き出しの方向は、ピンク字の部分で変更ができます！
- アイコンの右側に吹き出し →「r-fuki」
- アイコンの左側に吹き出し →「l-fuki」
青字のクラス名には、先ほど「画像」の部分に変更した、名前を入れます。
（例）
<p class="r-fuki 笑顔">できました！</p>
できました！このように表示されます。
ちなみに、吹き出し内で改行したい場合は「Shift」＋「Enter」キーで改行するようにします。
やったー！皆様も吹き出し使てみてくださいね！
