ブログ改修中のため、上手く表示できないことがあるかもしれません。ご了承ください。

【はてなブログ】吹き出しで会話するカスタマイズ【コピペで簡単!】

やぁん?ヤドめで夫婦です。

ブログでよく見る吹き出しでの会話(こんなやつ↓)。

せっかくふたりでブログを書いているんだから・・・

会話っぽい記事も書いてみたい!

ということで、吹き出しで会話するカスタマイズをしました。

コピペで簡単にカスタマイズできるのでぜひやってみてください。

 

ちなみにこの記事はブログ開設初期に書いた記事を大幅に書き直して、再投稿したものです。あまりにもクオリティが低かったので新規記事としました(笑)

f:id:yadomede:20211001135254p:plain

 

吹き出しで会話するまでの手順

まずはじめに、吹き出しで会話するための手順をお伝えします。

  • アイコン画像を用意する
  • デザインCSSにコードを記述する
  • HTML編集モードで記事に書く
  • 定型文に登録すると簡単!

 

手順①:アイコン画像を用意する

当たり前ですが、吹き出しで会話するためにはセリフを発する人物が必要です。

その人物のアイコン画像をまず用意します。(私たちの場合は各所から集めました。)

利用したサイトと作成物

夫ヤドエンペラー

f:id:yadomede:20190922114914p:image

目があんまり開いてない感じ(失礼)が似ています。

僕は目が細いイケメンです(笑)

【クラス名】P
【画像URL】https://cdn-ak.f.st-hatena.com/images/fotolife/y/yadomede/20190922/20190922114914_120.jpg

※このクラス名と画像URLは後ほど使用します
※画像URLは、はてなフォトライフから取得します
(使い方:はてなフォトライフを使う - はてなブログ ヘルプ

 

妻ヤドクイーン

f:id:yadomede:20190922114921p:image

こちらは目がクリッとした感じです。

可愛いでしょ?

【クラス名】Q
【画像URL】https://cdn-ak.f.st-hatena.com/images/fotolife/y/yadomede/20190922/20190922114921.png

 

ちなみに、ふたりともピンク色のかぶりものをしています。

これはヤドンのイメージです。

 

この似顔絵アイコンは、Iconpon かぶりっこメーカーで作成しました。無料です。

 

ヤドン

やぁん?

やぁん?

これらのヤドンはポケモンの公式アカウントが配布していたものを拝借したものです。無料です。

 

疑問に思う人

なぜヤドンは人気なのかしら・・・?

この可愛いイラストは私が描いたのではなく、イラストACよりダウンロードしたものです。無料です。

イラストACでは無料でイラストをダウンロードできるので、ブロガーさんなら誰でも利用しているツールだと思います。

\ イラストACをみてみる /

無料イラスト【イラストAC】

 

手順②:デザインCSSにコードを記述する

アイコンが用意できたら、次は吹き出しを生成するコードを記述します。

以下のコードを「 デザイン >  カスタマイズ > デザイン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;
}
}

/* 吹き出しのアイコン画像 */
.P::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yadomede/20190922/20190922114914_120.jpg);}
.Q::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yadomede/20190922/20190922114921.png);}

/* 吹き出しのCSSここまで */

赤文字は自分で設定するクラス名で、緑文字画像のURLです。

(本ブログの場合は、前述した手順①の部分をご覧ください。)

 

  • クラス名画像のURLはどちらもご自身で適宜変更してください
  • この部分を増やすことで、吹き出し会話ができるアイコンが増えます
  • 我がブログの場合、クラス名はアルファベット1文字にしていますが、好きな文字列に設定することができます。
  • 自分自身が分かりやすいクラス名を設定してください

 

【参考にしたサイト】

 

手順③:HTML編集モードで記事に書く

ここまで準備ができたら、あとは実際に記事に書いていきます。

作りたい吹き出しは、

  • ヤドクイーンが
  • 左側から(=アイコンの右側にセリフがくる)
  • 「ヤドンを愛してる」

と発言するようにします。

 

見たまま編集モードで「ヤドンを愛してる」と書いた場合、HTML編集モードでは<p>ヤドンを愛してる</p>となります。

これを吹き出しにするためには、HTML編集モードで<p class="r-fuki Q">ヤドンを愛してる</p>と記述します。(Qがヤドクイーンのアイコン画像のクラス名です。)

そうすると、

ヤドンを愛してる

というようになり、吹き出しでの発言が完成しました!

 

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

<p class="l-fuki Q">ヤドンを愛してる</p>と記述すると、右側から発言する(=アイコンの左側にセリフがくる)ようになります。

ヤドンを愛してる

 

吹き出しの記述まとめ!

HTML編集モードで、<p class="r-fuki クラス名">セリフの内容</p>

  • アイコンの右側に吹き出し:「r-fuki」
  • アイコンの左側に吹き出し:「l-fuki」

 

手順④:定型文に登録すると簡単!

手順③までで吹き出しでの会話は完成ですが、さいごに一手間かけておくことで、今後の記事作成がグッと楽になります。

それは、定型文に登録すること!!

 

はてなブログの機能で「定型文貼り付け」というものがあります。

※詳しい使い方は、はてなブログの公式ページ(定型文貼り付け機能 )をご確認ください

 

ここに先ほどの「<p class="r-fuki クラス名">セリフの内容</p>」を登録しておけば、今後は貼り付けるだけで吹き出しを作成することができます。

吹き出しにしたいアイコンすべてを定型文に登録してもいいのですが、1つ登録しておくだけで大丈夫です。

なぜなら、貼り付けた後に、必要に応じて変更すればいいからです。

 

我がブログの場合だと、<p class="r-fuki Q">ヤドンを愛してる</p>を定型文に登録しています。

ヤドンを愛してる

 

<p class="r-fuki Q">ヤドンを愛してる</p>rlに変更すれば、

ヤドンを愛してる

 

<p class="r-fuki Q">ヤドンを愛してる</p>>のQPに変更すれば、

ヤドンを愛してる

 

とっても簡単やぁん

 

 

まとめ

吹き出しで会話するカスタマイズ方法のまとめです。

  • アイコン画像を用意する
  • デザインCSSにコードを記述する
  • HTML編集モードで記事に書く
  • 定型文に登録すると簡単!

 

吹き出しの記述まとめ!

HTML編集モードで、<p class="r-fuki クラス名">セリフの内容</p>

  • アイコンの右側に吹き出し:「r-fuki」
  • アイコンの左側に吹き出し:「l-fuki」

※定型文に登録にしておくと楽

 

《ヤドめでブログ》ではヤドンの記事以外に、意外とブログカスタマイズの記事も書いています(笑)

\ 他のカスタマイズ記事 /

よかったらあわせてご覧ください!

 

\ 本ブログははてなブログProで書いています /