吹き出し会話をカスタマイズしてみた

こんばんは。はなおです。
今日は最近使用している吹き出し会話の設定についてお話します。

そうですね。
最近吹き出し会話を使い始めて私も登場し読みやすくなりましたね

皆さんのブログを読んでいたら吹き出し会話の記事があり憧れていました。
カスタマイズした内容を備忘録として残したいと思います。
今回参考にさせて頂いたあやぞうさんやヤドめでさんありがとうございます。

吹き出し会話をするには登場人物が必要

◆登場人物◆

今回登場するの”はなお”と”はなちゃん”
■はなお：はなちゃんの飼い主。
■はなちゃん：ジャックラッセルテリアの女の子なのです。

はなおの似顔絵

似顔絵メーカーのサイトで作成しました。
顔、目、髪型、メガネ、眉毛、輪郭など色々設定が出来て簡単に作成出来ました。

似顔絵メーカー | パーツを選んで似顔絵を作成できるサイト

なんとなく特徴が出て似ていますね。結構そっくりかも。

はなちゃんのイラスト

無料のイラストACに登録してジャックラッセルテリアで検索して可愛い写真を選んで見ました。
体型や赤の首輪など結構似ていますね。

無料イラストなら「イラストAC」

mamazakki.hatenablog.com

はてなフォトライフに登録

ダウンロードした写真をはてなフォトライフにアップロード。
画像サイズはサイズを150ピクセルで設定

デザインCCSにコードを記入

なんか難しい設定が必要なんですね。

私にはまだ難しいので参考にしたサイトを紹介します。
「 デザイン > カスタマイズ > デザインCSS」の順番でデザインコードを貼り付けてください。

www.yadomede.com

◆変更する箇所◆

コードは長いですが変更した箇所は赤字と緑の箇所だけです。

赤字はhanaoに変更。緑の箇所は”はてなフォトライフ”に登録した画像URLに変更.

画像のURLは「アップロードした画像>を右クリック>画像アドレスのコピー」を選択すると貼り付け出来ます。
コードの最後の方に下記コードがあります。

/* 吹き出しのアイコン画像　*/
.hanao::after {background-image:url(hanaoの画像URL);}
.hanachan::after {background-image:url(hanachanの画像URL);}

定型文に登録

はてなブログには定型文貼り付け機能があります。ここに設定しておくと便利です。

定型文貼り付け機能 - はてなブログ ヘルプ

「 画面記事のサイドバー> 追加 > 定型文貼り付け> 定型文を作成する」を選択してください。
下記画面が現れます。

◆定型文を作成する◆

■はなおの定型文作成
　◇上のタイトル画面に吹き出しhanaoと入力
　◇下のボックスにに下記コードを入力

<p class="r-fuki hanao">テキスト</p>

　◇rはrightの意味で右に吹き出し会話が作成されます。
　◇クラス名はhanaoに変更
　◇保存ボタンを押す

■はなちゃんの定型文を作成
　◇上のタイトル画面にhanachanの吹き出しと入力
　◇下のボックスにに下記コードを入力

<p class="l-fuki hanachan">テキスト</p>

　◇lはleftの意味で左のからの吹き出会話が作成されます。
　◇クラス名はhanachanに変更
　◇保存ボタンを押す

記事を書いている途中に定型文を呼び出し、緑のテキスト部分に会話を入力すると吹き出し会話が出来るんですよ。

ではテストしてみます。
はなちゃん！右から吹き出し会話作成されていますか？

はなおさん！
ちゃんと右から吹き出し会話出来ていますよ。
私は左から吹き出し会話作成されていますか？

バッチリです！

最後に

PCやスマフォでも会話形式の確認が出来ました。
スマホの設定はレスポンシブ設定にしているので特に変更はしていません。
これからも皆さんのブログを見ながら色々カスタマイズしていきたいと思います。