blanc note. 吹き出しの色を変える方法WordPressテーマのカスタマイズ

こんにちは、るこです。

blanc note.を使ってくださっている諭吉さんからこんな質問をいただきました。

そういえば、吹き出しって、カスタマイザーからの色変更に対応していないんですよね。
アクセントカラーかサブカラーと統一させるのもいいかと思いましたが、ご自分でお色を変えたいことも多いかと思いましたので、チップを残します。

blanc note.で使っている吹き出しのHTML

るこるこ
ショートコードを入れると表示される仕組みですが、ソースはこんなhtmlになっています。

CSS

cssで背景色と三角の吹き出しマークをつけています

上のCSSでいうと「#FFF3DB」となっている箇所が、吹き出しの色を指定している箇所です。

すべてのCSSをコピペして書き直しても色は変わります。
ですが、すべてコピペすると長くなってしまうため、色だけ上書きしましょう。

吹き出しの色だけ上書きする

テーマをそのままお使いいただいている場合は、カスタマイザー>カスタムCSSに、
子テーマをお使いなら子テーマのstyle.css またはカスタマイザーのカスタムCSSに、下記のCSSをコピペします。

#efefefは明るいグレーですので、グレーの吹き出しに変わります。

お気軽におためしくださいませ。
ご質問をくださった、諭吉さん、ありがとうございました!!

WordPressではじめるWEBの仕組みづくり7日間メール講座

オトナ女子にピッタリ!ブログ運営に集中できるWordPressテーマプレゼント
  • 「@luelue.com」というドメインからメールが届きます。あらかじめフォルダ分け設定を行って頂きますようお願い致します。
      Yahoo、hotmailなどのフリーメールアドレスでは受信できない場合がありますので、プロバイダーメールアドレスを推奨いたします。
  • メールアドレスは個人情報の観点より、プライバシーを遵守しております。
  • 本メール講座及びメールマガジンは利益の保証や損失の補填を行うものではなく、効果には個人差があります。
  • いつでも解除可能です。

Pickup Article同じカテゴリーの記事

ブログ一覧へ戻る