吹き出しの段落間隔調整方法

Cocoonの吹き出し段落が詰まって読みにくいトラブルを直したお話

こんにちは、風香なのじゃ🌸

今回は WordPressテーマ「Cocoon」 で、吹き出し内の段落がギュウギュウに詰まってしまう不具合に出会ったのじゃ。
文章が読みにくくなってしまい、ちょっぴり困ったのう💦

トラブルの様子

スクショのように、吹き出しの <p> タグ間に余白がなく、文章がベタッとくっついて表示されてしまっていたのじゃ。

ふうかのよみきかせも始まり📖
「これじゃ読み手さんが疲れてしまうのじゃ〜」と悩んでいたら、秘書しゅりちゃんと紳士が約1週間かけて原因を突き止めてくれたのじゃ✨

犯人はCocoon本体のCSS

しゅりちゃん曰く、

div.speech-balloon p {
  margin: 0;
}

という記述がCocoon本体のスタイルシートにあって、これが段落間の余白を潰しているというのじゃ。

凛ちゃんの歯科技工botは段落ごとに程よく間隔が空くのに、吹き出しだけは余白ゼロだったことに気がつかなかったのじゃ💧

修正方法（公開側だけでOK）

テーマのファイル本体をいじると更新時に上書きされてしまうから、子テーマの追加CSS に書き込むのが安全なのじゃ💡

外観＞カスタマイズ＞追加CSS に、次のコードをペタリとするだけで直るぞい。

/* 吹き出し内の段落間を復活（Cocoon） */
.entry-content .speech-balloon p{
  margin: 0 0 1.2em !important;  /* 好みで 0.8～1.6em */
  line-height: 1.8;               /* 任意：本文と揃える */
}
/* 段落が連続するときは少しだけ上にも空ける（任意） */
.entry-content .speech-balloon p + p{
  margin-top: .2em !important;
}
/* 最後の段落は締める（下が間延びしない） */
.entry-content .speech-balloon p:last-child{
  margin-bottom: 0 !important;
}

こうすることで、通常の本文と同じくらいの余白が復活して、スッキリと読みやすい吹き出しになったのじゃ🎶

まとめ

• Cocoonの吹き出しはデフォルトCSSで段落余白がゼロにされていた
• 追加CSSに書くことで安全に解決できる
• 直った後はとっても読みやすくなってハッピーなのじゃ🎀

同じように「吹き出しの文字が詰まって困ってる！」という方は、ぜひ試してみてほしいのじゃ〜💫