【WordPress】「LIQUID SPEECH BALLOON」の余白を消す方法【アルバトロス(ALBATROS)で実践】

こんにちは。ハルです。

プラグイン「LIQUID SPEECH BALLOON」を使用すると、 吹き出しを簡単に作成できます。

「LIQUID SPEECH BALLOON」 サンプル

吹き出し内部の文章に、不自然な改行(余白)が発生することがあります。

今回はこの余白の消し方について、解説いたします。

【結論】「LIQUID SPEECH BALLOON」の余白の消し方

①WordPress管理画面にログイン⇛[ダッシュボード]

②ダッシュボード左タブの[外観]⇛[カスタマイズ]をクリック

③カスタマイズ画面の左タブ[追加CSS]に、以下のコードを入力する

追加するコード

.liquid-speech-balloon-text p { margin: 0; }

コード入力結果

吹き出し内の、余白を消すことができました!

「LIQUID SPEECH BALLOON」の余白の正体

結論から言うと、「すべての文章に適応されるmargin(余白設定)」です。

Google Chromeの「検証」機能を使って確認できます。

  1. Google Chrome で対象のWebサイトを開く
  2. 左クリック⇛[検証]をクリック
  3. 以下画像の左にある、①真下のボタンをクリック

③まで行い、吹き出しにマウスカーソルを合わせます。

すると吹き出しに、margin表記が現れるはずです。(上画像②)

上記のコードを入力することで、

「LIQUID SPEECH BALLOON」の吹き出し(liquid-speech-balloon-text)の

文章(p)における、余白(margin)を0にできました。