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

WordPressテーマ Cocoon

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

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

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

masaa.net

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

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

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

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

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

masaa.net

2021.05.09

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

ここ最近までおすすめカードの下側に空白は出来ていなかったので、おそらく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; /*フォントサイズ*/
  }
}

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

今回の「ウィジェット[C]おすすめカードの修正」によって、「ウィジェット[C]おすすめカード」のスタイルは、次の様になりました。

修正内容としては、問題となっていた空白を無くすと同時に周囲の枠線も無くしました。

最後に

今回のようにWordPressテーマのバージョンアップによって、これまでカスタマイズを行った部分に対し不具合が発生する可能性もあります。

そうした場合は、できるだけ早期に対応していきたいと思いますので、何か不具合等確認されましたらお手数ですがご連絡願います。