WordPressテーマSANGOの質問

Gutenbergプラグイン導入で、吹き出しの画像サイズがおかしくなりました

アバター
yoshi

テーマもプラグインも最新版です。

PCやタブレットで見たときにも、吹き出しの画像が80×80で表示されてしまいます。
また、そのために、名前との間に大きな空間が空いてしまいます。

プラグイン利用時も、以前のように110×110で表示されるよう、
ご対応いただけましたら幸いです。
よろしくお願いします。

SANGO Gutenbergプラグイン問題の報告や要望
コメントへの回答
サルワカくん
サルワカくん
2019/03/22

Gutenbergの吹き出しブロックと、ショートコードによる吹き出しはお互いに対するCSSが影響を及ぼさないように、それぞれ別のCSSがあてられています。
SANGO Gutenbergプラグインを入れることで吹き出しショートコードのサイズが崩れることはないはずですが、もしそのような問題が生じている場合、想定されている挙動ではないため、問題が生じているページのURLを教えていただけますと幸いです(こちらでは再現できていないため…)。

それともGutenbergエディターを使った場合にも吹き出しのサイズをショートコードと合わせたい、ということでしょうか。
その場合、下記のCSSを子テーマのstyle.cssもしくはカスタマイザーの追加CSSに貼り付けることでサイズをショートコードと同じにすることができます(ブラウザのキャッシュの削除が必要です)。

@media only screen and (min-width: 481px) {
  .sgb-block-say-avatar {
    width: 110px;
  }
  .sgb-block-say-text {
    padding-left: 115px;
  }
}

ご確認よろしくお願いします。

アバター
yoshii
2019/03/23

さっそくありがとうございます! 
公開前のサイトで、URLをお知らせできません。

まず、「名前との間に大きな空間が空いてしまう」につきましては、
子テーマのCSS上に不必要な記述が残っており、私の設定ミスでした。大変失礼しました。

返信をいただいて気がつきましたが、
「Gutenbergエディターを使った場合にも吹き出しのサイズをショートコードと合わせたい、ということでしょうか」
とありますので、
もしかするとGutenberg導入前より小さいアイコンが表示されるのが仕様だったのかもしれません。

いずれにせよ、いただいたCSSの記述を子テーマにコピペして微調整することで、導入前と同じように表示することができました。ありがとうございました。

当方のCSSの方の問題である可能性もありますので、他のユーザーの方をまどわせないよう、本質問は削除していただいた方が良いかもしれません。ご判断よろしくお願いします。

サルワカくん
サルワカくん
2019/03/23

詳しい説明ありがとうございます。
問題が解消できたようで安心いたしました。
他の方の参考になるかもしれないので残させていただくことにします。
今後ともよろしくお願いします。

アバター
mika
2021/10/12

上記の説明をみて、吹き出しの大きさを大きくしました。左吹き出しのコメントはかぶりませんが、右吹き出しのコメントは、画像に被ってしまうので、対応方法を教えてください。よろしくお願いします。

サルワカくん
サルワカくん
2021/10/12

お世話になっております。
以下のようにCSSを追加してみてください。
よろしくお願いします。


@media only screen and (min-width: 481px) {
.sgb-block-say--right .sgb-block-say-text {
padding-right: 115px;
padding-left: 0;
}
}