【Cocoon】新着情報ブロックをニュースティッカー風にする方法｜日付を上へ移動＋自動スライド表示するカスタマイズ

Cocoonの「新着情報」ブロックは、最新記事を手軽に表示できる便利な機能です。

ただ、そのままだとタイトルが並ぶだけなので、少し物足りなく感じることもあります。

そこで今回は、新着情報の日付とカテゴリをタイトルの上へ移動し、さらに1件ずつ自動で切り替わるスライド表示を組み合わせてニュースサイト風にする方法をご紹介します。

必要なコードをコピペするだけで導入できるので、トップページの印象を手軽にアップグレードしたい方はぜひ参考にしてみてください。

完成イメージ｜Cocoon新着情報ブロック

Before

1. 記事タイトル
2. 日付・カテゴリ

After

1. 日付とカテゴリを上へ移動
2. 新着情報を１件ずつ自動スライド表示

通常の新着情報はタイトルを読まないと記事の内容が分かりません。

日付とカテゴリを先に表示すると、記事のジャンルや更新日時がひと目で分かるため、ニュースサイトやWebメディアのような見やすいレイアウトになります。

新着情報ブロックの設定

まずはCocoonの「新着情報」ブロックを設置します。

おすすめ設定

Cocoon新着情報をニュースサイト風にするカスタマイズ方法

まずは日付とカテゴリを上へ移動するCSSを追加します。

日付とカテゴリを上へ移動する

手順1：CSSを追加

/* 新着情報リスト（並び順変更） ---------------------------------------------- */
.cstm-infolist .info-list-item {
  display: flex;
  flex-direction: column;
}

/* 日付・カテゴリを上へ */
.cstm-infolist .info-list-item-meta {
  order: -1;
  margin-bottom: 6px;
  opacity: 1;
}

手順2：クラスを追加

クラスを追加する場所

このカスタマイズは、新着情報ブロックにcstm-infolistという追加CSSクラスを設定して使用します。

1. 新着情報ブロックを選択
2. サイドバー→高度な設定を開く
3. 「追加CSSクラス」に以下を入力

cstm-infolist

追加CSSクラスを設定したブロックだけにカスタマイズが適用されるため、他の新着情報ブロックには影響しません。

ここから先では新着情報を1件ずつ切り替えて表示する、自動スライド機能を追加します。

通常の新着情報は、表示件数を増やすほど縦に長くなります。

特にサイト型トップページでは、表示スペースを増やさずに新着記事をアピールできるため、ファーストビューをすっきり保ちながら更新情報を目立たせられます。

作業内容は次の2つだけです。

• CSSを貼り付ける
• JavaScriptを貼り付ける

すべてコピペで導入できます。

詳しい編集方法については以下の記事にまとめています。

カスタマイズ全体の流れ

1. 登録：codocコードクへ会員登録（初回のみお願いします）
2. 入力：有料エリアの内容をご自身で入力してください
3. 確認：プレビューで表示確認して完了です

販売者情報は 「特定商取引法に基づく表記」をご確認ください。