CocoonのVer1.2.8.1から追加された囲みブログカード拡張スタイル
なかなか便利そうだなーと思ったので自サイト用に背景色とバッジ表示部分？を変更しました
もしかしたら同じように変更したい人が居るかなーと記事にしておきます
2019/01/17：気になった部分の調整用のコードを追記
拡張スタイルの種類
拡張スタイルは以下の8種類となっています
自分的に使うかなーってスタイルは3，4種類ぐらいかなって感じですね
ビジュアルスタイルで書いてる人は問題ないと思うけど、自分と同じようにテキストで書いている場合
指定クラスをAddQuicktagを使って登録しておくと良いですよ
変更部分セレクタ
全拡張スタイルを同一色にする場合
子テーマ内のstyle.cssへ追記するものはデベロッパーツールを使って確認すると分かりますがこの部分です
.blogcard-type .blogcard::before {
background-color: 色指定;
}このように追加すると全拡張スタイルを同一カラーへ変更することが出来ます
自分は位置を少し移動させたかったのでこの部分にも変更を入れています
/* ブログカード拡張 */
.blogcard-type .blogcard::before {
background-color: #7c7c7c;
padding: 3px .6em 2px;
}拡張スタイルカラーを個別に変更する場合
全ての拡張スタイルを同一色にするのではなく、個別に色の変更をしたい場合は
追記するものが多くなりますが以下のよう書いてあげれば変更できます
ソースコードを開く
/* 関連記事 */
.blogcard-type .bct-related::before {
background-color: 色指定;
}
/* 参考記事 */
.blogcard-type .bct-reference::before {
background-color: 色指定;
}
/* 人気記事 */
.blogcard-type .bct-popular::before {
background-color: 色指定;
}
/* あわせて読みたい */
.blogcard-type .bct-together::before {
background-color: 色指定;
}
/* 詳細はこちら */
.blogcard-type .bct-detail::before {
background-color: 色指定;
}
/* チェック */
.blogcard-type .bct-check::before {
background-color: 色指定;
}
/* ピックアップ */
.blogcard-type .bct-pickup::before {
background-color: 色指定;
}
/* 公式サイト */
.blogcard-type .bct-official::before {
background-color: 色指定;
}多いなぁと思ったら全部を追記するのではなく、自分の必要なものだけ書くと良いと思いますよ
色の指定は自分のサイトに合った色にしましょう＾＾
モバイル
追記：
モバイル端末(特にスマホ)の表示だとタブ部分とスニペット部分が重なり気味だったので調整
ソースコードを開く
@media screen and (min-width: 481px) and (max-width: 600px) {
/***** ブログカード *****/
.ib-right .blogcard-content,
.eb-right .blogcard-content {
margin-top: 5px;
}
}
@media screen and (max-width: 480px) {
/***** ブログカード *****/
.ib-right .blogcard-content,
.eb-right .blogcard-content {
margin-top: 5px;
}
}おわり
バッジを使った追記や関連などを入れることもあったので
ブログカードの状態でこういった事が出来るとただURLがあるだけとは違い、ぱっと見の印象も変わりますね
カードになる分少し高さを取るのでページが長くなるということはありますけどね…
まあ、ここは毎回使うのではなく、その都度どういった形が良いか考えて使う感じになるかな
このカスタマイズは難しいものではないので、使いたいけど黒背景だとちょっと合わないから
色を変えたいなーなんて人は変更してみると良いですよ＾＾
[share]
