【Cocoon】ブログカードのラベル色カスタマイズ方法【WordPress】

ブログカードの「あわせて読みたい」や「関連記事」のラベル色を変えることが出来なかったので、色々と調べました。

備忘録的な記事となっていますが、この記事では、

をご紹介します。

前提として、CSSの知識がある方向けの記事となっております。

その他、カスタマイズの参考にさせて頂いたサイト集は下記の記事からご覧ください。

ブログカードのラベル色とは？

上の画像の通り、ブログカードの左上に表示される「参考記事」や「関連記事」、「あわせて読みたい」などのラベル部分の事です。

カスタマイズCSS

ブログカードのラベル背景色、ラベル文字色のカスタマイズCSSコードです。

外観＞テーマエディターのCSSにコピペするだけで変更されます。

/*ブログカード ラベル背景色カスタマイズ*/
.blogcard-label::after {
color: #ffffff; /*ラベル文字色*/
}
.blogcard-label.internal-blogcard-label {
background-color: #000000; /*内部リンクのラベル背景色*/
}
.blogcard-label.external-blogcard-label {
background-color: #000000; /*外部リンクのラベル背景色*/
}

• 内部リンクのラベル背景色：自分のブログ内記事へリンクするブログカードのラベル背景色
• 外部リンクのラベル背景色：外部サイトへのリンクを行うブログカードのラベル背景色。「参考リンク」と表示されるラベルを変更。

このコードで上手く行かない場合、他の部分の記述でコードが上書きされている可能性が高いです。

自分で見つけられる方はその部分をコメントアウトすれば、適用されると思います。

どこか分からない方は、強制的に変更する↓のコードを使ってみて下さい。

/*ブログカード ラベル背景色カスタマイズ*/
.blogcard-label::after {
color: #ffffff !important; /*ラベル文字色*/
}
.blogcard-label.internal-blogcard-label {
background-color: #000000 !important; /*内部リンクのラベル背景色*/
}
.blogcard-label.external-blogcard-label {
background-color: #000000 !important; /*外部リンクのラベル背景色*/
}

※カスタマイズをする際は、自己責任でお願いいたします。

感想

いろんなカスタマイズサイトさんを参考にしていたのですが、ブログカードのラベル背景色だけどうしても変えることが出来ませんでした。

今回、勉強になった事がたくさんあるので、全コピペだけでブログカード全体のカスタマイズが出来るようなCSSを配布出来たらいいなと思います。

ここまで読んで頂きありがとうございました。

参考になれば幸いです。

お問い合わせは、Twitter(@_pyonlog)に頂けると早くお返事出来ると思います。