ブロックエディタ対応の吹き出しを作るプラグイン「LIQUID SPEECH BALLOON」をデザインカスタマイズしてみる

ブロックエディタ対応の吹き出しを作るプラグイン「LIQUID SPEECH BALLOON」をデザインカスタマイズしてみる

ブロックエディタに対応している吹き出しを作るプラグイン「LIQUID SPEECH BALLOON」を、スタイルシートを用いてデザインを変更してみましょう。
色が違うだけでもずいぶん印象が違いますよ。
吹き出しのタイプは全部で6種類ありますが、同じclassを使用しているので、「標準の時はこれ」「バブルの時はこれ」というのはできませんが、統一感が出て良いというメリットもあります。
左右どちらにアバターがいても対応できますので、ぜひご参考にしてください。

まずはデフォルトの状態の6種類は以下の通りです。

スタイルシートを開く

FTPツールを持っていらっしゃる方は該当テーマ（子テーマが望ましい）のstyle.cssを開きましょう。
FTPツールがわからない方はワードプレス管理画面＞外観＞テーマファイルエディター（テーマエディター）を開くと、style.cssが表示されます。（子テーマがある場合、子テーマのstyle.cssか確認してから行いましょう。
ブラウザのタブを2つ用意して、上記のエディター画面と公開画面とで見比べるとやりやすいです。

背景色を変更する

色番号を調べる時の方法1：無料サイトを使う

さて、ここでフォトショップなどをあまり使わない方はcssの「アバターに伸びているチョン」にある「rgba(229, 182, 182, 1)」が「吹き出し本体の背景色」の2行目「#e5b6b6」と同じ色と特定するので挫折しそうですね。
無料のサイトがありますので、まずはどの色が良いか決めてからRGBの数値を調べてみてください。
RGBと16進数カラーコードの相互変換ツール
赤、青、黄色のバーを動かすと色が変わりますので、お好みの色になったら#から始まる6桁の数字を「//吹き出し本体の背景色」の「background-color:」の後に差し替えます。
次にR、G、Bそれぞれの数値を「//アバターに伸びているチョン」の「rgba(229, 182, 182, 1)」に入れてください。最後の1は透過するかどうかです。今は1なので透明度0ですが、色によって0.5や0.2など調整してみてください。

色番号を調べる時の方法1：Chromeの検証を使う

こちらの方が慣れたら早いですし、実際にスタイルシートを変更していなくても検証画面内で変更して仕上がりを確認する事ができるのでお勧めです。
まずスタイルを変更したい箇所で右クリック、一番下の検証をクリックします。

Dev Toolが開かれます。ちょうど右クリックしたところのHTMLが色が変わっていて、さらに右にボーダーの色設定が見れます。

現在の色の四角をクリックしましょう。

するとR,G,Bそれぞれの数値が取得できます。
色の丸い部分をクリックするとそれぞれの数値がコピーできます。
違う色にしたい場合、特に決まっていない時は上のカラーピッカーを動かすと、検証をしているブラウザ画面も連動して色が変わります。

吹き出し本体の枠線のカスタマイズ

標準、バブル、シャドウの吹き出し

標準、バブル、シャドウは同じボーダー設定をしていますので、この3つでおかしなことにならないように変更していきましょう。
スタイルシートに下記を追記します。

吹き出し四角の枠色変更

こちらもRGBでの記述になりますので、上記で紹介したツールを使って自分が設定したい色の数値にさしかえてください。
線の太さを太くしたい場合は下記の「2px」の数値を大きくしてください。

吹き出し破線の枠色変更

「dashed」にする事で破線になります。

色や線、背景に柄を付けるだけでかなり印象が変わる「LIQUID SPEECH BALLOON」

今回はさわりの部分のみでした。
お使いのテーマに併せて色変更をしてみてはいかがでしょうか。