Word Balloonはお使いのテーマやプラグインの影響によって、表示が崩れる事があります。

現存するテーマやプラグインは無数にあり、その全てに対応するのは至難の業です。

全てに対応するには、ゴリゴリにスタイルシートを書く必要があり、それを行うとスタイルシートのサイズ肥大に繋がり、重くなる原因ともなるので、制作者サイドの意向としては最低限で済ませたいです。

例えばこんなスタイルシートの影響を受けます。

これを下記の様に:not()で否定して対応します。

あくまで例ですので、『.content』の部分は、名称は異なる事もあります。
記事部分をdivタグで囲っているクラスの名称の一例です。

テーマやプラグインによっては様々な指定方法をされています。
記事内のクラス○○ divの指定だと影響を受ける可能性大です。

Word Balloonで影響が出るDIVタグには、ほぼ全てクラスに

IMGタグには全てクラスに

テーマやプラグイン特有のスタイルシートが適応されてしまう場合は、:not()を追記する等してご対応ください。

以下、過去に依頼され、解決した事例を掲載します。

但しそれぞれのテーマやプラグインが今後バージョンアップし、変更される場合もあります。
あくまでも解決した時点での事例ですので、今後永久に保証する物ではありません。

テーマ

THE THOR

the-thorディレクトリ直下のstyle.min.cssを修正します。

この中にある

.content div,.content p{margin-top:2rem}

上記コードを下記の様に書き換えます。

.content div:not(.w_b_div),.content p{margin-top:2rem}

さらに下記コードを一番最後に追記します。

.content div:first-child {
    margin-top: 0;
}

親テーマのスタイルシートを修正することになるので、親テーマのバージョンアップ毎に再修正する必要があります。

多少コードが長くなっても良ければ、子テーマへ追記するだけで、済ます方法もあります。
下記コードになります。

.content div {
    margin-top: 0;
}
.content div:not(.w_b_div) {
    margin-top: 2rem;
}
.content div:first-child {
    margin-top: 0;
}

この方法なら親テーマのアップデートに左右されずに済みます。
但し親テーマ側でmargin-topの指定数値が変わった場合はそれに応じて変更する必要があります。

AFFINGER5

アニメーション(インビュー機能)を使用時に、モバイル端末からのアクセスでは横揺れが発生します。
以下のコードを追記してみてください。

#content-w{
    overflow-x: hidden;
}

Cocoon

アバター画像に枠線が入ってしまいます。

下記コードを追記で解決できました。

img.w_b_img{
    border: none;
}

アニメーション(インビュー機能)を使用時に、モバイル端末からのアクセスでは横揺れが発生します。
以下のコードを追記してみてください。

.entry-content{
    overflow-x: hidden;
}

JIN

pタグをpaddingで調整している仕様なので、吹き出し内にpタグが入った場合、余分な空白が出来ます。

下記コードを追記で解決できました。

.w_b_bal p{
    padding: 0;
}

LION MEDIA

アニメーション(インビュー機能)を使用時に、モバイル端末からのアクセスでは横揺れが発生します。
以下のコードを追記してみてください。

.content{
    overflow-x: hidden;
}