ブログの吹き出し会話をCSSで実装してみる

まずは顔画像の登録

！？ 

んでＣＳＳを編集して......

こんなんでホンマにいけるんかいな

出来てるよ

おおおおおおぉぉぉぉぉすげえ！！！！

意外と簡単だったね

やりかた

基本的にはシロマ (id:shiromatakumi)さんが公開されている方法をそのまま流用しました。

書かれているCSSの内容は、l-fuki要素とr-fuki要素で吹き出しを文字のバックグラウンドに表示させて、設定した画像を左右に配置させてます。

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;
}
}
.クラス名1::after {background-image:url(画像のURL);}
.クラス名2::after {background-image:url(画像のURL);}

それをPタグのクラスで呼び出せるようにしてあるところがヤベえ。

めちゃくちゃ簡単にできます。

CSSを書く所は使っているテンプレで違うよ

ちなみに今ご覧のBloggerは
【テーマ】→【カスタマイズ】→【上級者向け】→【CSSを追加】
からできます。

いざ！！実装！！

んで、実際に使う場合はちょっとだけHTMLを編集します。

Pタグで囲うだけだから簡単だよ

はい。そうなんです。
ちなみに僕の場合は……
＜p class="r-fuki coco"＞＜/p＞
とか
＜p class="l-fuki ore"＞＜/p＞
で記述してます。

ユーザー辞書に登録しておくとさらに簡単に使えるね！

画像のURLは、最初にこの記事にアップロードした状態のURLを、右クリックで拾ってます。おそらくこの記事を消さない限り、永遠にわたしの自画像は残り続けるでしょう……（遠い目

ちょっと注意したいところ

画像、どれにするかとか悩むよね

ぶっちゃけ下手でもいいから、自分で描くとものすごく楽しいし愛着も沸くからオススメだよ

あと今後の展開を考えるとキャラ増やしまくっていろいろやってみたくなります。（そうなると辞書がとんでもないことになりそうだけど）

でもその都度画像を記事に上げるのも面倒なので、画像とかをクラウド管理しつつ、そこから引っ張ってこれるようにしておくと便利です。

自分の携帯とかパソコンに保存しておくと間違って消しちゃうこともあるからね

そうそう。おかげでこのブログもずいぶんリンク切れが……

なお、Googleのストレージから引っ張ってくるのは意外とオススメできまへん。
こんな風にブログから直接読み込むなら問題ないんだけど、GoogleフォトとかからURLを引っ張ると期限切れでリンクが切れたりするので。

もっと自由にデザインするには

CSSの吹き出しデザインを自分流に変えたいときは、かならず今の設定CSSをまるっとメモにでも保存しておくほうがいいよ。

全部消えたら泣くしかない……

せっかく頑張ったのに消えちゃうとか切なすぎるもんね

CSS（カスケーディングスタイルシート）はすごく奥が深くてかなりややこしい部分が多々あるけど、使いこなせると面白いデザインが沢山作れるようになります。

そろそろWordpress使おうかな

お？ようやくその気になったの？

自分でドメインとってまでする気に中々なれなくてさー

そんなに難しい事じゃないし、高くもないんだからやればいいのに

ま、その話はおいおい……

やらへんのかい！！

参考書籍

独学には限界があるからねえ

終幕

ここまで読んでくれてありがとう

んでは！！！

SeeeeeeeeeYeah!!!

関連記事

・【落合陽一】日本再興戦略を読んだよ！
・
・