【Cocoonカスタマイズ】「新着情報」ブロックを1行表示にする方法

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

はじめに

プラグイン「VK Blocks Pro」を使わずに、「新着情報」ブロックを「テキストリスト（1カラム）」と同様の1行表示とします。

投稿リスト（Pro版のみ）

投稿リストを固定ページに表示することができます。好きな場所に投稿リストを呼び出せるのでトップページなどの作成に大変便利な機能です。

この記事では、この方法について説明します。

完成イメージ

実装手順

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

ラベル
Gutenbergエディターでの設定

「新着情報」ブロックを配置し、高度な設定→追加CSSクラスにinfo-list-horizontalと入力します。

ラベル

CSSを追加

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

.info-list-horizontal {
  .info-list-item {
    align-items: flex-start;
    display: flex;
    gap: 15px;

    @media (width <= 480px) {
      flex-direction: column;
    }
  }

  .info-list-item-content {
    margin: 0;
    order: 2;
  }

  .info-list-item-meta {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 15px;
    opacity: 1;
    width: 250px;

    .info-list-item-date {
      margin: 0;
    }

    .info-list-item-categorys {
      flex-grow: 1;
    }

    .entry-category {
      display: block;
      font-size: unset;
      margin: 0;
      text-align: center;
      width: 100%;

      /* 最初のカテゴリー以外を非表示 */
      &:nth-child(n+2) {
        display: none;
      }
    }

    .info-list-item-comment {
      display: none;
    }
  }
}

補足

カテゴリーが複数設定されている場合は、1番目のカテゴリーのみが表示されます。
また、プラグインと同様にカテゴリーラベルを色を付ける場合は、以下を参照してください。

「新着情報」のカテゴリーラベルに色を付ける方法

さいごに

今回紹介した方法を使えば、高機能な有料プラグインを導入しなくても、CSSの調整だけ1行で表示とすることができます。