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

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

この記事では以下の２点について解説します。

• 人気記事ランキングの表示方法
• ランキングラベルのスタイル・色のカスタマイズ方法

また、人気記事ランキングと相性の良いカスタマイズとして、

新着記事・人気記事・ナビカードを横並びに表示し、カラム数をワンクリックで切り替えられる方法

も別記事で紹介しています。

まず、カスタマイズのビフォーアフターを見てみましょう。

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

Cocoonで人気記事ランキングを表示する方法は、大きく分けて以下の３つがあります。

1. ブロック機能を利用
2. ショートコードを利用
3. ウィジェットを利用

	表示できる場所	使い方	設定
ブロック機能	投稿・固定ページ	トップページ作成に最適	サイドバーで簡単設定
ショートコード	投稿・固定ページ、ウィジェット	どこでも使えて万能	オプション入力でやや手間がかかる
ウィジェット	ウィジェットの範囲	サイドバー、フッター等	ウィジェットで簡単設定

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

ブロック機能を利用した人気記事Cocoon人気記事ランキング

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

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

表示方法

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

手順は次のとおりです。

1. ブロックメニューから「人気記事」を選ぶ
2. 表示したい位置に挿入する
3. 右側のサイドバーから表示項目・期間・カードの見た目などを調整する

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

オプション項目

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

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

ショートコードを利用したCocoon人気記事ランキング

もうひとつは従来のショートコードを利用した方法です。

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

表示方法

ショートコードメニュー使用

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

直接入力

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

[popular_list]

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

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

オプション項目

ランキングの番号を表示するには、rank=”０” 部分を”１”に変更します。

[popular_list rank="1"]

さらにオプションで詳しく設定できます。その他の表示オプションなどはCocoon公式ページを参照ください。

• データの集計期間（days）
• pv数の表示（pv）
• 表示する記事数（count）
• カードの形式（type）
• カテゴリの指定（cats）
• 横並びにする（horizontal）NEW

ウィジェットを利用したCocoon人気記事ランキング

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

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

表示方法

オプション項目

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

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

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

ランキング表示をさらに個性を出すには、ラベル（番号）のスタイルや色を変更するのがおすすめです。以下では具体的なカスタマイズ例を紹介します。

スタイル 1：角を丸くする

通常のリスト

大きなサムネイル表示

以下のCSSを利用すると、Cocoonの人気記事ランキングにおけるラベル（番号）を丸くし、位置を微調整することができます。

/* 人気記事ランキング style1 */
.widget-entry-cards.ranking-visible .card-thumb::before {
   top:-6px!important; /*上からの位置*/
   left:-5px!important; /*左からの位置*/
   border-radius:100%; /*角を丸くする*/
}

スタイル 2：シンプルな白抜き

通常のリスト

大きなサムネイル表示

このコードを使えば、シンプルながら目を引く丸いラベルが実現できます！必要に応じて数値を変更して、位置やサイズを調整してください。

/* 人気記事ランキング style2 */
.ranking-style-2 .widget-entry-cards.ranking-visible .card-thumb::before {
   top: -7px; /*上からの位置*/
   left: -5px; /*左からの位置*/
   border-radius: 100%; /*角を丸くする*/
   border: 2px solid #555; /*枠線*/
   color: #555; /* 文字色 */
   font-weight: bold; /*太字にする*/
   padding: 1px; /* 内側余白*/
   background-color:#fff!important; /* 背景色を白に固定*/
}

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

Cocoonテーマでは、ランキングの番号部分（ラベル）はデフォルトで全体に共通した色が設定されています。

この色を個別に変更して、ランキング1位から3位を金・銀・銅のイメージカラーにする方法を解説します。

/* 人気記事ランキング全体のデフォルトラベル背景色 */
.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; /* ブロンズ */
}

解説

1. 全体のデフォルト背景色
   .widget-entry-cards.ranking-visible .card-thumb::before の部分で、ランキング全体に適用されるデフォルトのラベル背景色（#666666）を設定しています。
2. 個別のラベル背景色
   • .no-1 は1位のスタイルに対応（ゴールド）。
   • .no-2 は2位のスタイルに対応（シルバー）。
   • .no-3 は3位のスタイルに対応（ブロンズ）。
     それぞれ異なる背景色で上書きしています。

ポイント

• サイトカラーに統一したい場合は、ゴールド・シルバー・ブロンズ以外の色を設定しても良いでしょう。
• CSSの background: #カラーコード; を変更するだけで簡単にカスタマイズができます。

参考　原色大辞典

まとめ

以上、ランキングを表示する方法と、番号のスタイルや色を変更する方法について解説しました。

金銀銅の配色は視覚的にわかりやすく、特に目立つランキングデザインを求めるサイトに最適です。当サイトではデフォルトの金銀銅スタイルを使用していますが、サイトの配色に合わせて変更することでブランド感を高めることができます。

こちらの記事で、ブロックで表示する新着記事と人気記事を横並びにし、カラム数（２カラム、３カラム）をサイドバーで簡単に切り替えるカスタマイズを紹介しています。当サイトで愛用しているカスタマイズのひとつです。