Cocoon人気記事ランキング｜表示方法とラベルの色・スタイルを変更するカスタマイズ

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを使って人気記事ランキングを簡単に表示できます。サイドバーやトップページに設置すれば、読者の目を引きやすくなり、記事の回遊率アップにも効果的です。

この記事では、Cocoonの人気記事ランキングについて次の2点を中心に解説します。

• 人気記事ランキングの表示方法
• ランキングラベル（番号）のスタイル・色をカスタマイズする方法

さらに、人気記事ランキングとあわせて使うと便利なカスタマイズとして、新着記事・人気記事・ナビカードを横並び表示（カラム数ワンクリック切替）にする方法も別記事で紹介しています。

記事カードを横並び

新着・人気記事・ナビカードのカラム数をワンクリックで変更する方法を紹介

Cocoon人気記事ランキングの表示方法一覧

Cocoonで人気記事ランキングを表示する方法は主に次の3種類があります。設置場所やカスタマイズのしやすさが異なるため、用途に応じて使い分けるのがおすすめです。

表示方法	表示できる場所	特徴	設定の手軽さ
ブロック機能	投稿・固定ページ	トップページ作成に最適	直感的
ショートコード	投稿・固定ページ／ウィジェット	どこでも使えて柔軟	やや手動
ウィジェット	サイドバー・フッター	定番の設置方法	簡単

それぞれの方法とカスタマイズ可能なオプション項目を解説します。

ブロックで人気記事ランキングを表示する方法

投稿ページや固定ページに人気記事を表示したい場合は、ブロックエディターの「人気記事ブロック」を使うのがもっとも簡単です。

表示できる場所	使い方	設定
投稿・固定ページ	トップページ作成	サイドバーで簡単

表示方法

Cocoon 2.5.7 のアップデートで人気記事ブロックが追加され、従来のショートコードに加えてブロックでも設定できるようになりました。

手順は次のとおりです。

1. ブロックメニューから「人気記事」を選択
2. サイドバーで表示項目・期間・カードの見た目などを調整

これだけで、記事内に人気記事ランキングが簡単に設置できます。

設定できるオプション

挿入すると、次のような人気記事一覧が表示されます。サイドメニューからデザインや項目を細かくカスタマイズできます。

オプション項目	内容・デフォルト
表示する記事数	デフォルト：5記事
データの集計期間	デフォルト：全期間集計
表示タイプ（カード形状）	・通常のリスト（デフォルトはこの小さなカードです） ・カードの上下に区切り線を入れる ・カードの枠線を表示する ・大きなサムネイル表示 ・大きなサムネイルにタイトルを重ねる
区切り線	カード上下に区切り線を追加
枠線表示	カードの枠線を表示
大きなサムネイル	ONでサムネイルが大きくなる
タイトル重ね表示	大きなサムネイル時のみ
タイトル文字の太さ	デフォルト：オフ
矢印表示	デフォルト：オフ
横並び表示	デフォルト：オフ
ランキング番号を表示	デフォルト：オフ（→本記事ではONに）
PV数の表示	デフォルト：オフ

ショートコードで人気記事ランキングを表示する方法

もうひとつはショートコードを使う方法です。

表示できる場所	使い方	設定
投稿・固定ページ、ウィジェット	どこでも使えて万能	オプション入力でやや手間がかかる

表示方法

ショートコードメニューを使う場合

ブロックを選択して上部ツールバーのショートコードアイコンをクリック → [/]人気記事一覧を選択する（ツールバーが出ないときは何か文字を入れると表示されます）

直接入力する場合

ショートコードを直接入力してもOKです。

[popular_list]

ショートコードアイコン → [/]人気記事一覧 を選択すると、このような人気記事を表示するショートコードが表示されます。各オプション項目があらかじめ追加されているので設定しやすくなっています。

[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

オプション一覧表とよく使う設定例

オプション	役割	初期値	選べる値・内容	設定例
days	集計期間	all	数値（例: 1,7,30） / all	days="7"
rank	ランキング番号表示	0	0（非表示） / 1（表示）	rank="1"
pv	PV数表示	0	0（非表示） / 1（表示）	pv="1"
count	表示件数	5	数値	count="6"
type	カード形式	default	default large_thumb など	type="large_thumb"
cats	表示カテゴリ	all	all / カテゴリID	cats="3"
horizontal	横並び表示	0	0（縦） / 1（横）	horizontal="1"

ランキング番号を表示する

[popular_list rank="1"]

横並び＋大きめカード

[popular_list rank="1" count="6" type="large_thumb" horizontal="1"]

直近7日＋PV表示

[popular_list days="7" pv="1" rank="1"]

ウィジェットで人気記事ランキングを表示する方法

サイドバー、フッター等に人気記事を表示するときにはウィジェットを使います。

表示できる場所	使い方	設定
ウィジェットの範囲	サイドバー、フッター等	ウィジェットで簡単

表示方法

設定できるオプション

この設定メニューである程度カスタマイズできます。

ブロックで設定する人気記事のオプション項目と基本的に同じ内容ですが、ウィジェットの場合は除外カテゴリー等を選べるようになっています。人気記事として表示したくないカテゴリーがあれば、□にチェックを入れましょう。

人気記事ランキングのラベル（番号）デザインをカスタマイズする

CocoonではCSSを少し追加するだけで、ランキングの印象を変えられます。なお、デフォルトでは1位〜3位が「金・銀・銅」をイメージした配色になっています。

角丸デザイン（やわらかい印象）

ラベルの背景を丸くしてやさしい雰囲気にするスタイルです。

以下のCSSを追加します。

/* 人気記事ランキング（角丸） */
 .widget-entry-cards.ranking-visible .card-thumb::before {
  top: -6px;
  left: -5px;
  border-radius: 100%;
  font-weight: bold;
}

数値を調整すれば、位置や丸みの大きさも自由に変更できます。

左上三角デザイン（シャープで目立つ）

ラベルを左上に三角形で表示するデザインです。

シンプルながらもアクセントになるため、人気記事をしっかり目立たせたい場合におすすめです。

以下のCSSを追加します。

/* 人気記事ランキング（三角デザイン） */
.widget-entry-cards.ranking-visible .card-thumb::before {
  width: 35px;
  height: 35px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  padding: 8px 0 0 8px;
  font-weight: bold;
  text-align: left;
  line-height: 1;
}

ラベル（番号）の色を個別に変更する方法

Cocoonではデフォルトで、ランキングの1位〜3位が「金・銀・銅」をイメージした配色になっています。この配色は、CSSを使って自由に変更できます。

/* ラベル全体のデフォルト背景色 */
.widget-entry-cards.ranking-visible .card-thumb::before {
  background: #666666; /* デフォルト（グレー） */
}

/* 1位：ゴールド */
.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
  background: #cca11f;
}

/* 2位：シルバー */
.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
  background: #b1b1b3;
}

/* 3位：ブロンズ */
.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
  background: #b37036;
}

• サイトカラーに合わせて、金・銀・銅以外の色に変更してもOK
• background: #カラーコード; の部分を変更するだけで簡単に調整できます
• ブランド感や視認性アップにも効果的なカスタマイズです

まとめ

金銀銅の配色は視覚的にわかりやすく、特に目立つランキングデザインを求めるサイトに最適です。サイトの配色に合わせてブランド感を高めてもよいですね。

また、ブロックで表示する新着記事と人気記事を横並びにし、カラム数（列数）をサイドバーで簡単に切り替えるカスタマイズを以下ページで紹介しています。