やっほー！みんちゃんだよ！
今日は以前から予告してた吹き出し形式のCSSカスタムを導入したからみんなにお知らせしちゃうの！
ついにキャラクターの吹き出し会話形式を導入したよ！
以前からずっとやりたかったキャラクターの吹き出し会話形式をついに導入してみました。
正直な話もっと早くやりたかったんですけど、如何せんこのブログにキャラクターがいなかったので出来なかったんですよね。いくらやりたいからって吹き出しのキャラクターが真っ白って言うのは悲しすぎるじゃないですか…。
導入するときに少し拘った事がありまして、
右に顔がある時と
左に顔がある時で
それぞれ顔の向きを変えてあるんです。
私のアイコンは正面を向いてる絵ではないので、顔の向きを変えないと「どこ向いて喋ってんの！？」って言う状態になっちゃうのです。この状態だと小さくて見にくいとは思いますが、ただ絵を反転させたのではなくて目の下の泣きぼくろの位置をちゃんと調整してるんですよ！
こんな感じだと！
なんか変でしょ？
みんなも導入してみよう！
実際にやってみると一番大変なのはキャラクターの絵を用意する事で、それ以外はめちゃくちゃ簡単でした。
吹き出し会話形式の導入についてはSHIROMA様のブログ「NO TITLE」から以下の記事を参考にさせていただきました。ありがとうございます。
www.notitle-weblog.com
上の記事を参考にしてCSSに記述していきましょう。
吹き出し会話形式のCSSの導入方法
私の場合は以下のようにして記述しました。
あ、ちなみにパソコン版とレスポンシブデザインの人は<style type="text/css"></style>を消してくださいね。
<style type="text/css">
.entry-content .l-fuki,
.entry-content .r-fuki
{
position: relative;
width: 80%;
box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
border-radius: 15px;
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);
transform: rotate(-45deg);
}
.entry-content .r-fuki::before
{
left: -7px;
transform: rotate(135deg);
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;
}
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%;
}
}
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;
}
}
</style>
ここで私が上記のサイトの記事から変えた部分は２箇所。上のコードの中でコメントアウトしているborder-radiusの数値です。
それぞれ分かりやすいようにどの部分に反映されるのかコメントアウトに書いておきました。
この部分の数値を変化させる事で、自分のブログにあった雰囲気に出来るのではないでしょうか。
例えばキャラクター部分の形を正円にしたければborder-radius: 50%;で出来ますし、吹き出し部分の角をもっと鋭くしたい場合はborder-radius: 5px;とかにすればOKです。
ね？ここまでは簡単でしょ？
border-radius以外の数値もいじり方によっては個性を出すことはできますが、その場合他に微調整しなければいけなくなる部分が大量に出てきますので、CSSのカスタムに自信のある人以外は数値をいじるのは止めておいた方がいいです、マジで。
キャラクターの画像をCSSに記述する
次に私のように吹き出しで喋らせたいキャラクターの画像を用意するよ！
私の顔はこんな感じの画像だよ！ちなみに透過PNGなのよ！
キャラクターに使用する画像のURLをメモします。Google Driveやはてなフォトライフ等に自分でアップロードした画像を用意しましょう。著作権が絡みますので、他人の書いた絵やアニメや漫画の画像を無断で使用するのはご法度ですよ。
上記の私の絵の場合はhttps://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225100.pngと言うURLです。
これを使用するキャラクターの数だけ用意します。表情差分などもひとつひとつ画像のURLをメモしましょう。
メモしたらCSSに記述していきます。
記述の方法や画像の命名手法は、いつもお世話になっている漆うしる(id:UrushiUshiru)さんの以下の記事を参考にさせていただきました。ありがとうございます！
www.itjigoku.com
先ほどメモした画像のURLをご用意の上、以下のように記述します。
.クラス名::after {background-image:url(先ほどメモした画像URL);}
これだけだと具体的に分かりにくいという人もいるかもしれないので、以下に私の場合の書き方を載せます。
.mika-komar::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225100.png);}
この場合のクラス名の命名方式は、人物名-表情・顔の向きとなっています。
これを表情と向きの分、全てをCSSに記入していきます。最終的に以下のようになるはずです(これは私の場合ですが)。
<style type="text/css">
.mika-nor::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225104.png);}
.mika-no2r::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225054.png);}
.mika-komar::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225100.png);}
.mika-konr::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225048.png);}
.mika-doyar::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225039.png);}
.mika-okor::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225325.png);}
.mika-nol::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225319.png);}
.mika-no2l::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225308.png);}
.mika-komal::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225314.png);}
.mika-konl::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225726.png);}
.mika-doyal::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225715.png);}
.mika-okol::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/anmin_1990/20181209/20181209225702.png);}
</style>
ここまで来れば準備完了です。次のステップでは実際に記事に吹き出しとキャラクターを登場させてみましょう！
記事中に吹き出しを出してみよう！
記事中に吹き出しを表示させるためには、見たままモードの編集画面では出来ません。HTML編集で書く必要があります。
まずは見たままモードで書いてみます。
こういう文があったとするわね！
これをHTML編集に切り替えてみると
<p>こういう文があったとするわね！</p>
となっていると思います。
この時、吹き出し内に入れて喋らせたい文章を以下のように書き換えてみます。
<p class="l-fuki mika-doyar">こういう文があったとするわね！</p>
書き換えの際に、l-fuki(もしくはr-fuki)と自分で設定したclass名(この場合はmika-doyar)の間に必ず半角スペースを入れて区切るのを忘れないでください。
書き換えた状態でプレビューを見ると
こういう文があったとするわね！
となります。
この時、class名のl-fukiは吹き出しを左側に出す、という意味です。同じく吹き出しを右側に出したい場合はr-fukiを使用します。
<p class="r-fuki mika-doyal">こういう文があったとするわね！</p>
こうすることで右側に吹き出し、左側にキャラクターといった構図になります。
こういう文があったとするわね！
これで吹き出し会話形式の導入は終了です。
おわりに
結構説明するのって疲れるのよねー
何せ実際に表示される内容を確認しつつ記事を書いているので、いつもの倍くらい時間がかかっちゃいました。ｺﾞﾐﾝﾆｯ!
私の場合はそもそもまだキャラクターが一人しかいないのでこれくらいで済みましたが、複数のキャラクターをお持ちのブロガーさんたちは大変だろうなぁと改めて尊敬しました。いやぁ本当に凄いです。
この記事を書いていて気づいたんですが、みんちゃんの顔のレパートリーに笑顔がないことに気がつきました。これではさすがに可哀想なので、近日中に表情差分をさらに追加しようと思っています。できれば年内に！
それとですね、今まで執筆してきた記事もこれから少しづつリライトしてみんちゃんを登場させていこうかと思います。皆さん楽しみに待っててくださいね！
ではでは、今日はこの辺で！
またね、ばいばい！
