アラフォーママの雑記ブログ

4歳差姉妹(小1&2歳)の育児に奔走するアラフォーワーママの雑記ブログ。

【はてなブログ】コピペで簡単!吹き出しを使って会話形式にするカスタマイズ方法を試してみたよ!

f:id:xiaocaiaya:20180920165327j:plain

 

こんにちは。アラフォーママのあやぞうです。

 

よく見かけるこんな吹き出しを使った会話形式のブログ。

みなさんも使ってみたいと思ったことありませんか?

難しそうな気がして敬遠してたけど、実際に設定してみたらこれが意外と簡単!

こんなにすぐに出来るならもっと早くやっとけばよかった(;^ω^)

ということで、今回はこの「会話形式の吹き出しが使えるようになるカスタマイズ方法」をご紹介します。

 

吹き出しのカスタマイズ方法

 今回のカスタマイズはこちらの記事を参考にさせていただきました。

www.notitle-weblog.com

 

Google chromeの拡張機能を使った方法が主に紹介されていましたが、私はchromeの拡張機能を使わない方法で設定しました。

特に理由はないんですが、会社のPCなのであんまり拡張機能追加しない方がいいかなと思って…。

chrome拡張機能を使ったカスタマイズがご希望の方はご自身で上記サイトにて確認してください。

 

アイコン画像を用意する

まずは吹き出しで使用したいアイコン画像を用意します。

会話風に使いたいなら少なくとも二人分、もっと沢山のキャラクターを登場させたい場合はそのキャラクターの数だけアイコン画像も用意しないといけません。

実はこれが地味に手間だったりします(;・∀・)

※後から追加もできるので徐々に足していってもOK。

 

私はお馴染みのIconponさんで作りました。

プロフィール画像と同じ、人気のかぶりっこメーカーです。

かぶりっこメーカーはかわいい着ぐるみを着たキャラクターを無料で簡単に作ることができて、ブログやSNSのプロフィールアイコンにも超おすすめなアイコン作成サイトです(^▽^)

 

登場させたいキャラクター=家族ということで、私、旦那、長女、次女の4人分のアイコンと、第三者の声として将来的に使う可能性のある「匿名」のアイコンの合計5つのアイコンを作りました。

 

あやぞう

f:id:xiaocaiaya:20180912115425p:plain

キャラクターとしては可愛い系ですが、赤い色とツノで「おこりんぼ」をイメージ。

顔は似てませんw

 

長女

f:id:xiaocaiaya:20180912115421p:plain

長女の好きな色「緑」を使った、ちょっと優等生風なイメージ。

割と似てます。

 

次女

f:id:xiaocaiaya:20180912115419p:plain

次女の好きな「カクレモモジリ」風のかぶりものと、おてんば&自由奔放なイメージで。

雰囲気的には似てる…カナ?

 

旦那

f:id:xiaocaiaya:20180912115423p:plain

隠れキャラ的に登場する可能性のある旦那w

似てるか似てないかっていうと、似てないけどマァヨシwww

 

 

匿名

f:id:xiaocaiaya:20180920111545j:plain

これだけペイントでちゃちゃっと描いたので背景丸くないけど、アイコンで使う時には丸くなります。

 

 

こんな感じであらかじめ会話に登場する予定のキャラクター画像を用意しておきます。

 

画像をアップロード

用意した画像をはてなフォトライフにアップロードします。

はてなフォトライフ…???なにそれ、どこにあるの?

 

はい、そういう人も結構いると思います。実は私もそうでした(^_^;)

 

◆はてなフォトライフへのアップロード方法

ブログ管理画面からは下記の手順で簡単にはてなフォトライフに行けます。

 

1.記事投稿画面からの場合は②を、それ以外の場合は①をクリック。

f:id:xiaocaiaya:20180920145848j:plain

 

 

 ①のはてな経由の場合この画面を通ります。

f:id:xiaocaiaya:20180920145905j:plain

 

2.アップロードをクリック

アップロードがふたつありますが、どちらをクリックしてもOK。

f:id:xiaocaiaya:20180920145934j:plain

 

3.画像を選択してアップロード

「ファイルを選択」をクリックして画像を選択します。

タイトルは付けても付けなくてもどちらでも可。

右のオプション「Hatena Blog」(フォルダ名を変更している場合は変更した名前)のフォルダを選択し、アップロードボタンをクリックして画像をアップロードします。

f:id:xiaocaiaya:20180920145944j:plain

  

アップロードした画像のURLを控える

吹き出し用アイコンの設定をする際に必要になるので、あらかじめ使いたい画像のURLをメモ帳などに控えておきます。

 

<画像URLの確認の仕方>

1.はてなブログ用の画像フォルダを開く 

f:id:xiaocaiaya:20180920150013j:plain

 

先ほどアップロードした画像はこのフォルダに保存されています。

※ブログ記事作成画面の「写真を投稿」からアップロードした画像もこのフォルダに保存されています。

 

2.アイコンに使いたい画像を右クリックして画像アドレスをコピー

使いたいアイコン画像の上で右クリックして「画像アドレスをコピー」をクリック、メモ帳などにペーストして控えておきます。

※どの画像のURLかわからなくならないように注意!

f:id:xiaocaiaya:20180920150924j:plain

f:id:xiaocaiaya:20180920150930j:plain

 

と、ここまでが画像の準備になります。

画像の準備がなかなか大変ですが、ここまで出来ればゴールはもうすぐ!

頑張っていきましょう~!

 

いよいよ吹き出し機能を実装!

さぁ、いよいよ吹き出し機能の設定作業です。

 

CSSコードをコピペする

出ました!CSS!w

カスタマイズにCSSはつきものですね(;´▽`A``

正直言って私もあんまり得意ではないのですが…。

 

でも大丈夫!

冒頭でご紹介したシロマさんのサイトからCSSをコピーして、アイコン画像を設定して自分のブログCSSに貼り付けるだけで簡単に出来ちゃいます!

 

1.まずはCSSコードをコピー

下記のリンクからCSSコードが記載されている部分をコピーして下さい。

吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE

 

2.アイコン画像を設定

1でコピーしたCSSをいったんメモ帳などにペーストし、アイコン画像の設定を変更します。

変更箇所は「クラス名」と「画像のURL」の部分です。

「クラス名」は自分でわかりやすい名前(登場人物の名前やニックネームなど)にしておくと使いやすいですね。

「画像のURL」には先ほど控えておいたアイコン画像のURLをコピペして置き換えます。

 

3.はてなブログにCSSコードを貼り付ける

「デザイン」→「カスタマイズ」→「デザインCSS」に2で書き換えたCSSコードを貼り付ける。

f:id:xiaocaiaya:20180920153049j:plain

f:id:xiaocaiaya:20180920153226j:plain

既に色々とカスタマイズしている人は「デザインCSS」欄にコードが記載されていると思うので、これらを消してしまったり壊してしまわないように気を付けて下さいね。

心配な人は先に「デザインCSS」内のCSSコードをメモ帳などにコピーしてバックアップをとっておくことを強くおすすめします!

私も結構こういうミスやっちゃう方なので(^▽^;)

 

以上で吹き出し機能の設定は完了です!

お疲れ様でしたヾ(=^▽^=)ノ

では早速使ってみましょう!

 

吹き出し機能を使ってみよう!

吹き出し機能を使う時は、pタグにクラス名を入れます。

ブログ記事編集画面で「HTML編集」を選択し、吹き出しにしたいテキストの前のpタグに赤字の部分を追記します。

 

 <p class="l-fuki クラス名">テキスト</p>

 

吹き出しの方向は「クラス名」の前の「l-fuki」の部分で設定します。

アイコンの右側に吹き出し ⇒ 「r-fuki」

アイコンの左側に吹き出し ⇒ 「l-fuki」

 

「クラス名」にはCSSコード変更時に自分で設定した名前を入れます。

 

では実際に使ってみましょう!

 

どうも!あやぞうです。設定はうまくいきましたか?

はじめまして~!長女のタマです☆ 

マカでっす!!

・・・・・・・・

 

おぉぉぉぉぉ~~~~!!

できてる、できてるぅ~ヾ(〃^∇^)ノわぁい♪

 

そして何気に娘たちの名前(仮)も公開w

旦那は現在考案中www

 

毎回使うわけではないけど、会話テイストにしたいときなんかは便利そうですよね。

 

例えばこんな他愛ない会話も…

 

母「今日の晩御飯何にする~?」

長女「う~ん、塩おにぎり食べたい!あと味噌汁ね。」

次女「こんにゃく!マカこんにゃくたべる!あとくろはんぺん!」

 

吹き出しにするとグッとイメージがわきやすくなります。

 

今日の晩御飯何にする~?

う~ん、塩おにぎり食べたい!あと味噌汁ね。

こんにゃく!マカこんにゃくたべる!あとくろはんぺん!

 

ふふっ、楽しい(≡^∇^≡)

どうですか?わかりやすくなったでしょうか。

 

吹き出し使用時の注意事項

「HTML編集」で吹き出し設定をしても、「見たまま」の画面では吹き出しは反映されないため、かならず「プレビュー」で吹き出しがきちんと反映しているかどうか確認しながら記事を作成してください。

また、吹き出し内のテキストは「Enter」キーで改行しないように気を付けてください。

吹き出し内で改行したい場合は「Shift」+「Enter」キーで改行するようにします。

吹き出し内で「Enter」で改行すると面白いことになります。

気になる人は実際に試してみてくださいw

 

まとめ

いかがでしたか?

他にも何通りか設定方法があるようですが、これが一番簡単そうで参考にされている人も多かったので私もこの方法で設定してみました。

文章だけだとどうしても硬いイメージになりがちですが、こうしてキャラクターのアイコン画像を使って吹き出しで会話形式にしてみると、とても柔らかい印象になりますね。

アイコンも表情を何パターンか用意しておいて、話す内容に応じて変化をつけてみても楽しいかもしれません。

ぜひ皆さんも試してみてくださいねo(*^▽^*)o~♪

 

では。