こんにちは。アラフォーママのあやぞうです。
よく見かけるこんな吹き出しを使った会話形式のブログ。
みなさんも使ってみたいと思ったことありませんか？
難しそうな気がして敬遠してたけど、実際に設定してみたらこれが意外と簡単！
こんなにすぐに出来るならもっと早くやっとけばよかった(;^ω^)
ということで、今回はこの「会話形式の吹き出しが使えるようになるカスタマイズ方法」をご紹介します。
吹き出しで会話形式にするカスタマイズ方法
今回のカスタマイズはこちらの記事を参考にさせていただきました。
Google chromeの拡張機能を使った方法が主に紹介されていましたが、私はchromeの拡張機能を使わない方法で設定しました。
特に理由はないんですが、会社のPCなのであんまり拡張機能追加しない方がいいかなと思って…。
chrome拡張機能を使ったカスタマイズがご希望の方はご自身で上記サイトにて確認してください。
吹き出し用のアイコン画像を用意する
まずは吹き出しで使用したいアイコン画像を用意します。
会話風に使いたいなら少なくとも二人分、もっと沢山のキャラクターを登場させたい場合はそのキャラクターの数だけアイコン画像も用意しないといけません。
実はこれが地味に手間だったりします(;・∀・)
※後から追加もできるので徐々に足していってもOK。
私はお馴染みのIconponさんで作りました。
プロフィール画像と同じ、人気のかぶりっこメーカーです。
かぶりっこメーカーはかわいい着ぐるみを着たキャラクターを無料で簡単に作ることができて、ブログやSNSのプロフィールアイコンにも超おすすめなアイコン作成サイトです(^▽^)
登場させたいキャラクター＝家族ということで、私、旦那、長女、次女の４人分のアイコンと、第三者の声として将来的に使う可能性のある「匿名」のアイコンの合計５つのアイコンを作りました。
あやぞう
キャラクターとしては可愛い系ですが、赤い色とツノで「おこりんぼ」をイメージ。
顔は似てませんｗ
長女
長女の好きな色「緑」を使った、ちょっと優等生風なイメージ。
割と似てます。
次女
次女の好きな「カクレモモジリ」風のかぶりものと、おてんば＆自由奔放なイメージで。
雰囲気的には似てる…カナ？
旦那
隠れキャラ的に登場する可能性のある旦那ｗ
似てるか似てないかっていうと、似てないけどﾏｧﾖｼwww
匿名
これだけペイントでちゃちゃっと描いたので背景丸くないけど、アイコンで使う時には丸くなります。
こんな感じであらかじめ会話に登場する予定のキャラクター画像を用意しておきます。
↓コチラも良かったら参考にしてみてね！↓
似顔絵アイコンはあんまり…という人は、無料イラストや無料写真素材でアイコンを作るのもオススメ♪
「他のひとと被らないようなオリジナルの似顔絵アイコンが欲しい！」という人は、有料になっちゃいますがココナラ 
で似顔絵イラストを描いてもらうのもオススメですよ。
TwitterなどのSNSで見かけるような「ちょっとイイ感じの似顔絵アイコン＆イラスト」 などは、このココナラ で制作依頼している人が多いそうです。
吹き出し用の画像をアップロード
用意した画像をはてなフォトライフにアップロードします。
はてなフォトライフ…？？？なにそれ、どこにあるの？
はい、そういう人も結構いると思います。実は私もそうでした(^_^;)
◆はてなフォトライフへのアップロード方法
ブログ管理画面からは下記の手順で簡単にはてなフォトライフに行けます。
1.記事投稿画面からの場合は②を、それ以外の場合は①をクリック。
①のはてな経由の場合この画面を通ります。
2.アップロードをクリック
アップロードがふたつありますが、どちらをクリックしてもOK。
3.画像を選択してアップロード
「ファイルを選択」をクリックして画像を選択します。
タイトルは付けても付けなくてもどちらでも可。
右のオプションで「Hatena Blog」（フォルダ名を変更している場合は変更した名前）のフォルダを選択し、アップロードボタンをクリックして画像をアップロードします。
アップロードした吹き出し用画像のURLを控える
吹き出し用アイコンの設定をする際に必要になるので、あらかじめ使いたい吹き出し用画像のURLをメモ帳などに控えておきます。
＜画像URLの確認の仕方＞
1.はてなブログ用の画像フォルダを開く
先ほどアップロードした画像はこのフォルダに保存されています。
※ブログ記事作成画面の「写真を投稿」からアップロードした画像もこのフォルダに保存されています。
2.吹き出しアイコンに使いたい画像を右クリックして画像アドレスをコピー
使いたいアイコン画像の上で右クリックして「画像アドレスをコピー」をクリック、メモ帳などにペーストして控えておきます。
※どの画像のURLかわからなくならないように注意！
と、ここまでが画像の準備になります。
画像の準備がなかなか大変ですが、ここまで出来ればゴールはもうすぐ！
頑張っていきましょう～！
いよいよ吹き出し機能を実装！
さぁ、いよいよ吹き出し機能の設定作業です。
CSSコードをコピペする
出ました！CSS！ｗ
カスタマイズにCSSはつきものですね（;´▽｀A``
正直言って私もあんまり得意ではないのですが…。
でも大丈夫！
冒頭でご紹介したシロマさんのサイトからCSSをコピーして、アイコン画像を設定して自分のブログCSSに貼り付けるだけで簡単に出来ちゃいます！
1.まずはCSSコードをコピー
下記のリンクからCSSコードが記載されている部分をコピーして下さい。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE
2.アイコン画像を設定
1でコピーしたCSSをいったんメモ帳などにペーストし、アイコン画像の設定を変更します。
変更箇所は「クラス名」と「画像のURL」の部分です。
「クラス名」は自分でわかりやすい名前（登場人物の名前やニックネームなど）にしておくと使いやすいですね。
「画像のURL」には先ほど控えておいたアイコン画像のURLをコピペして置き換えます。
3.はてなブログにCSSコードを貼り付ける
「デザイン」→「カスタマイズ」→「デザインCSS」に2で書き換えたCSSコードを貼り付ける。
既に色々とカスタマイズしている人は「デザインCSS」欄にコードが記載されていると思うので、これらを消してしまったり壊してしまわないように気を付けて下さいね。
心配な人は先に「デザインCSS」内のCSSコードをメモ帳などにコピーしてバックアップをとっておくことを強くおすすめします！
私も結構こういうミスやっちゃう方なので(^▽^;)
以上で吹き出し機能の設定は完了です！
お疲れ様でしたヾ(=^▽^=)ノ
では早速使ってみましょう！
吹き出し機能を使ってみよう！
吹き出し機能を使う時は、ｐタグにクラス名を入れます。
ブログ記事編集画面で「HTML編集」を選択し、吹き出しにしたいテキストの前のｐタグに赤字の部分を追記します。
<p class="l-fuki クラス名">テキスト</p>
吹き出しの方向は「クラス名」の前の「l-fuki」の部分で設定します。
アイコンの右側に吹き出し ⇒ 「r-fuki」
アイコンの左側に吹き出し ⇒ 「l-fuki」
「クラス名」にはCSSコード変更時に自分で設定した名前を入れます。
では実際に使ってみましょう！
どうも！あやぞうです。設定はうまくいきましたか？
はじめまして～！長女のタマです☆
マカでっす！！
・・・・・・・・
おぉぉぉぉぉ～～～～！！
できてる、できてるぅ～ヾ(〃^∇^)ﾉわぁい♪
そして何気に娘たちの名前（仮）も公開ｗ
旦那は現在考案中www
毎回使うわけではないけど、会話テイストにしたいときなんかは便利そうですよね。
例えばこんな他愛ない会話も…
母「今日の晩御飯何にする～？」
長女「う～ん、塩おにぎり食べたい！あと味噌汁ね。」
次女「こんにゃく！マカこんにゃくたべる！あとくろはんぺん！」
吹き出しにするとグッとイメージがわきやすくなります。
今日の晩御飯何にする～？
う～ん、塩おにぎり食べたい！あと味噌汁ね。
こんにゃく！マカこんにゃくたべる！あとくろはんぺん！
ふふっ、楽しい(≡^∇^≡)
どうですか？わかりやすくなったでしょうか。
吹き出し使用時の注意事項
「HTML編集」で吹き出し設定をしても、「見たまま」の画面では吹き出しは反映されないため、かならず「プレビュー」で吹き出しがきちんと反映しているかどうか確認しながら記事を作成してください。
また、吹き出し内のテキストは「Enter」キーで改行しないように気を付けてください。
吹き出し内で改行したい場合は「Shift」＋「Enter」キーで改行するようにします。
吹き出し内で「Enter」で改行すると面白いことになります。
気になる人は実際に試してみてくださいｗ
まとめ
以上、コピペで簡単にできる「吹き出しを使った会話形式のカスタマイズ方法」のご紹介でしたが、いかがでしたか？
他にも何通りか設定方法があるようですが、これが一番簡単そうで参考にされている人も多かったので私もこの方法で設定してみました。
文章だけだとどうしても硬いイメージになりがちですが、こうしてキャラクターのアイコン画像を使って吹き出しで会話形式にしてみると、とても柔らかい印象になりますね。
アイコンも表情を何パターンか用意しておいて、話す内容に応じて変化をつけてみても楽しいかもしれません。
ぜひ皆さんも試してみてくださいねo(*^▽^*)o~♪
では。
こちらの記事もおススメです！
私がお世話になってるASP
