PR

Cocoonで記事一覧をカスタマイズす方法【新着・人気・全記事】

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか？」その秘密を暴露します。 「今年こそは絶対稼ぎたい！」という人は今すぐご覧ください。


⇒あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

この記事ではCocoonで記事一覧をカスタマイズ・レイアウト変更する方法を具体的にご紹介します。

この記事を読むと、次のことが分かります。

  • Cocoonで記事一覧のレイアウトを変える3つの方法
  • 新着・人気・全記事一覧をショートコードで作る具体例
  • CSSでカードデザインを少しだけ整えるときの考え方とサンプル
  • サイトの目的別におすすめの配置パターン

 

  ブログ収益化の教科書プレゼント

↓　↓　↓

ba15a

 

Cocoonで記事一覧をカスタマイズする全体像とメリット

ごとう
ごとう

まずは、Cocoonで記事一覧をどのようにカスタマイズできるのか、全体像をざっくり押さえておきます。ここが分かっていると、「今どこをいじっているのか」が迷いにくくなります。

Cocoonの記事一覧カスタマイズでできること一覧

Cocoonで記事一覧の見た目や中身を変えるとき、主に触る場所は3つです。

方法 何を変えるか 主な設定場所 難易度の目安 向いている人
インデックス設定を変える トップやカテゴリーページの一覧レイアウト Cocoon設定 > インデックス かんたん まず基本の見た目を整えたい人
ショートコードで一覧を作る 新着・人気・全記事など目的別の一覧 投稿・固定ページ・ウィジェット ふつう 「新着だけ」「人気だけ」などを柔軟に出したい人
CSSでデザインを調整する カードの色・枠線・影・文字装飾など 子テーマのstyle.cssや追加CSS ややむずかしい デザインにこだわりたい人・他サイトと差別化したい人

私が実際にやってみてしっくりきた流れは、この3ステップです。

  • インデックス設定で「全体の型（レイアウト）」を決める
  • 足りない部分をショートコードで補う
  • 最後に気になるパーツだけCSSで微調整する

いきなりCSSから入ると挫折しやすいので、まずはインデックス設定とショートコードを触って「Cocoonで何ができるか」を体感してみるのがおすすめです。

記事一覧カスタマイズがSEOとユーザー体験に効く理由

記事一覧は、読者にとって「次にどこへ進むか」を決める分かれ道のような場所です。ここを整えると、見た目が良くなるだけでなく、サイト全体の評価にも関わってきます。

  • 読者が迷わず関連記事へ進めるので、ページビューが増えやすくなる
  • 滞在時間が伸び、直帰率も下がりやすくなる
  • 運営者が本当に読んでほしい記事へ、自然に誘導しやすくなる

逆に、記事一覧がごちゃごちゃしていると、せっかく来てくれた人が「なんだか見にくいな」と感じて離脱してしまいます。Cocoonは最初からかなり整ったテーマですが、記事一覧を少しカスタマイズするだけでも、「ちゃんと手入れされているサイト」という印象を出しやすくなります。

インデックス設定でできるCocoonの記事一覧カスタマイズ

ごとう
ごとう

ここからは、まず触っておきたいインデックス設定について見ていきます。Cocoon設定の「インデックス」画面を変えるだけで、トップやカテゴリーページの印象がガラッと変わります。

インデックス設定で選べるカードタイプと特徴

インデックス設定の中でも、特に影響が大きいのが「カードタイプ」です。どのカードタイプを選ぶかで、ブログの雰囲気がかなり変わります。

カードタイプ名 特徴 見た目の印象 向いているサイト例
エントリーカード 画像＋タイトル＋抜粋の標準的なカード表示 バランスが良く読みやすい 雑記ブログ・情報ブログ全般
大きなカード アイキャッチ画像を大きく表示 写真が主役でリッチな印象 旅行・グルメ・ライフスタイル系
縦型カード2列 / 3列 カードをタイル状にきれいに並べる 一覧性が高くスッキリ 記事数が多いブログ・ニュース系
タイルカード2列 / 3列 画像をメインにシンプル表示 ギャラリーのような印象 実績紹介・作品ポートフォリオ
テキストのみの一覧 タイトル中心のシンプルなリスト 情報がサクサク追える ニュース・更新情報・お知らせ系

私の場合、雑記ブログではエントリーカード、レビューや写真が多いサイトでは大きなカードやタイルカードを使うことが多いです。「なんとなく素人っぽいな…」と感じるときは、カードタイプを変えてみるだけでも一気に印象が変わります。

サイトの種類別・おすすめインデックス設定

インデックス設定では、カードタイプ以外にも表示件数や抜粋文字数など、こまかい部分も調整できます。ざっくりとした目安を、サイトのタイプ別にまとめておきます。

  • 雑記ブログ
    • カードタイプ：エントリーカード
    • 抜粋：短め（本文の冒頭が2〜3行に収まるくらい）
    • 1ページの表示件数：10〜12件程度
  • 特化ブログ・アフィリエイト系
    • カードタイプ：縦型カード2列 or タイルカード2列
    • 抜粋：ベネフィットが分かるようにやや長め
    • 1ページの表示件数：12〜16件程度
  • 写真・作品ギャラリー系
    • カードタイプ：大きなカード or タイルカード3列
    • 抜粋：思いきってオフにして、タイトル重視にする
    • 1ページの表示件数：12〜20件程度

あくまで目安なので、「自分のブログだとこうかな？」と思うパターンから試して、見ながら微調整していくのが一番早いです。

ショートコードで柔軟にCocoonの記事一覧をカスタマイズする

ごとう
ごとう

インデックス設定で全体のレイアウトが決まったら、次はショートコードです。新着記事一覧や人気記事一覧、全記事一覧ページなど、「ここにこういうリストを出したい」というときに活躍します。

new_listショートコードの基本と主なパラメータ

新着記事一覧を表示するときに使うのが、Cocoon標準のショートコード

ライブドアブログの広告を消す方法！邪魔な広告をブロック！
ライブドアブログの終了に備えたい人へ！5つの選択肢
FC2ブログのアイコン・ファビコンを設定＆変更する方法
ライブドアブログの不具合・障害などトラブルで困ったときの対処7選
SWELLカテゴリー設定と順番を変更する方法【初心者向け】
です。主なパラメータを整理しておきます。

パラメータ名 役割 記述例 よく使うか
count 表示する記事数を指定 count=”6″ よく使う
type カードのデザインタイプを指定 type=”large_thumb” よく使う
cats 特定のカテゴリIDの記事だけ表示 cats=”3,5″ よく使う
tags 特定のタグIDの記事だけ表示 tags=”12″ ときどき使う
order 並び順（新しい順 / 古い順）を切り替え order=”DESC” ときどき使う
snippet 抜粋を表示するかどうか snippet=”true” ときどき使う
date 日付を表示するかどうか date=”true” たまに使う
ex_posts 特定の投稿IDを除外 ex_posts=”10,21″ たまに使う
ex_cats 特定のカテゴリIDを除外 ex_cats=”2″ たまに使う
ordered_posts 任意の記事IDを指定した順番で並べる ordered_posts=”3,5,1,2″ ピックアップ表示で便利

よくある使い方を、イメージしやすいようにいくつか挙げておきます。

パラメータはたくさんありますが、最初のうちは「count・type・cats・ordered_posts」あたりだけ覚えておけば十分です。細かいオプションは、必要になったときに足していけばOKです。

popular_list・sitemapなど他ショートコードの活用パターン

Cocoonには、new_list以外にも便利なショートコードが用意されています。よく使うものを一覧にしておきます。

ショートコード 目的 記述例 使いどころ
ライブドアブログの広告を消す方法！邪魔な広告をブロック！
ライブドアブログの終了に備えたい人へ！5つの選択肢
FC2ブログのアイコン・ファビコンを設定＆変更する方法
ライブドアブログの不具合・障害などトラブルで困ったときの対処7選
SWELLカテゴリー設定と順番を変更する方法【初心者向け】
新着記事一覧
ライブドアブログの広告を消す方法！邪魔な広告をブロック！
ライブドアブログの終了に備えたい人へ！5つの選択肢
FC2ブログのアイコン・ファビコンを設定＆変更する方法
ライブドアブログの不具合・障害などトラブルで困ったときの対処7選
SWELLカテゴリー設定と順番を変更する方法【初心者向け】
トップや記事下の「最近の記事」に
ライブドアブログをSearch Consoleに登録してサイトマップ送信する方法
はてなブログの目次＆見出しの作り方とカスタマイズ(番号や背景色)
【Cocoon】アフィリエイト広告の貼り方！ボタンやタグ設定も【A8で解説】
コピペ１分！ライブドアブログの目次と見出しの作り方＆カスタマイズ
WordPressでXを埋め込む方法と失敗しないコツ・注意点
人気記事一覧
ライブドアブログをSearch Consoleに登録してサイトマップ送信する方法
はてなブログの目次＆見出しの作り方とカスタマイズ(番号や背景色)
【Cocoon】アフィリエイト広告の貼り方！ボタンやタグ設定も【A8で解説】
コピペ１分！ライブドアブログの目次と見出しの作り方＆カスタマイズ
WordPressでXを埋め込む方法と失敗しないコツ・注意点
サイドバーや記事下の「よく読まれている記事」に

固定ページ

投稿一覧

カテゴリー

 全記事一覧（サイトマップ）

固定ページ

投稿一覧

カテゴリー

 固定ページの「サイトマップ」や「全記事一覧」に
[ranking] 手動で作るランキング風一覧 [ranking id=”1″] アフィリエイト系の「おすすめ〇選」に

特におすすめなのは、

固定ページ

投稿一覧

カテゴリー

で作る全記事一覧ページです。固定ページを1つ作ってショートコードを入れるだけで、記事が増えても自動で反映される「一覧ページ」が完成します。フッターやグローバルメニューからリンクしておくと、初めて来た人でもサイト全体を把握しやすくなります。

CSSで見た目を整えるCocoon記事一覧カスタマイズ

ごとう
ごとう

 

 

 

【稼げるキーワード教えます】
▼　　▼　　▼ba15a

 

 

 

インデックス設定とショートコードだけでもかなり整いますが、「他のCocoonサイトとデザインが似てきたな」と感じたら、少しだけCSSを触ってみるのがおすすめです。全部を変えなくても、ポイントを絞れば負担はそれほど大きくありません。

CSSをどこに書くか？3つの方法を比較

まずは、CSSを書く場所を整理しておきます。

方法 設定場所 メリット 注意点
子テーマのstyle.cssに書く 子テーマのstyle.cssファイル 管理しやすく、テーマの更新で消えにくい 子テーマを使っていない場合は導入が必要
カスタマイザーの追加CSSに書く 外観 > カスタマイズ > 追加CSS 画面を見ながら、その場で試せる 長くなるとどこに何を書いたか分かりにくい
CSS用プラグインを使う プラグインのCSS入力欄 テーマを変えてもCSSを使い回しやすい プラグインが増えすぎると動作が重くなりがち

私のおすすめは、「まずは追加CSSで試して、うまくいったものを子テーマのstyle.css側に移す」というやり方です。テスト用と本番用を分けておくと、あとから見直すときも楽になります。

記事一覧カードの枠線・影・ホバーを整える

ここからは、実際に使いやすいCSSの例を紹介します。環境によってクラス名が少し違う場合があるので、自分のサイトではブラウザの検証ツールで要素名を確認してから調整してください。

カード全体に薄い影と角丸をつけるイメージのCSSは、たとえば次のような書き方です。

.entry-card-wrap {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

マウスを乗せたときに少しだけ浮き上がるようにしたい場合は、ホバー時の指定を足します。

.entry-card-wrap:hover {
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

これだけでも、「テンプレートそのままのブログ」から一歩抜け出した雰囲気になります。細かい装飾よりも、影・角丸・余白を整えるほうが、初心者でも失敗しにくいと感じています。

パーツ別に見るCocoon記事一覧カスタマイズのポイント

どの部分を触ると何が変わるのか、パーツごとにざっくり整理しておきます。

カスタマイズ対象 代表的なセレクタ例 変えるとどうなるか コツ
カード全体 .entry-card-wrap など カードの雰囲気・余白・影が変わる 最初は影と角丸だけいじってみる
アイキャッチ画像 .entry-card-thumb など 画像の角丸やトリミングの印象が変わる border-radiusやoverflowで調整する
カテゴリーラベル .cat-label など カテゴリ名が目立つようになる サイトのテーマカラーに合わせて色を決める
記事タイトル .entry-card-title など 情報の「見出し感」が強くなる フォントサイズと行間を少し広めにする
日付・投稿情報 .entry-card-meta など 情報量をスッキリ見せられる 文字色をやや薄めにして主張を抑える
抜粋テキスト .entry-card-snippet など 記事の「チラ見せ」具合を調整できる 2〜3行で折り返されるように行間を調整する

全部を一度に変えようとすると大変なので、「カード全体」と「カテゴリラベル」と「タイトル」の3カ所くらいから少しずつ触ってみると、負担が少なくておすすめです。

設置場所で変わるCocoon記事一覧カスタマイズの役割

ごとう
ごとう

同じ記事一覧でも、「どこに置くか」で役割が変わります。ここでは、よく使う設置場所と、その場所に合った記事一覧のパターンをまとめます。

設置場所ごとの役割とおすすめパターン

よく使う設置場所ごとの役割を、表に整理してみました。

設置場所 主な目的 おすすめの一覧タイプ 一言メモ
トップページ上部 ブログ全体の顔・最新情報の紹介 new_listによる新着記事一覧 まず読んでほしい記事を優先的に見せる
トップページ中〜下部 回遊のきっかけづくり カテゴリ別new_list・人気記事一覧 雑記ブログならカテゴリ別に分けると分かりやすい
各記事の本文下 「次の一歩」を提案する 同カテゴリの新着記事やおすすめ記事 同じカテゴリ内で関連記事をそっと並べるイメージ
サイドバー どのページでも見える関連記事・人気記事 popular_listやランキング風リスト スマホでは縦長になりやすいので件数は控えめに
固定ページ（サイトマップ） 全記事の見取り図 sitemapによる全記事一覧 フッターからリンクしておくと親切

私がよく使う組み合わせは、次のような形です。

  • トップページ：上部に新着記事、中段以降にカテゴリ別new_list
  • 各記事の下：同じカテゴリの新着3件か、人気記事5件
  • フッター：全記事一覧（サイトマップ）へのリンク

これくらい整えておくだけでも、「とりあえず1記事読んで終わり」ではなく、自然に次の記事へ進んでもらいやすくなります。

よくある質問

Q1. まずはインデックス設定とショートコード、どちらから触ればいいですか？

A1. 先にインデックス設定から触るのがおすすめです。

インデックス設定は、ブログ全体の基本レイアウトを決める場所なので、ここを先に整えておくと「サイト全体の雰囲気」が落ち着きます。そのうえで、必要に応じてショートコードで記事一覧を足していくイメージです。

  • トップページの途中や記事下にnew_listで新着記事一覧を出す
  • サイドバーにpopular_listで人気記事一覧を出す
  • 固定ページにsitemapで全記事一覧を作る

この流れで進めると、Cocoonの記事一覧カスタマイズ全体が整理された状態で進めやすくなります。

Q2. CSSがほとんど分からないのですが、それでもCocoonの記事一覧をカスタマイズできますか？

A2. できます。むしろ、最初はCSSなしでできるところまでやってみるのがおすすめです。

インデックス設定とショートコードだけでも、レイアウトや表示内容はかなり調整できます。CSSは、「影をつける」「角丸にする」「ラベルの色を変える」など、サンプルをコピペして少し数字を変えるくらいから始めればOKです。

私も最初は、意味が分からないまま1行ずつコメントアウトして「この1行を消すとこう変わるのか」と確認していました。そのくらいの感覚で、少しずつ慣れていけば大丈夫です。

Q3. popular_listで人気記事一覧を出しているのに、あまり記事が表示されないことがあります

A3. popular_listは、サイト内のアクセス数などをもとに記事を並べているため、条件によっては「思ったより記事が出てこない」ことがあります。

たとえば、次のようなケースです。

  • ブログを作ったばかりで、まだPVが十分にたまっていない
  • キャッシュ系プラグインの影響で、表示が安定していない

こういう場合は、人気記事ショートコードにこだわりすぎず、new_listとordered_postsを使って「自分でおすすめ記事を選ぶ」方法もありです。確実に見せたい記事が決まっているなら、手動でピックアップしてしまったほうが早いことも多いです。

まとめ：Cocoonで記事一覧をカスタマイズするときは「型＋場所＋ちょいCSS」でOK

この記事のポイントを整理しておきます

  • Cocoonの記事一覧カスタマイズは「インデックス設定・ショートコード・CSS」の3つで考えると分かりやすい
  • インデックス設定では、カードタイプや表示件数を変えて、ブログ全体の基本レイアウトを整える
  • ショートコード（new_list・popular_list・sitemapなど）を使えば、新着・人気・全記事一覧を自由な場所に設置できる
  • CSSは、影・角丸・余白・ラベルの色などを少し触るだけでも、デザインの完成度が一段上がる
  • トップ・記事下・サイドバー・サイトマップなど、設置場所ごとに役割を意識すると、読者が自然にサイト内を回遊しやすくなる

今日からできる最初の一歩としては、次の3ステップを試してみてください。

ここまでできれば、「とりあえず標準のまま使っているだけ」の状態から、一歩進んだCocoonの記事一覧カスタマイズに近づきます。あとは、少しずつショートコードのパラメータやCSSを変えながら、自分のサイトにしっくりくる形を探してみてください。

 

 

記事を読んだらコチラ
▼　　▼　　▼ba15a