意外と簡単！はてなブログで吹き出しを作成する方法
こんにちはー！としろーです！！
いままだやってみたかった吹き出しについて、親切な人がやり方を紹介していたブログを参照して実施してみましたので、ご紹介しますね。
これでとうとう私もいっぱしのブロガーと言えるでしょう！笑
ステップ①吹き出し用のアイコン画像を用意！！
吹き出しは、キャラクター同士の掛け合いやブログに対する第三者的な見解・ツッコミなどで利用するため、まずはそのキャラクターのアイコン画像が必要です。
吹き出しだけでもある意味面白いかも！？
※うれげに吹き出しを多用してすみません！
私はとりあえずプロフィール画像にしようしているものをアイコン登録しました。
自作自演の１人役ですね。
これは確かAppStoreで入手した「ToonApp」というアプリで画像から自動的にアイコンを作成してくれる非常に便利なアプリで作成したものです。
色々試しましたが、なかなかおススメです★
ステップ②アイコン画像をアップロード
この画像を「はてなフォトファイル」にアップロードすることで、この写真が所定のアドレスが付与され、吹き出しの画像として紐づけできることができます。
１．ブログ作成画面の写真を投稿のサイドメニューにあるリンクアイコンをクリック
２．はてなフォトファイルに行くのでアップロード
はてなフォトファイルの場所に行く方法が非常にわかりにくいですが、言ってしまえばよくあるアップロードと同じ方法なので簡単だと思います。
ステップ③吹き出し機能を実装！
吹き出し機能を実装するためには、まず「CSSコード」を設定してあげます。
私も参考にしたシロマさんのサイトからCSSコードをコピーして、自分のブログにある「デザインCSS」に張り付けるだけで簡単にできるのでがんばりましょう。
１．CSSコード（書式）をコピー
２．自分用にコードを一部書き換える
コピーしたCSSコードを一旦ワードやメモ帳などにコピペしておきます。
そのうえで、コード最後にある「クラス名」と「画像のURL」を自分用に書き換えます。
＜元のコード＞
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
＜書き換え例＞
.watashi::after {background-image:url(https://www～);}
.tuma::after {background-image:url(https://www～);}
ここで画像のURLとは先ほどはてなフォトファイルに登録した画像のURLになります。
画像のURLは使いたい画像のページ（↓↓このページ）に行って、「右クリック」→「画像アドレスをコピー」することで取得できます。
３．自分のブログのデザインCSSに張り付ける
デザイン」→「カスタマイズ」→「デザインCSS」に2で書き換えたCSSコードを貼り付ける。
もともとほかのCSSコードがあったとしても、その下の行から張り付けましょう。
CSSコードの文字数に対して、枠が小さいので若干不安になるかもしれませんが大丈夫ですｗ
４．Google Chromeの拡張機能をインストール
シロマさんが開発した拡張機能をインストールします。HTML編集モードで直接入力することもできますが、こちらが便利です。
Chrome Add-on for Hatena – Chrome ウェブストア
使い方の説明はこちら。
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） | SHIROMAG
実際に吹き出しを作成してみよう！
まず文章を書き、次にこの文章を選択します。
この状態でブラウザの右上にあるChrome拡張のボタンをクリック。
そしたらポップアップがでますので、吹き出しを左側（画像が右側）にしたい場合は「l-fuki クラス名」と入力して「Add Class」をクリック（EnterキーでもOK）します。「l-fuki」と「クラス名」の間には半角スペースを空けて下さい。吹き出しを右側にしたい場合は「r-fuki 」と入力。
これで無事に吹き出しが作れるようになりましたね！
もともと参考にしたシロマさんのブログはこちらになりますので、より詳しく知り方は参照ください。ほんと感謝です。
【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG
