やり方は、こちらの記事を参考にさせて頂き、公開されているソースをコピーさせて頂いてます。
作業手順
- デザイン→ CSS デザインのところに CSSソースをコピペする。
- アイコンを作成して【写真を投稿】に登録しておく。
- 【定型文貼り付け】に吹きだし用のHTMLソースを登録しておく。
- 定型文を呼び出して、アイコン画像を張り付けて、吹き出し内のテキストを書く。
1.CSSコピペ
吹き出しデザインになるCSSを、CSSデザイン欄にコピペします。
2.アイコン登録
はてなブログの機能一覧から【写真を投稿】の欄にフォルダーを作って（僕は icon というフォルダをつくりました）、そこにアイコンになる画像をプリセットとして保存します。
僕は、フォトショップで飼い猫をアイコンにしてみました。
100pxl x 100pxl で作ってます。
3.定型文に吹き出し用のHTMLを登録
はてなブログの編集機能、右の一覧から【定型文の貼り付け】に、吹き出し用のHTMLをプリセット登録する。
（デフォルトでは、【定型文貼り付け】は隠れ機能になっているので、＋を押して有効にする）
4.定型文を呼び出して吹き出し用のコードをよびだして吹き出しをつかう
編集モードはHTML編集にして行ってください。
先ほどの定型文貼り付けからHTMLコードを呼び出して、<!-- ふき出し画像 -->コメントの後ろあたりにカーソルを持ってきて、画像を呼び出します。
すると、ここの欄に、画像用のHTMLコードが埋められます。
<!-- ふき出し内テキスト -->のコメントのあとに表示させたいテキスト文章を打ち込みます。
まとめ
これがあるとブログがポップになって親しみ湧くよね！
先人達が、作ってくれて使用をオープンにしてくれているので簡単にこの機能を楽しむことができます。
本当にありがたいですよね！
感謝です。
これからも使わせて頂きます。
是非、元記事を参考にやってみてください。
簡単でした。
