コピペでできる！はてなブログで吹き出しを使ってみた！
こんにちはれんです。
最近皆さんのブログをお邪魔することが増えて、よく目につくようになったのが吹き出しでキャラクターが会話している記事。
私もやってみたい！と思い検索したところCSSをコピペで簡単にできるように紹介してくれているサイトを発見しました！
早速絵を適当にオリキャラを描いて吹き出しを作ることに↓
この絵を吹き出しにしていきます！
吹き出し作りへLet'sGo!
まず最初にアイコンにしたい画像を用意します！
れんは自分で久しぶりにお絵かきして画像を用意しました。
フリー素材でアイコンを配布しているサイトや、自分でアイコンが作れるサイトを使ってもいいですね。
画像を用意して画像URLをGetしよう！
アイコンを用意したら、はてなぶろぐにアップロードします。
写真を投稿ボタンでアップロードしたら、右上のHatenaの文字をクリック！
↓次に左下のフォトライフの文字に進みます。
はてなフォトライフへ飛んだら、マイフォトをクリック！
右下のHatena Blogのぼたんをクリック！
自分がアップロードした画像一覧が表示されるので、吹き出しにしたいアイコンを選んでクリック！
大きく画像が表示されるので、マウスの右クリックで画像アドレスをコピーを選択します。
この後デザインCSSをコピーするので、この時の画像アドレスはメモ帳かどこかに貼り付けておくとスムーズです。
これで吹き出しにしたい画像のアドレスがGetできます！
吹き出しづくりをしていこう！
さぁ、これから肝心のふきだしつくりの作業になります。
デザインCSSをコピペしよう！
デザインCSSがよくわからなくても、コピペで簡単にできるので安心です。
↓のサイトで表示されているデザインCSSをコピーしてきます。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG
そうしたら、いったんメモ帳を開いてデザインCSSを貼り付けます。
ここで変更箇所が２か所あります。
「クラス名」（個人を識別するための名前みたいなもん）と「画像のURL」です。
クラス名を何でもいいので、アルファベットから始まる名前を入れて、先ほど取ってきた画像アドレスを、デザインCSSの画像アドレスの部分に入れます。
これでデザインCSSは完成です！
はてなブログにCSSコードを貼り付けよう！
デザインのボタンをポチっと押します。
スパナマークを押したらデザインCSSの部分に、先ほど作成したデザインCSSを投入します。
他のデザインCSSが入っている場合もあるので、変に変更して壊さないように注意してください。
これでコピペは完了です！(*'ω'*)
実際にブログで吹き出しを使ってみよう！
実際に使うのは二種類のタグです！
<p class="l-fuki クラス名">テキスト</p>
↑アイコン左側用
<p class="r-fuki クラス名">テキスト</p>
↑アイコン右側用
クラス名の部分に先ほど付けたクラス名を入れれば表示されます！
これでやっと吹き出しができたね！
注意点として、吹き出しの改行はShift＋Enterで行ってください。
Enterだけで開業すると面白いことになってしまいます。
れんにしてはよく頑張った。ほめて遣わそう！
吹き出しをつかって皆さんもよいブログライフを！( *´艸｀)
