blanc note. 吹き出しの色を変える方法

CSS素材

こんにちは、るこです。

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

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

スポンサーリンク

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

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

CSS

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

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

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

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

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

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

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

スポンサーリンク

メルマガはじめました

WordPressでのブログ運営に興味のあるあなたへ♡

プチマガでは、井戸端会議のおばさん風味の軽〜いノリで、
「今週のblanc note.(WordPress無料テーマblanc noteのアップデート情報)」
「\これであなたも耳年増/ブログよもやまばなし」
「メルマガっておいしいの?」
など、ゆる〜〜く発信しています。

メンバー特典 blanc note.のテンプレートも鋭意開発中。 ほぼ週1配信です〜。

ご登録はこちらから

ご登録はお名前(ハンドルネームOK)とメールアドレスのみ。
フォームへ入力後、仮登録のメールが届きます。
メール内の「リンク」をクリックすると登録完了です。
フリーランスママデザイナー るこ

コンピューターは道具だよ。息を吸うみたいに、手足のように、使っちゃおう!
幼少期から自分自身が目立つことが苦手で「写真を撮られると魂が抜ける〜!」と、逃げ回ってました。
そんなこんなで、ただいま、顔を出さずにどこまで信頼度を得られるか、実験中です!
あっ、作品が目立つのは大歓迎!(笑)

CSS素材

この記事がお気に召したら……

最新情報をお届けします