WordPressテーマ「Cocoon」の最近のアップデートで追加された機能が、「ブログカードのラベル」です。
ブログカードが利用できるだけでもうれしいですが、ラベルがあるのであれば使いたい機能ですね。
導入されたてのせいか、もともと機能として追加する気がないのかはわかりませんが、今のところはこのラベルが単色です。
今回はCocoonのブログカードのラベルの色をそれぞれ別の色にしていきたいと思います。
コピペでオッケーなので、お試しあれ！
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
ブログカードラベルとは？
Cocoonのブログカードラベルはこれを指しています。
ブログカードの左上にある「関連記事」というのが今回色を変えるラベルです。
今回はこのブログカードの色を変えていきたいと思います。
子テーマを使用しましょう
カスタマイズをするので子テーマを使いましょう！
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。
Cocoonの子テーマ導入方法はこちらの記事で紹介しています。
コードを公開
今回は以下の通り2通りのコードを公開します。
- ブログカードラベルの色をまとめて変更する方法
- ブログカードラベルの色をそれぞれ個別に変更する方法
ブログカードラベルの色をまとめて変更する方法
Cocoonのブログカードラベルの色を全部まとめて変える場合は、以下のコードをstyle.cssに追記します
.blogcard-type .blogcard::before{
background-color:#ff8c00;
}このようになります
すべてのブログカードラベルの色が変わっています。
ブログカードラベルの色をそれぞれ個別に変更する方法
Cocoonのブログカードラベルの色をそれぞれ個別に変える場合は、以下のコードをstyle.cssに追記します
.bct-related .blogcard::before{/*関連記事*/
background-color:#00008b;
}
.bct-reference .blogcard::before{/*参考記事*/
background-color:#ff8c00;
}
.bct-popular .blogcard::before{/*人気記事*/
background-color:#dc143c;
}
.bct-together .blogcard::before{/*あわせて読みたい*/
background-color:#3cb371;
}
.bct-detail .blogcard::before{/*詳細はこちら*/
background-color:#c71585;
}
.bct-check .blogcard::before{/*チェック*/
background-color:#d2691e;
}
.bct-pickup .blogcard::before{/*ピックアップ*/
background-color:#8b008b;
}
.bct-official .blogcard::before{/*公式サイト*/
background-color:#ffd700;
}このようになります。
まとめ
上記コードのclass名の横に種類をコメントで書いているので、自分好みの色に変更してみて下さい。
コピペで手間なく簡単にできるので、ぜひともお試しください～
コピペも良いですが・・・
Cocoonは高機能で人によってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント