【Cocoon】new_listでおすすめ記事をピックアップ表示する方法｜ordered_postsの使い方（ショートコード）

そんなときに、Cocoonで特定の記事をピックアップ表示する方法は大きく分けて2つあります。

• new_list（ordered_posts）で記事カード表示する方法
• ナビカードでカード型にピックアップ表示する方法

この記事では、主にnew_list（ordered_posts）ショートコードを使って、トップページや記事内に特定記事を表示する方法を解説します。

設定を少し工夫するだけで、回遊率やクリック率は大きく変わります。

「おすすめ記事」や「ピックアップ記事」など読んでほしい記事を、確実に目に留めてもらうためのCocoon活用術をマスターしましょう！

Cocoon｜new_listショートコードとは？できること・特徴

new_list は、Cocoonに標準で用意されている投稿一覧表示用ショートコードです。

通常は「新着記事」「カテゴリー別記事」などを表示するために使われますが、ordered_postsパラメータを指定することで特定の記事だけをピックアップ表示できます。

• 表示する記事
• 表示順
• 表示スタイル

を自由にコントロールできるのが特徴です。

基本構文

[new_list]

この状態では、テーマ設定に基づいた「新着記事一覧」が表示されます。

特定記事を指定する方法（ordered_posts）

[new_list ordered_posts="4540"]

ordered_posts は、表示したい投稿をIDで直接指定するためのパラメータです。

• 指定した投稿ID記事だけを表示（※複数記事はカンマ区切り）
• 指定した順番＝表示される順番
• 新着順・公開日・更新日とは無関係

「読んでほしい順」に並べられるのが、この方法の最大の強みです。

ショートコードのパラメータ一覧

new_list でよく使うパラメータをまとめました。

ピックアップ表示では特に type・snippet・ordered_posts が重要です。

パラメータ	内容	初期値	選べる値（代表例）	用途・ポイント
type	表示スタイル	default	default / large_thumb / card など	large_thumb はサムネイル大きめでピックアップ向き
snippet	抜粋文の表示	1（表示）	1 / 0	0 にするとタイトル＋画像だけでスッキリ
horizontal	並び方向	0	1 / 0	0 は縦並びで本文中・サイドバー向き
ordered_posts	表示する記事ID	―	"4540" / "4540,3210,2981"	指定したID順＝表示順になる

ショートコード例（おすすめ設定）

[new_list type=large_thumb snippet=0 ordered_posts="4540,3210,2981"]

• 左から／上から 4540 → 3210 → 2981 の順で表示
• 大きめのサムネイルで目立たせる
• 抜粋テキストを非表示にしてスッキリ表示

※指定しない場合は初期値が自動で使われるため必要なパラメータだけを書けばOK。ordered_posts を使う場合、category など他の条件指定は基本不要です。

Cocoon｜記事IDの調べ方

管理画面 →「投稿」→「投稿一覧」からIDを確認できます。

Cocoon｜new_listショートコードはどこに設置できる？おすすめ設置場所

new_list ショートコードは貼り付ける場所を選びません。

• ブロックエディタ →「ショートコード」、または「カスタムHTML」ブロック
• ウィジェット
• 固定ページ

目的に応じて効果的な設置場所を選びましょう。

• トップページ（固定ページ化）
  • 「まず読んでほしい記事」への導線づくり
  • ブログの方向性や強みを明確にできる

トップを固定ページにして、new_list を配置する使い方も定番です。

• 記事の冒頭・末尾
  • 関連記事・おすすめ記事の導線に最適
  • 回遊率アップ・直帰率対策に効果的

特に記事末尾は「次に何を読むか」を迷っている読者に刺さります。

• 固定ページ（まとめ・プロフィール）
  • 人気記事まとめ
  • 初心者向け記事一覧

「このブログのおすすめ記事」を1ページに集約したい場合に便利です。

Cocoon｜new_listの記事カードを横並び・列数調整する方法（CSS）

new_list の表示はデフォルトでは縦並びになりますが、「2列・3列で固定したい」「スマホで崩したくない」といった場合はオプション設定＋CSSで柔軟に調整できます。

ここでは、

• 横スライド表示（horizontal）
• 列数を固定するCSS調整

の2パターンを紹介します。

horizontalで横並びにする例（横スライド）

[new_list horizontal=1 ordered_posts="1234,5678,9123"]

この設定をすると、記事カードが横方向にスライド表示されます。

• 特徴
  • 横スクロールで表示できる
  • スマホと相性が良い
  • CSS不要で簡単

※ horizontal は「列固定」ではなく横スライド表示になる点に注意してください。

実際の表示イメージ

列数を固定するCSS調整

ここからは、new_listで表示した記事カードの「並び方」や「列数」を調整する方法を紹介します。

• 横スライド表示（horizontal）
• 列数を固定するCSS調整

の2パターンを使い分けることで、PC・スマホどちらでも見やすいレイアウトにできます。

デスクトップで2列表示する例

「横スライドではなく、通常表示で2列・3列にしたい」場合はCSSで調整します。

.new-entry-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

これで、new_list の記事カードが常に2列表示になります。

スマホで1列に切り替える方法

タブレット・スマホでは列数を減らすと読みやすくなります。

@media (max-width: 480px) {
  .new-entry-cards {
    grid-template-columns: 1fr;
  }
}

• PC：2列
• スマホ：1列

と自動で切り替わります。

このCSSは、サイト内すべての .new-entry-cards に反映されます。

特定の場所だけ変更したい場合は、

.front-page .new-entry-cards { … }

など、親クラスを指定して調整してください。

実際の表示イメージ

Before：縦並び（デフォルト）

After：横並び（２列）

レイアウトを少し調整するだけで、ピックアップ記事の見せ方がさらに整います。

Cocoon｜new_list とナビカードの違い・使い分け

Cocoonで特定の記事を目立たせたい場合は、new_listだけでなく「ナビカード」機能も利用できます。

ナビカードは、あらかじめ作成したメニューを元にカードを生成し、ブロック・ウィジェット・ショートコードから表示できるのが特徴です。

new_listとの違い

項目	ナビカード	new_list
記事の指定方法	メニューで管理	ordered_postsで記事ID指定
メニュー作成	必要	不要
説明文（スニペット）	手動入力	なし（抜粋利用）
リボン表示	対応	非対応
表示方法	ブロック／ウィジェット／ショートコード	ショートコードのみ

ピックアップ用途はどちらも同じなので、次のように使い分けると便利です。

• メニュー作成なしで手軽に表示したい → new_list
• リボン付きで強調表示したい → ナビカード

ナビカードの詳しい設定方法は、以下の記事で解説しています。

まとめ｜Cocoonのnew_listショートコードでピックアップ記事を自由に表示しよう

• ordered_posts を使えば 特定の記事だけ を表示できる
• 表示順・表示スタイル・設置場所も自由に設定可能

収益記事・リライト記事・力を入れている記事ほど、new_listで目立たせるだけでクリック率が変わります。