こんにちは、ハナです。
何かと便利なブログカード、Cocoonのブログカードには10種類のラベルを設定することが出来ます。
デフォルトでは、ラベルの色が黒に設定されています。
もっとカラフルにしたいと思うあなたに！
色を変えてみたいと思います。
ブログカード作成
ブロックに追加 ⇒ Cocoon ブロック ⇒ ブログカードをクリックします。
このように表示されます。
ブログカードとして表示させたいURLを入力します。
右側、スタイル設定のラベルから使用したいラベルを選びます。
するとこのように表示されます。
ブログカードのラベルの色変更
Cocoon フォーラムに「わいひら」さんは書かれています。
CSSセレクタを以下のように変更すると、背景色を変更できるかと思います。
Cocoon フォーラム
.blogcard-type .blogcard-label{
background-color:#ff8c00;
}このように表示されます。
ラベルそれぞれ別々の色にしたい
10種類のラベルがあるのなら、せっかくなので別々の色にしたいと思いませんか？
表示例とcssです、色はご自分で好きな色に変更してお使いください。
/*関連記事*/
.bct-related .blogcard-label{
background-color:#993300;
}/*参考記事*/
.bct-reference .blogcard-label{
background-color:#21873a;
}/*参考リンク*/
.bct-reference-link .blogcard-label {
background-color: #c1c1c1;
}/*人気記事*/
.bct-popular .blogcard-label {
background-color: #ef4056;
}/*あわせて読みたい*/
.bct-together .blogcard-label{
background-color:#ff8c00;
}/*詳細はこちら*/
.bct-detail .blogcard-label{
background-color:#4467b0;
/*チェック*/
.bct-check .blogcard-label{
background-color:#1da1f2;
}/*ピックアップ*/
.bct-pickup .blogcard-label{
background-color:#00a300;
}/*公式サイト*/
.bct-official .blogcard-label{
background-color:#33333;
}/*ダウンロード*/
.bct-dl .blogcard-label{
background-color:#21873a;
}ラベルそれぞれの色css一覧
/*関連記事*/
.bct-related .blogcard-label{
background-color:#993300;
}
/*参考記事*/
.bct-reference .blogcard-label{
background-color:#21873a;
}
/*参考リンク*/
.bct-reference-link .blogcard-label {
background-color: #c1c1c1;
}
/*人気記事*/
.bct-popular .blogcard-label {
background-color: #ef4056;
}
/*あわせて読みたい*/
.bct-together .blogcard-label{
background-color:#ff8c00;
}
/*詳細はこちら*/
.bct-detail .blogcard-label{
background-color:#4467b0;
}
/*チェック*/
.bct-check .blogcard-label{
background-color:#1da1f2;
}
/*ピックアップ*/
.bct-pickup .blogcard-label{
background-color:#00a300;
}
/*公式サイト*/
.bct-official .blogcard-label{
background-color:#33333;
}
/*ダウンロード*/
.bct-dl .blogcard-label{
background-color:#21873a;
}まとめ
訪問していただいたあなたに、より多くの記事を読んでもらいたいのは皆さん同じ思いだと思います。
ブログカードを他のページへの誘導に活用したいです、ラベルをカラフルにすることで、あなたの目にとまり1分でも長くこのブログを楽しんでもらえますように！
