【Cocoon】ブログカードのラベルの色を変更する方法

WordPress-Cocoon-ブログカードの色を変更する方法
2023.02.21
この記事は約2分で読めます。

とても便利で、利用頻度も高いブログカード。

ブログカードのラベルはデフォルトではサイトキーカラーが適用されています。

でも、サイトカラーは薄い色を指定しているので、文字が見にくい…。

※これは画像です

今回はこのラベルの色を変更する方法をご紹介します。

WordPressのテーマ「Cocoon」を使用した場合のカスタマイズです。

ブログカードのラベル色変更

ブログカードのラベルの色を変更するにはCSSを追記する必要があります。

簡単2ステップでカスタマイズできますので、ぜひトライしてカスタマイズを楽しみましょう。

  • STEP1
    CSSをコピー
  • STEP2
    コピーしたコードを貼り付け

WordPressのCSSを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

1．CSSをコピー

まずは、以下のコードをコピーしてください。

CSSコード
.blogcard-type .blogcard-label{
 background-color:white;
 color:#8e775d;
 border: 1px solid #d4af9b;
}
  • background-color：背景色（お好きなカラーコードを入れてください）
  • color：文字色（お好きなカラーコードを入れてください）
  • border：枠線（線の太さは数字を変えてください）

カスタマイズに不要な行は、削除してもかまいません。

2．コピーしたコードを貼り付け

WordPress管理画面から、「外観」>「カスタマイズ」>「追加CSS」を開きます。

コピーしたコードを貼り付けたら、「公開」をクリックしてください。

これで、簡単に色を変更することができました！

※これは画像です。上記のコードを貼付するとこのようになります。

まとめ

ずっとラベルが見にくいのが気になっていたので、色変更したらとても見やすくなりました。

うと
うと

やったー★

コメント