【Cocoon】ウィジェット[C]おすすめカードの修正

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net|WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、WordPressテーマ Cocoonの「ウィジェット[C]おすすめカードの修正」についてまとめてみました。

WordPressテーマ Cocoon ウィジェット[C]おすすめカード

以前、WordPressテーマ Cocoonの「ウィジェット[C]おすすめカード」のカスタマイズを行いました。

【Cocoon】ウィジェット[C]おすすめカードのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット[C]おすすめカード」のカスタマイズについてまとめてみました。今回のカスタマイズでは、枠線の設定、バックカラーの設定、タイトルのフォント強調の3点について行いました。

特に問題無く作成したつもりだったのですが、気が付くとおすすめカードの下側に空白が出来ていました。

ここ最近までおすすめカードの下側に空白は出来ていなかったので、おそらくWordPressテーマ Cocoonのバージョンアップによって発生したものと思われます。

と言うことで、このままでは不細工なので修正しておくことにします。

なお、「ウィジェット[C]おすすめカード」を【画像のみ】【画像中央に白文字タイトル】【画像中央にラベルでタイトル】に設定している場合この症状は発生しません。

【画像下段を黒背景にしタイトルを重ねる】に設定している場合のみ空白が発生します。

ウィジェット[C]おすすめカードの修正

WordPress Cocoonの「ウィジェット[C]おすすめカードの修正」を行います。

カスタマイズ内容

「スタイルシート(style.css)」を開き、以前カスタマイズを行った【■ウィジェット[C]おすすめカードのカスタマイズ】に部分に対し下記カスタマイズ内容を上書きします。

/************************************
** ■ウィジェット[C]おすすめカードのカスタマイズ
************************************/
.recommended.cf.rcs-large-thumb-on {
/*  border: solid 1px #ff75a7; /*枠線*/
/*  background-color: #fdeef7; /*背景色*/
	margin-bottom: 0;
}
.widget-entry-cards.large-thumb-on .card-content {
  font-weight: 600; /*フォント太さ*/
  font-size: 15px; /*フォントサイズ*/
}
.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .widget-entry-cards.large-thumb-on .card-content {
    font-weight: 600; /*フォント太さ*/
    font-size: 13px; /*フォントサイズ*/
  }
}