今日は、はてなブログ上でキャラクターが会話しているように見える吹き出し設定の仕方やアイコンの作り方を初心者の方に向けてご説明していきますね。
この記事では『アラフォーママの雑記ブログ』さんや『SHIROMAG』さんの記事を参考にしていますが私のような初心者が『え？これ何？』と迷う部分を更に分かりやすく補足して書いていきます☻
ちなみに上記の方たちのブログが分かりにくいという意味ではありません。
とても分かりやすいのですが『ここはどうすればいいのだろう？』と思うところがあったのでそこを補足しています。
- かぶりっこメーカー
- イラストレーターを探している方
- アイコン/キャラクターの作り方
- ダウンロード
- はてなフォトライフ
- 画像アドレスを取得！
- デザインCSSのコードをコピー
- コードをデザインCSSにコピペ
- デザインCSSの設定
- アイコンを追加する場合
- ブログHTMLにコードをはる
- 吹き出し完成！
- レスポンシブではない場合
- 注意点
- 最後に
かぶりっこメーカー
まず最初に必要なのは会話に登場させるキャラクターです。
これがなかったら始まりませんよね。
私はIconponさんのフリーツール『かぶりっこメーカー』で作成しました。
『かぶりっこメーカー』のアイコンはゆるくて可愛い！
とにかく可愛いアイコンを探している方にオススメです。
こちらから作れます↓
そしてこちらの記事を参考にさせていただきました。ありがとうございました！
イラストレーターを探している方
実は私もイラストレーターなので自分で描けばいいのですが今は自分のを書いている時間がなく、とりあえず今は『かぶりっこメーカー』さんのものを使わせて頂きました！
時間が出来たら自分で描いたアイコンにするつもりです♬
ちなみに私のイラストはこんな感じ。
これはハワイをイメージして描いたものですが、アイコンを作るときはこの雰囲気を生かしたアイコンにするつもりです。
また、こちらは仕事で描いたものですが『似顔絵』も得意分野です！
アイコン/キャラクターの作り方
かぶりっこメーカーを開くと、まず最初にこちらの画面が出てきます。
作り方を順番にご説明していきますね。
これは初心者でも簡単！
①ここから順番に髪型・髪型2（着ぐるみからはみ出る髪）・目・ほほ・口・着ぐるみなどを好みのものに設定していきます。
私はクマの着ぐるみの男の子にしてみました！
②形が決まったら、次は肌の色・髪の色・着ぐるみの色・背景の色を設定します。
③次はお好みで形状・効果なども設定出来ます。
形状をいじると枠の形が変わります。
また、効果とはフィルターの事。
ここで私は効果を02/03に設定してみたのですが、上のキャラクターと色合いが微妙に違うのがお分かりになるでしょうか？
少し明度（明るさ）が上がった気がします。
ただ、ここをいじってもあまり大きな変化はないのでお好みで変えてくださいね。
ダウンロード
①希望のキャラクターが完成したら『ダウンロード』をクリックします。
私はMacユーザーなのですが『ダウンロード』をしたら『ダウンロードファイル』に保存されるのでドラッグしてデスクトップに移動しました。
はてなフォトライフ
①『ダウンロード』が終わった後は『はてなフォトライフ』にアップロードします！
はてなフォトライフ？ 何それ？って感じですよね。
私も最初そう思いました。
『はてなフォトライフ』はダッシュボードの画面を開き右上のHatenaのアイコンをクリックすると出てきます。
この画面のここですね。
②『フォトライフ』をクリック！
すると、右上にこの画面が出て来るので
③『アップロード』をクリック！
④この画面に変わるので『アップロード（複数選択可』をクリック！
アップロードしたいアイコン（キャラクター）が沢山ある場合は一気にアップロードしてしまいましょう。
⑤私はMacユーザーなのでMacの画面での説明になってしまいますが、先ほど作成したキャラクターをクリック→『開く』を押します。
沢山ある場合はここで全て選択します。
⑥アップロードできました！
アップロード出来たアイコンをクリックして大きくします。
画像アドレスを取得！
①クリックして画像を大きくした後は画像アドレスを取得します。
画像アドレス取得の仕方
・Windowsの場合は右クリック
・Macの場合はコマンド＋コントロールを押しながらマウスをキャラクター上に持ってきてクリック！
②この画面が出てくるので『画像アドレスをコピー』を選択します。
③『画像アドレスをコピー』をしたら、PC上のメモなどにペーストしてください。
その際に分かりやすい名前をつけましょう！
私は『くま』にしました。そのまんま！
この画像アドレスはデザインCSSにコピペする事になるのでアイコン/キャラクターが沢山ある方ほど、分かりやすい名前をつけた方が後々楽です！
デザインCSSのコードをコピー
先ほど取得したアイコン/キャラクターの画像アドレスはここで使います！
最初の設定はけっこう面倒なのですが一度設定さえしてしまえば後はとても楽なので頑張りましょう！
吹き出しで会話形式に記事に作るには、HTMLとCSSを設定します！
私はSHIROMAGさんのブログを参考にさせて頂きました！
SHIROMAGさんの記事ではGoogle Chromeの拡張機能を使った方法がメインでご紹介されていますが私は
Google chromeの拡張？ 何それ？
って感じだったのでGoogle Chromeの拡張を使用しない方法で設定しました。
ですので、そちらの方法でご説明していきますね！
CSSコードはSHIROMAGさんのこちらの記事からコピーしてください。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG
コードをデザインCSSにコピペ
CSSコードをコピーしたら、まず最初にメモなどにコピペしておきます。
デザインCSSにコピペする前に1番下にある『クラス名』と『画像のURL』の2ヶ所を書き換えます。
クラス名は好きな名前、画像のURLとは先ほど取得した画像アドレスの事です。
.クラス名::after {background-image:url(画像のURL);}
↑がプレビューでは見れるのですがブログ公開したら途中が切れていたので、一応こちらにも同じものを載せておきます↓
.クラス名::after {background-image:url(画像のURL);}
①クラス名とは簡単に言うとアイコン/キャラクターの名前。
好きな名前を半角英数字でつけてください。
ハイフン（ - ）やアンダーバー（ _ ）も使えます。
また、名前はアルファベットで始めるようにしてください。
クラス名は会話形式のブログ記事を書くときに、HTMLで何のキャラクターを表示させるか決める重要な場所！
なので、分かりやすい名前をつけましょう！
②画像のURLは先ほど取得したキャラクターの画像アドレスです。
どこかメモに保存してあると思いますがメモからコピペして『画像URL』の項目にコピペしましょう！
この2つの書き換えが終わったらいよいよデザインCSSの設定へいきます！
デザインCSSの設定
書き換えが終わったコードをデザインCSSにコピペします。
①ダッシュボードから、
②スパナマークの『カスタマイズ』→『デザインCSS』にコピペ。
これで完了です！
お疲れさまでした♬
アイコンを追加する場合
キャラクター/アイコンを追加する場合は
①デザインCSSのこの部分だけコピペして後ろに増やします↓
.クラス名::after {background-image:url(画像のURL);}
よかったらこちらを参考にしてください☻
私はusagiとnekoとpinknekoとkumaを作成してあります。
分かりやすく見たまんまのクラス名（名前）をつけています。
ブログHTMLにコードをはる
デザインCSSの設定が終わったら、後は楽です！！
初心者の皆様、ここまで大変だったと思います。
私も大変でした。。
この後は実際にブログで書いてみましょう♬
①ブログ記事編集のHTMLに下記のコードを貼ります。
<p class="l-fuki クラス名">テキスト</p>
その前に、HTMLコードの説明をしていきます！
✱︎上記のHTMLコードにある『 l-fuki 』の『 l 』は、棒でも数字の1でもなくLの小文字です。
left（左）の 『 l 』ですね。
これは左側に吹き出しが出るという意味（アイコンは右）
ですので右側（right）に吹き出しを出したい（アイコンは左）場合は『 l 』を『 r 』に書き換えましょう。
✱︎また、何度も言っているので『もう分かってるよ！』ってお思いかとは思いますがクラス名はキャラクターの名前。
私のキャラクターで言ったらnekoとかkumaですね。
ここで何のキャラクターが出てくるか決まります。
スペルを一時間違えただけでアイコンの中身が空白（誰もいないー！）なんて事になるので注意が必要です。実際に私、何度かやってます！
ですのでクラス名は忘れないようにメモをしておくようにしてください。
✱︎『テキスト』は会話で表示させたい文章を打ち込みます。もちろんここは日本語で、普通にブログに書く感じで大丈夫です。
吹き出し完成！
HTMLにコードを貼った後はプレビューで確認してみましょう☻
ちゃんと貼り付けられましたね！
私はレスポンシブデザインなのでPCもスマホも同じように表示されています。
会話風の記事が出来た時、感動しました！
しかし疲れた。
これはバリ島でガイドさんと会話していた時の記事。
会話の様子をブログで書く時は、見やすくて可愛く読みやすいですよね♬
レスポンシブではない場合
ちなみにレスポンシブではない場合は『デザイン』→『スマートフォン』→『ヘッダ』→タイトル下のHTMLにCSSを記述するそうです。
< style > < /style >でコードを囲うそうなのですが、その時のCSSコードはSHIROMAGさんの記事内にありますのでそちらからコピー、参考にしてください。
注意点
吹き出しの中で改行する場合『Enter』キーをクリックして改行してはいけないそうです。
吹き出し内で改行する場合は『Shift ＋ Enter』でするようにしてください。
最後に
いかがでしたか？
吹き出しで会話形式に記事を作る方法を、私のような超初心者でも分かるように補足しながら書いていきました！
もう、本当〜に疲れました。
やり終わってみると、どうって事なかったのですが始める時に説明記事を読みながら理解していくのが大変！
でも、たった一度だけ大変な思いをしておけば、後は毎回可愛い吹き出し形式のブログが書けて楽しいです！
ブログも華やかになりますよ☻
やりたくても重い腰が上げられない方、一度試してみてはいかがでしょうか？
はてなブログの方は読者登録お願いします
こちらの記事もあわせてどうぞ♬
