Cocoonのおすすめカードのデザインを変更する

ブログテーマの定番機能というと「おすすめカード」です。

私が使用しているほとんどのブログテーマが「おすすめカード」をサポートしています。

前回の記事ではフッターに「おすすめカード」を設置しました。

関連記事Cocoonのフッターを3カラムリッチタイプに変更する

2023.08.13

オススメのページやカテゴリーにユーザーを誘導する効果的なツールです。

しかし、Cocoonのデザインをシンプルに変更してしまうと、「おすすめカード」が、どうにも収まりが悪いということに気づきます。

こればかりは私ももっと使い方があるのではないかと思うのですが、良い解決方法を見つけることができません。

改善途中ですが、とりあえず修正してみました。

当カテゴリーの過去記事は以下から見ていただけます。古い順番から並んでいます。

Cocoonのおすすめカードを設定してみましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「GENESIS」の詳細をTCDのページで見る

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

1 Cocoonのおすすめカードを設定
2 Cocoonのコンテンツをセンターに配置し、おすすめカードの配置関係をテストしてみる
3 Cocoonのおすすめカードの形を変更する
4 まとめ

Cocoonのおすすめカードを設定

まず、「Cocoon」の「おすすめカード」を設定してみましょう。

「おすすめカード」を設定するためには、まず、「おすすめカード」用のメニューを作ります。

メニューの作成は以下のページをご参照ください。

関連記事Cocoonのフッターを3カラムリッチタイプに変更する

2023.08.13

今回設定する「おすすめカード」は、ウィジェットではなく、「Cocoon設定」で設定するものです。

フロントページや投稿ページ、固定ページのヘッド部分に表示されます。

設定は「管理画面」→「Cocoon設定」→「おすすめカード」で行います。

設定してみましょう。

おすすめカードの設定

おすすめカードの表示：フロントぺーじのみ表示
メニューの選択：作成したメニュー名を設定します。
表示スタイル：画像中央にラベルでタイトル
カード余白：おすすめカード毎に余白を設ける
カードエリア左右余白：チェック外す

以下のように表示されました。

なんだかおかしな感じになりました。

シンプルデザインを変更したので、標準の「おすすめカード」が合わなくなりました。

おすすめカードの設定で「カードエリア左右余白」の「おすすめカードエリアの左右に余白を設ける」にチェックを入れてみましょう。

おすすめカードが小さくなりました。

左右に少しだけ飛び出しています。

とても中途半端な感じです。

しかも、コンテンツの幅と合ってもいません。

さらに問題はコンテンツがセンターに配置されていないようです。

まず、コンテンツ領域をセンターに配置してみましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定（絵文字読み込み・コード最適化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Cocoonのコンテンツをセンターに配置し、おすすめカードの配置関係をテストしてみる

センターにコンテンツが配置できない問題は「Cocoon設定」の「カラム」設定にあります。

デフォルトでは「コンテンツ余白幅」が「29」、「サイドバー余白幅」が「19」で設定されています。

これが原因でコンテンツとサイドバーがセンターに配置されないのです。

「サイドバー余白幅」も「29」に設定しましょう。

これでセンター配置になり、左右のかたよりがなくなります。

センター配置になっても、おすすめカードの配置が中途半端なので、よいデザインになりません。

試しに以下のCSSを設定してみましょう。

.rcs-card-margin .recommended-in {
	max-width: 1166px!important; 
}

おすすめカードとコンテンツ幅がそろいました。

これはこれで、いいのかもしれません。

しかし、満足のいくレイアウトではないようです。

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス（事業案内）」
SEO機能（metaタグ、OGP、高速化）他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Cocoonのおすすめカードの形を変更する

「カードエリア左右余白」の「おすすめカードエリアの左右に余白を設ける」のチェックをはずし、少しデザインを変更してみましょう。

CSSで「おすすめカード」にグラデーションを入れてみます。

@media screen and (min-width: 1024px) {
	.notice-area-wrap + .recommended.rcs-center-label-title .card-content {
		background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0), #fff 100%);
	}
	.notice-area-wrap + .recommended.rcs-center-label-title .a-wrap:hover .card-content {
		background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0), #fff 100%);
		opacity: 1 !important;
	}
}

以下のようになりました。