【コピペで使える！】Cocoonブログカードラベルをカスタマイズしてみた

ブログ

2022.04.28 2022.04.04

ゆんpay

こんにちは、ゆんpayです！

このブログはWardPressのテーマ、cocoonを使用しています。
ブログカードのラベル表示カスタマイズについていろいろ試してみたので、備忘録的な感じで記事にしました。

参考にしてもらえれば幸いです。

この記事の目次　

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

ブログカードとは、こういうやつですね。

で、ここで言うラベルは、サムネイル左上のカテゴリー表示ではなく、
これ↓↓↓

ゆんpay

正式名称がわかりません。ラベルでいいのかな？

この部分についてカスタマイズしてみます。

ブログカードのラベルをカスタマイズしてみます。

デフォルトのラベルはこんな感じ

これを変えていきます。
コードをstyle.cssにコピペして使えます。

/* ラベル背景色変更 */
.blogcard-type .blogcard-label{
background-color: #045FB4;/*好きな色 */
}

ブログカードの枠線の色に合わせたり、サイトのイメージカラーに揃えたりすると統一感が出ます。

/* ラベルを右表示*/
.blogcard-type .blogcard-label{
margin-left: 100%;
left:-160px;
}

「left:-160px;」の部分は、文字サイズ等によってちょうどいい値が変わりますので、数値を変えて調整してください。

/* ラベルを右下表示 */
.blogcard-type .blogcard-label{
bottom: 5px;
right: 5px;
top: auto;
left: auto;
}

「bottom」は下からの距離、「right」は右からの距離となります。
お好みの位置になるよう調整してください。

/* ラベルを丸く */
.blogcard-type .blogcard-label{
border-radius:30px;
}

「border-radius」で丸みを調整できます。
数値が大きくなると丸みが強くなるので、お好みで調整してください。

/* ラベル非表示 */
.blogcard-type .blogcard-label{
display: none;
}

ラベルを消すことですっきりとします。

内部ブログカードのラベルのみ変更したいときは、

.blogcard-type .blogcard-label　⇒　.blogcard-type .internal-blogcard-label

外部ブログカードのラベルのみ変更したいときは、

.blogcard-type .blogcard-label　⇒　.blogcard-type .external-blogcard-label

赤字の部分を、それぞれこのように表記変更してください。

内部ブログカードとは、自分のブログURLをリンク先に設定したもの、
外部ブログカードとは、他のサイトURLをリンク先に設定したものです。

ブログカードのラベル部分は小さな要素ではありますが、変えてみるとガラッと見やすさや印象が変わります。

ゆんpay

好きに組み合わせて、お好みの見た目になるようにカスタマイズしてください。