エントリーカードを「大きなサムネイルにタイトルを重ねて表示する」する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

タイトルからアイキャッチを自動生成すると、サムネイルとタイトルが並ぶため、全体的に文字が多い印象になってしまいます。

そこで、「新着記事」のように大きなサムネイルにタイトルを重ねて表示するデザインに変更してみます。

この記事では、そのデザインを実現する方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定をします。

Cocoon設定
設定大項目項目設定値
インデックスリスト設定カードタイプ縦型カード2列、3列

設定	大項目	項目	設定値
インデックス	リスト設定	カードタイプ	縦型カード2列、3列

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_filter('get_index_list_classes', function ($list_classes) {
  // 縦型カード2、3列の場合
  if (strpos(get_entry_card_type(), 'vertical_card_') !== false) {
    // 大きなサムネイルにタイトルを重ねて表示する
    $list_classes .=' large-thumb-on';
  }

  return $list_classes;
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.large-thumb-on .a-wrap .card-content {
  backdrop-filter: blur(3px);
}

.large-thumb-on .a-wrap:hover .card-content {
  opacity: 0;
}

.like .button::before,
.like .count,
.body .large-thumb-on .post-date,
.body .large-thumb-on .post-update {
  color: #fff;
}

さいごに

今回紹介した方法を使えば、エントリーカードを大きなサムネイルにタイトルを重ねたデザインに変更できます。