WordPressテーマSANGOの質問

吹き出しブロックのアイコンの大きさを変更したい

アバター
望月凛乃介

素人質問で申し訳ありません。吹き出しの丸い円の大きさを変えたくて質問します。https://saruwakakun.com/sango/comments?id=84の質問にもありましたが、
外観→テーマエディターから子テーマのスタイルシートの下に以下のCSSを追加しました。

@media only screen and (min-width: 481px) {
.faceicon {
width: 500px;
}
.chatting {
width: calc(100% – 400px);
}
}/*END min481px*/

これは元々の100pxをわざと500と400に変えてみたのですが、変化が見られません。数字を小さくしても同じです。ブラウザのキャッシュもクリアしています。
何か根本的に間違っているのか、その後に何か処理をしなければいけないのかが分かりません。ご教授いただけないでしょうか。
よろしくお願いいたします。

SANGO
質問板アーカイブ
コメントへの回答
サルワカくん
サルワカくん
2019/12/20

お世話になっております。
そちらのコメントでは吹き出しショートコードをカスタマイズする方法が書かれており、
Gutenbergの吹き出しブロックのアイコンサイズを変更する方法は別になります。

吹き出しブロックしアイコンのサイズを変更するためには、以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS]に貼り付ければOKです。
(サイズの変更はエディター上では反映されないことをご理解いただけると幸いです)

/* 481px以上の幅のスクリーンで適用されるスタイル */
@media only screen and (min-width: 481px) {
  .sgb-block-say-avatar {
    width: 100px; /* 吹き出しの幅 */
  }
  .sgb-block-say-text {
    padding-left: 130px; /* 上の吹き出しの幅 + 30pxくらいにするのがおすすめ */
  }
  .sgb-block-say--right .sgb-block-say-text {
    padding-right: 130px; /* 上の数字と合わせる */
  }
}/* END 481px以上の幅のスクリーンで適用されるスタイル */

よろしくお願いします。

アバター
望月凛乃介
2019/12/21

お世話になっております。
https://saruwakakun.com/sango/comments?id=5733で質問した者です。
無事に大きさを変更することができました。
お忙しいなか、ご対応ありがとうございました。

サルワカくん
サルワカくん
2019/12/21

いいえ、わかりづらくて失礼しました。
ご報告ありがとうございました。

アバター
麗ら
2021/07/07

サルワカくん。
何度も質問で申し訳ありません。
タイトルについてです。
サルワカくんの返答を参考にCSSコードを貼り付け、公開を押し、アイコンと文章の余白が広がりました。
と、思いきや、アイコン上の文章直していたらまた元に戻ってしまいました。
(アイコンの名前と下の文章がかぶっている状態)
これはどうしてでしょう??

サルワカくん
サルワカくん
2021/07/07

お世話になっております。
該当のページのURLを教えていただけないでしょうか?
よろしくお願いします。