【WordPress】CSSで吹き出し会話【Speech Bubble不使用】

 

近ごろのブログって、みんな「吹き出し」機能使ってますよね。


ということで(?)、うちのブログにも吹き出し機能を追加しました。これで「会話」をすることで、記事に手軽にビジュアルを加えられるし、内容もわかりやすくもなると。

 

 

ヒトデン

キミさ、会話って結局ひとりごとでしょ?

 


うるせぇなぶっ飛ばすぞ

 

 

以下、導入と軽いカスタマイズをメモがてら書いていきます。

 

スポンサーリンク

参考記事

 

参考にさせて頂いた記事

WordPressで会話風の画像とテキストをコピペで簡単表示! – Fantastech(ファンタステック)
以前、普通のテキストを会話風の吹き出しにする方法について書きました。 (吹き出しになる仕組みについて知りたい方はぜひ読んでみてください) 今回は、この吹き出しをWordPressのブログで多用する方法についてご紹介します。 関連新エディターのGutenbergで吹き出しを使う方法はこちらの記事をご覧くだ...

 

↑基本的にこちらの記事を参考にさせて頂きました。CSSのコード自体はこちらをご参考ください。今から書く内容は、上記事の個人的な補足になります。

 

 


ヒトデン

上の記事すごくわかりやすいね! キミの記事いらなくない?

 


おまえの名前、雑だな。個人的にちょっと困ったことがあったからメモしておきたいんだよ。

 

 

プラグイン「Speech Bubble」は不使用

 

WordPressの吹き出しプラグインといえば「Speech Bubble」が有名ですが、自分は使わないことにしました。


「Speech Bubble」は画像の管理がやや面倒なんですよね。いちいち画像をFTPソフトとかでサーバーにアップロードして、名前を設定して────みたいな感じで。


この点、CSSのみで完結している吹き出し機能は、画像もそのつど記事内で設定できるんで非常にラクチンです。

 

 

カスタマイズ

 

元のコード自体は参考記事をどうぞ。


なお自分は、元コードをいちいち修正するのが面倒だったので、CSSの下の方に追記してムリヤリ上書きしています(CSS優先の法則でそれでも適応される)。「いや自分は綺麗なコードが書きたいんだ」という方は、元コードから該当箇所を探し出し、適宜修正してください。

 

 

吹き出しの「◀(三角)」の対処

 

.balloon-text-right, .balloon-text-left{
border: 0px solid; /* 本文の枠線 */
background-color: rgba(255,255,255,0.15); /* 本文の背景色 */
}
.balloon-text-right:before{
border-right: 10px solid rgba(255,255,255,0.15); /* 後ろの右吹き出し三角 */
}
.balloon-text-left:before{
border-left: 10px solid rgba(255,255,255,0.15); /* 後ろの左吹き出し三角 */
}
.balloon-text-right:after{
border-right: transparen; /* 手前の右吹き出し三角 */
}
.balloon-text-left:after{
border-left: transparent; /* 手前の左吹き出し三角 */
}

 

このブログは「半透明の黒背景」っていう厄介なデザインをしているので、白背景前提のCSSコードを改変する必要があるんですよね。


上のコードの内容としては、

 

  • 吹き出し枠を0pxにして消去
  • 背景色をrgba(255,255,255,0.15)で半透明に(#○○○○○○も可)
  • 吹き出しの◀(三角)のafter要素をtransparentで隠す
  • 吹き出しの◀(三角)のbefore要素を背景色と同じに
  • 左右の吹き出し両方に同じ設定

 

といった感じになっています。

 

三角CSSは↓のようなジェネレーターでも作れます

CSS三角形作成ツール
CSS三角形作成ツール - CSSのみで三角形を描く

 

 

「考え事風」の対処

 


ヒトデン

やがてこの星も我々の支配下に堕ちるだろう

 

figure.balloon-image-left{
margin-right:25px; /* 左吹き出し画像の右余白 */
}
figure.balloon-image-right{
margin-left:25px; /* 右吹き出し画像の左余白 */
}

「考え事風」を表現する「●(丸)」の位置が気になったので、まず左右のマージンを調整しました。

 

.think .balloon-text-right:before, .think .balloon-text-left:before{
border: 0px solid; /* 右吹き出しの丸の枠線 */
background-color: rgba(255,255,255,0.30); /* 右吹き出しの丸の背景色 */
}
.think .balloon-text-right:after, .think .balloon-text-left:after{
border: 0px solid; /* 左吹き出しの丸の枠線 */
background-color: rgba(255,255,255,0.30); /* 左吹き出しの丸の背景色 */
}

あとは●部分の背景色を半透明にして完了。(見やすくするために◀より若干だけ明るくしてます)

 

 

まとめ

 


ヒトデン

吹き出しって便利だね!

 

今回は以上です。良き吹き出しライフを────ではまたφ(・ω・ )

 

スポンサーリンク
タイトルとURLをコピーしました