【Cocoon】おすすめカードを折り返しさせるカスタマイズ

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

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

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

今回は、WordPressテーマ Cocoonの『おすすめカードを折り返しさせる』カスタマイズについてまとめてみました。

WordPressテーマ Cocoon おすすめカード

WordPressテーマ Cocoonの「おすすめカード」機能を使用した場合、表示数4個の設定にすると丁度良いサイズなのですが、表示数8個の設定にすると全てを横一列で表示されるため、サムネイル画像がかなり小さくなってしまいます。

なお、これはPCで表示した場合で、スマートフォンで表示した場合は、横一列が2個ずつの表示となり問題ありません。

そこで今回「おすすめカード」を適切に折り返しさせて、サムネイル画像を小さくさせないように表示するためのPC限定のカスタマイズを行います。

WordPressテーマ Cocoonの「おすすめカード」の設定は、次の通りとなっており、それ以外の設定では検証していないので正常に表示されない可能性があります。ご了承ください。

おすすめカードを折り返しさせるカスタマイズ

WordPressテーマ Cocoonでの『おすすめカードを折り返しさせる』カスタマイズを行います。

カスタマイズ内容

『おすすめカードを折り返しさせる』カスタマイズは、下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を追記します。

/************************************
** ■おすすめカテゴリーを最大横4列で表示させる
**********************************/
.recommended .navi-entry-cards {
  flex-wrap: wrap;
}
.recommended.rcs-card-margin a:first-child {
  margin-left: 0.5%;
}
.recommended.rcs-card-margin a:last-child {
  margin-left: 0.5%;
  margin-right: 0.5%;
}
.recommended.rcs-card-margin a {
  margin: 0.5% 0.5%;
}
.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
  transform: scale(0.87); /*縮小表示*/
}
.recommended-in.wrap.cf {
  padding-top: 0;
  padding-bottom: 0;
}
@media screen and (min-width:1795px) { /*PCの解像度が高い表示において5個目を強制的に折り返す*/
  .recommended .navi-entry-cards::after {
    content: '';
    width: 100%;
  }
  .recommended.rcs-card-margin a:nth-child(n+5) {
    order: 1;
  }
}

/************************************
** ■おすすめメニュー（おすすめカード）を画面いっぱいに広げる
************************************/
.recommended-in.wrap.cf {
  width: 100vw!important;
  margin-left: calc(50% - 50vw)!important;
  margin-right: calc(50% - 50vw)!important;
  padding-left: calc(50vw - 50%)!important;
  padding-right: calc(50vw - 50%)!important;
  background-color: #F4F8FD!important;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 6px solid #E2F2FB;
  border-bottom: 6px inset #BAD7F0;
}
@media screen and (min-width:1030px) { /*PCのみ表示*/
  .recommended .navi-entry-cards { /*領域広げてサイズ拡大*/
    width: 114vw!important;
    margin-left: calc(50% - 57vw)!important;
    margin-right: calc(50% - 57vw)!important;
  }
  .recommended-in.wrap.cf {
    width: 114vw!important;
    margin-left: calc(50% - 57vw)!important;
    margin-right: calc(50% - 57vw)!important;
    padding-left: calc(57vw - 50%)!important;
    padding-right: calc(57vw - 50%)!important;
  }
}

/************************************
** ■ウィジェット[C]おすすめカードのカスタマイズ タイトル文字装飾（１）
************************************/
.recommended.cf.rcs-large-thumb-on {
  margin-top:40px; /*上マージン*/
  margin-bottom: 0; /*下マージン*/
}
.widget-entry-cards.large-thumb-on .card-content {
  font-weight: 600; /*フォント太さ*/
  font-size: 19px; /*フォントサイズ 15px*/
}
.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
	margin-bottom: 0;
}
@media screen and (max-width: 768px) { /*iPad縦表示対応*/
  .widget-entry-cards.large-thumb-on .card-content {
    font-weight: 600; /*フォント太さ*/
    font-size: 13px; /*フォントサイズ*/
  }
}
#recommended.recommended.cf.rcs-center-label-title.rcs-center-title {
  margin-top: 10px;
}

/************************************
** ■おすすめメニュー（おすすめカード）カスタマイズ タイトル文字装飾（２）
************************************/
#recommended.recommended.cf.rcs-large-thumb-on.rcs-card-margin { /*オススメメニュー*/
  margin-top: 30px; /*上マージン*/
  margin-bottom: -20px; /*下マージン*/
  transform: scale(1); /*縮小表示 6個表示の場合1 / 4個表示の場合0.92*/
}
@media screen and (max-width: 768px) { /*iPad縦表示対応*/
  #recommended.recommended.cf.rcs-large-thumb-on.rcs-card-margin { /*オススメメニュー*/
    transform: scale(0.96); /*縮小表示*/
  }
}
.navi-entry-card-link.widget-entry-card-link.a-wrap {
  border-radius: 4px; /*角丸コーナー */
  box-shadow: 0 0 4px #e8e8e8; /*枠設定*/
}
.navi-entry-card-title.widget-entry-card-title.card-title {
  color: #78FFDD; /*文字色*/
}
.widget-entry-cards.large-thumb-on .card-content {
  background: rgba(85,85,85,0.7);
  padding-top: 2px;
  padding-bottom: 2px;
}

カスタマイズ後のおすすめカード

今回のカスタマイズによって、「おすすめカード」のスタイルは、次の様になりました。

今回のカスタマイズは、一行目の横一列が5個以上表示させないようにしました。

次のソースの部分は、文字の装飾関連のカスタマイズなので無くてもOKです。

■ウィジェット[C]おすすめカードのカスタマイズタイトル文字装飾（１）
■おすすめメニュー（おすすめカード）カスタマイズタイトル文字装飾（２）

『おすすめカードを折り返しさせる』カスタマイズは、表示数8個の設定時にオススメします。基本的に表示数は偶数設定が推奨されており、カスタマイズしなくても表示数6個までの場合は問題ないでしょう。

表示数8個の場合、横一列に全て表示されるためサムネイル画像がかなり小さくなり、今回のカスタマイズは有効だと思います。

また、表示数6個に設定し、3個ずつ表示したい場合には、29行目の

.recommended.rcs-card-margin a:nth-child(n+5) {

の【5】を【4】に変更すればOKです。

なお、表示させるブラウザの横幅が短いと、強制的に横一列が3個ずつ、2個ずつの表示となります。

最後に

WordPressテーマ Cocoonの「おすすめカード」は、かなり魅力的な機能なので、是非表示して活用させたいところです。

今回のカスタマイズは、表示数8個までの設定にしか対応していませんが、今後更に表示数を増やしたい場合、別途カスタマイズしたいと思います。

WordPressテーマ Cocoon

WordPressテーマ Cocoon おすすめカード

おすすめカードを折り返しさせるカスタマイズ

カスタマイズ内容

カスタマイズ後のおすすめカード

最後に

コメント