WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

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

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

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

ここ最近までおすすめカードの下側に空白は出来ていなかったので、おそらく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]おすすめカード」のスタイルは、次の様になりました。

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

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

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント