ビジネス向けWEBサイトをつくる

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

本ページはプロモーションが含まれています

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

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

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

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

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

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

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

lin

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

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

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

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

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

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

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

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

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

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

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

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

設定してみましょう。

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

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

おすすめカード大

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

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

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

おすすめカード小

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

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

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

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

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

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

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

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

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

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

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

Cocoon設定のカラム設定

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

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

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

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

カラム設定を変更した後に表示されたおすすめカード

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

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

.rcs-card-margin .recommended-in {
	max-width: 1166px!important; 
}
おすすめカードの表示幅を揃える

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

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

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

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

ブロックエディタ対応
カスタム投稿タイプ「お知らせ」「サービス(事業案内)」
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;
	}
}

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

グラデーションを入れたおすすめカード

まとめ

このページではWordPressテーマ「Cocoon」の「おすすめカード」のデザインを変更してみました。

実は、本番サイトではおすすめカードを6つにしてあります。

画像スライダーに見えることをねらったものです。

「Cocoon」には「カルーセル」の機能があるので、トップページに画像スライダーを簡単に配置できます。

しかし、少し処理が重く、パフォーマンスを低下させます。

できれば、「カルーセル」を使わず、画像配置を行いたいと思いました。

そこで、「おすすめカード」を使ってみたのです。

ただし、完成にはほど遠い感じがあります。

もう少し何とかしたいですね。

「おすすめカード」の配置はスマホにも影響があるので、変更するのはけっこう骨です。

ひきつづき課題として検討してみます。

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

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

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

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

7 − 4 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。