Trip&Cafe

カフェめぐりと海外旅行とネコが大好きなイラストレーターです。過去の事や現在の事をランダムに記事にしていきます♬

Trip&Cafe

【初心者向け】吹き出しで会話形式の記事を作る方法【はてなブログ】

f:id:mlc510:20190518134531j:image

 

今日は、はてなブログ上でキャラクターが会話しているように見える吹き出し設定の仕方やアイコンの作り方を初心者の方に向けてご説明していきますね。

この記事では『アラフォーママの雑記ブログ』さんや『SHIROMAG』さんの記事を参考にしていますが私のような初心者が『え?これ何?』と迷う部分を更に分かりやすく補足して書いていきます☻

ちなみに上記の方たちのブログが分かりにくいという意味ではありません。

とても分かりやすいのですが『ここはどうすればいいのだろう?』と思うところがあったのでそこを補足しています。

 

 

かぶりっこメーカー

 

まず最初に必要なのは会話に登場させるキャラクターです。

これがなかったら始まりませんよね。

私はIconponさんのフリーツール『かぶりっこメーカー』で作成しました。

 

『かぶりっこメーカー』のアイコンはゆるくて可愛い!

とにかく可愛いアイコンを探している方にオススメです。

こちらから作れます↓

www.iconpon.com

 

そしてこちらの記事を参考にさせていただきました。ありがとうございました!

mamazakki.hatenablog.com

 

 

イラストレーターを探している方

 

実は私もイラストレーターなので自分で描けばいいのですが今は自分のを書いている時間がなく、とりあえず今は『かぶりっこメーカー』さんのものを使わせて頂きました!
時間が出来たら自分で描いたアイコンにするつもりです♬

ちなみに私のイラストはこんな感じ。
これはハワイをイメージして描いたものですが、アイコンを作るときはこの雰囲気を生かしたアイコンにするつもりです。
f:id:mlc510:20190614221506j:image

 

また、こちらは仕事で描いたものですが『似顔絵』も得意分野です!

f:id:mlc510:20190614221522j:image

 

 

アイコン/キャラクターの作り方

 

かぶりっこメーカーを開くと、まず最初にこちらの画面が出てきます。

作り方を順番にご説明していきますね。

これは初心者でも簡単!

f:id:mlc510:20190614220110j:image

 

ここから順番に髪型・髪型2(着ぐるみからはみ出る髪)・目・ほほ・口・着ぐるみなどを好みのものに設定していきます。

私はクマの着ぐるみの男の子にしてみました!

f:id:mlc510:20190614220130j:image

 

形が決まったら、次は肌の色・髪の色・着ぐるみの色・背景の色を設定します。

f:id:mlc510:20190614220147j:image

 

次はお好みで形状・効果なども設定出来ます。

形状をいじると枠の形が変わります。

f:id:mlc510:20190614220205j:image

 

また、効果とはフィルターの事。

ここで私は効果を02/03に設定してみたのですが、上のキャラクターと色合いが微妙に違うのがお分かりになるでしょうか?

少し明度(明るさ)が上がった気がします。

f:id:mlc510:20190614220253j:image

ただ、ここをいじってもあまり大きな変化はないのでお好みで変えてくださいね。

 

 

ダウンロード

 

希望のキャラクターが完成したら『ダウンロード』をクリックします。

私はMacユーザーなのですが『ダウンロード』をしたら『ダウンロードファイル』に保存されるのでドラッグしてデスクトップに移動しました。

f:id:mlc510:20190614220322j:image

 

 

はてなフォトライフ

 

①『ダウンロード』が終わった後は『はてなフォトライフ』にアップロードします!

はてなフォトライフ? 何それ?って感じですよね。

私も最初そう思いました。

 

『はてなフォトライフ』ダッシュボードの画面を開き右上のHatenaのアイコンをクリックすると出てきます。

f:id:mlc510:20190614220346j:image

 

この画面のここですね。

②『フォトライフ』をクリック!

f:id:mlc510:20190614220406j:image

 

すると、右上にこの画面が出て来るので

③『アップロード』をクリック!

f:id:mlc510:20190614220424j:image

 

この画面に変わるので『アップロード(複数選択可』をクリック!

アップロードしたいアイコン(キャラクター)が沢山ある場合は一気にアップロードしてしまいましょう。

f:id:mlc510:20190614220444j:image

 

私はMacユーザーなのでMacの画面での説明になってしまいますが、先ほど作成したキャラクターをクリック→『開く』を押します。

沢山ある場合はここで全て選択します。

f:id:mlc510:20190614220501j:image

 

アップロードできました!

アップロード出来たアイコンをクリックして大きくします。

f:id:mlc510:20190614220520j:image

 

 

画像アドレスを取得!

 

クリックして画像を大きくした後は画像アドレスを取得します。

f:id:mlc510:20190614220540j:image

 

画像アドレス取得の仕方

 

・Windowsの場合は右クリック

・Macの場合はコマンド+コントロールを押しながらマウスをキャラクター上に持ってきてクリック!

 

この画面が出てくるので『画像アドレスをコピー』を選択します。

f:id:mlc510:20190614220559j:image

 

③『画像アドレスをコピー』をしたら、PC上のメモなどにペーストしてください。

その際に分かりやすい名前をつけましょう!

私は『くま』にしました。そのまんま!

 

この画像アドレスはデザインCSSにコピペする事になるのでアイコン/キャラクターが沢山ある方ほど、分かりやすい名前をつけた方が後々楽です!

f:id:mlc510:20190614220615j:image

 

 

デザインCSSのコードをコピー

 

先ほど取得したアイコン/キャラクターの画像アドレスはここで使います!

最初の設定はけっこう面倒なのですが一度設定さえしてしまえば後はとても楽なので頑張りましょう!

 

吹き出しで会話形式に記事に作るには、HTMLとCSSを設定します!

 

私はSHIROMAGさんのブログを参考にさせて頂きました!

www.notitle-weblog.com

 

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にコピペします。

 

ダッシュボードから、

f:id:mlc510:20190614220655j:image

 

スパナマークの『カスタマイズ』→『デザインCSS』にコピペ。

f:id:mlc510:20190614220712j:image

 

これで完了です!

お疲れさまでした♬

 

 

アイコンを追加する場合

 

キャラクター/アイコンを追加する場合は

デザインCSSのこの部分だけコピペして後ろに増やします↓

.クラス名::after {background-image:url(画像のURL);}

 

よかったらこちらを参考にしてください☻

私はusagiとnekoとpinknekoとkumaを作成してあります。

分かりやすく見たまんまのクラス名(名前)をつけています。

f:id:mlc510:20190614220724j:image

 

 

ブログHTMLにコードをはる

 

デザインCSSの設定が終わったら、後は楽です!!

初心者の皆様、ここまで大変だったと思います。

私も大変でした。。

 

この後は実際にブログで書いてみましょう♬

 

ブログ記事編集のHTMLに下記のコードを貼ります。

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

 

その前に、HTMLコードの説明をしていきます!

 

✱︎上記のHTMLコードにある『 l-fuki 』の『 l 』は、棒でも数字の1でもなくLの小文字です。

left(左)の 『 l 』ですね。

これは左側に吹き出しが出るという意味(アイコンは右)

ですので右側(right)に吹き出しを出したい(アイコンは左)場合は『 l 』を『 r 』に書き換えましょう。

 

✱︎また、何度も言っているので『もう分かってるよ!』ってお思いかとは思いますがクラス名はキャラクターの名前。

私のキャラクターで言ったらnekoとかkumaですね。

ここで何のキャラクターが出てくるか決まります。

スペルを一時間違えただけでアイコンの中身が空白(誰もいないー!)なんて事になるので注意が必要です。実際に私、何度かやってます!

 

ですのでクラス名は忘れないようにメモをしておくようにしてください。

 

✱︎『テキスト』は会話で表示させたい文章を打ち込みます。もちろんここは日本語で、普通にブログに書く感じで大丈夫です。

 

 

吹き出し完成!

 

HTMLにコードを貼った後はプレビューで確認してみましょう☻

 

ちゃんと貼り付けられましたね!

私はレスポンシブデザインなのでPCもスマホも同じように表示されています。

 

会話風の記事が出来た時、感動しました!

しかし疲れた。

f:id:mlc510:20190614220740j:image

 

これはバリ島でガイドさんと会話していた時の記事。

会話の様子をブログで書く時は、見やすくて可愛く読みやすいですよね♬

 

 

レスポンシブではない場合

 

ちなみにレスポンシブではない場合は『デザイン』→『スマートフォン』→『ヘッダ』→タイトル下のHTMLにCSSを記述するそうです。

< style >  < /style >でコードを囲うそうなのですが、その時のCSSコードはSHIROMAGさんの記事内にありますのでそちらからコピー、参考にしてください。

 

 

注意点

 

吹き出しの中で改行する場合『Enter』キーをクリックして改行してはいけないそうです。

吹き出し内で改行する場合は『Shift + Enter』でするようにしてください。

 

 

最後に

 

いかがでしたか?

吹き出しで会話形式に記事を作る方法を、私のような超初心者でも分かるように補足しながら書いていきました!

もう、本当〜に疲れました。

やり終わってみると、どうって事なかったのですが始める時に説明記事を読みながら理解していくのが大変!

 

でも、たった一度だけ大変な思いをしておけば、後は毎回可愛い吹き出し形式のブログが書けて楽しいです!

ブログも華やかになりますよ☻

 

やりたくても重い腰が上げられない方、一度試してみてはいかがでしょうか?

 

 

 

はてなブログの方は読者登録お願いします 

こちらの記事もあわせてどうぞ♬

www.trip-cafe510.com

 

www.trip-cafe510.com