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

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

この疑問を解決します。

 

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

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

 

が…

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

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

 

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

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

f:id:lifeishappy_right:20201226162707j:plain

 

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

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

 
作業

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

✔ PC版:吹き出し用CSSの設定(コピペで簡単)

✔ スマホ版:吹き出し用CSSの設定(コピペで簡単)

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

 

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

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

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

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

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

参考:Iconpon - 高品質な無料(フリー)の顔アイコン素材

 

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

こんにちは

こんにちは

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

 

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

 

STEP1:Hatena Fotolife
 

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

f:id:lifeishappy_right:20201011173513p:plain

 

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

f:id:lifeishappy_right:20201011173705p:plain

 

STEP2:画像アップロード
 

f:id:lifeishappy_right:20201225213727p:plain

 

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

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

 

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

f:id:lifeishappy_right:20201225214250p:plain

MEMO

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

 

PC版:吹き出し用CSSの設定(コピペで簡単)

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

注意

PCとスマホでは見え方が違います。スマホ版の設定は次項目を参照してください。

 

STEP1: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」に貼付

 

f:id:lifeishappy_right:20201011181933p:plain

 

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

 

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

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

 

STEP2:はてなブログへCSS設置
 

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

 

< ダッシュボード → デザイン → カスタマイズ → {}デザインCSS >

f:id:lifeishappy_right:20201011182759p:plain

 

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

 

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

 

スマホ版::吹き出し用CSSの設定(コピペで簡単)

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

<style>

この中にCSS

</style>

 

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

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

f:id:lifeishappy_right:20201012092844p:plain

 

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

 

吹き出し使用方法

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

 

ブログ編集画面で「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を使用しているブログばかりでした。

 

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

 

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