単純明快：吹き出しを使って会話形式のブログ作成方法【はてなブログ】

吹き出しってどうすればできるの？

この疑問を解決します。

ブログを日々書く中で、こんな感じ☝で吹き出しを使用して会話形式で記事を書きたいときってありませんか？

私は吹き出しの方法が分からず、ずっと画像で吹き出しを作って貼り付けていました(笑)

が・・・

多くのブロガーさんが吹き出しを使用しているということは、その方法が必ずあるわけなんですよね。

それで調べたところ、はてなブログでも簡単に吹き出しを作成することができたので、その方法を書いていきたいと思います。

作成方法というと難しく聞こえるかもしれませんが、完全なるコピペでできるので、誰でも簡単に作成することが可能です。

 

単純明快：吹き出しを使って会話形式のブログ作成方法【はてなブログ】

 

 

単純明快：吹き出しを使って会話形式のブログ作成方法【はてなブログ】

吹き出しを使って会話形式のブログ：作成方法

やることは簡単で、作業は２つ＋スマホに対応する設定のみとなります。

作業

✔　吹き出しに使用するアイコンの準備・設定

✔　PC版：吹き出し用CSSの設定（コピペで簡単）

✔　スマホ版：吹き出し用CSSの設定（コピペで簡単）

この作業をすれば、いとも簡単に会話形式の記事が書けるようになります。

吹き出しに使用するアイコンの準備・設定

吹き出しに使用するアイコンは、無料でアイコンを作成できるサイトや、もちろん自分の写真でも、ブログに登場させたいお好みの画像を用意します。

私は「イラストAC」をいつも使用しています。

参考：無料イラストなら「イラストAC」

アイコンを作成したい方は「Iconpon」などで作成することも可能ですので、お好みで作成するのもありだと思います。

参考：Iconpon - 高品質な無料（フリー）の顔アイコン素材

ちなみに、私のブログにこの先登場するであろう二人…

こんにちは！

こんにちは！！

主にこの２人とブログを盛り上げていきたいと思っています。

使用するアイコンを決めたら、アイコンを「HatenaFotolife」にアップロードします。

STEP１：Hatena Fotolife

 

ダッシュボード右上にある「Hatena」から「はてなトップページ」に進みます。

はてなトップページのフォトライフアイコンをクリックして、画像アップロード画面に進みます。

STEP２：画像アップロード

 

指示通り、「ファイル選択」か「ドラッグ」で画像をアップロードします。

フォルダ別けをしたい場合は、アップロード前に右横の「オプション」でフォルダの選択をします。

アップロードができたら、「マイフォト」もしくは「フォルダを編集」を確認すると、アップロードした画像が反映されています。

MEMO

CSS設定の際にこのページに戻るので、この画面はそのままにしておきます。

PC版：吹き出し用CSSの設定（コピペで簡単）

下記コードの一番下の赤・青色部分（アイコン画像部分）は、自分の画像に書換が必要になるので、一旦下記コードをコピーしてメモ帳などに貼付して書換え後にはてなブログのCSSに設定をします。

注意

PCとスマホでは見え方が違います。

スマホ版の設定は次項目を確認してください。

STEP１：CSSコピー＆書換

 

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.class-1::after {background-image:url(画像URL);}
.class‐2::after {background-image:url(画像URL);}

class	登場人物の名前 ※吹き出し使用時に毎回使用するので分かりやすいものがオススメ
画像URL	「はてなフォトライフ」にアップロードした画像のURL 画像URL：はてなフォトライフに戻り、使用画像にマウスオーバー、右クリックで「画像アドレスをコピー」して「画像のURL」に貼付

STEP１：CSSコピー＆書換

　.class-1::after {background-image:url(画像URL);}

このコードは「class」と「画像URL」を変更すれば、いくつでも作製可能なので、何人でも登場人物を作成することが可能です。

記事作成時に新たな登場人物が必要な場合は、「.class-1::after {background-image:url(画像URL);}」を追加して、「class」と「画像URL」を書き換えれば追加完了です。

STEP２：はてなブログへCSS設置

 

はてなブログへのCSS設置は、ブログのカスタマイズでお馴染みの「｛｝デザインCSS」に貼り付けするだけです。

＜　ダッシュボード　→　デザイン　→　カスタマイズ　→　｛｝デザインCSS　＞

＜　ダッシュボード　→　デザイン　→　カスタマイズ　→　｛｝デザインCSS　＞

「｛｝デザインCSS」に貼付して「変更を保存する」をクリックしたら、PC版の設定が完了となります。

この状態で終了すると、スマホ版では吹き出しは見えない状態ですので、スマホ版も設定を済ませましょう。

スマホ版：吹き出し用CSSの設定（コピペで簡単）

PC版で使用した上記のCSSを＜style＞と＜/style＞で挟むだけになります。

<style>

この中にCSS

</style>

＜style＞と＜/style＞で挟んだCSSをスマホ版のCSSに設置します。

＜　ダッシュボード　→　デザイン　→　スマホ　→　ヘッダ　→　タイトル下　＞

＜　ダッシュボード　→　デザイン　→　スマホ　→　ヘッダ　→　タイトル下　＞

「タイトル下」に貼付して「変更を保存する」をクリックしたら、スマホ版の設定完了となります。

吹き出しを使って会話形式のブログ：使用方法

吹き出しの準備が整ったので、早速ブログで吹き出しを使用してみましょう。

ブログ編集画面で「HTML編集」にします。

HTML編集画面に「<p class="l-fuki class">テキスト</p>」を貼り付けます。

l-fuki	吹き出し位置 「l-fuki」が左側（left） 「r-fuki」が右側（right）
class	CSS作成時に設定した登場人物の名前
テキスト	会話

吹き出し左

吹き出し右

こんな感じです♪

MEMO

吹き出し部分以外の記事編集は「編集見たまま」で記事の編集が可能です。

吹き出し使用：注意点

吹き出しの中で改行したい場合に、通常通り「Enter」キーで改行しても、おかしな事になるため、「shift」＋「Enter」で改行できるはずなのですが、できない場合はHTML編集画面で「<br />」を使用して改行可能です。

まとめ

今回お世話になったブログがSHIROMA様という方のブログを参考にさせて頂きました。

www.notitle-weblog.com

タイトル通り、吹き出しがとても楽にできるようになりました。

ありがとうございます。

吹き出しを使用したブログは世の中に溢れているんですが、私が見る限りWordPressを使用しているブログばかりでした。

その上、調べようという意欲さえなく、画像貼付けで吹き出しを使っていたんですが、こんなにも簡単にできるなんて、何でもっと早く調べなかったんだろう…と思いました。

今まで画像を貼り付けて作成した記事の吹き出し分に関しては、リライトする際に少しずつ修正して行こうと思います♡