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

この記事では、ランキングを表示する方法と、ラベルのスタイルや色をカスタマイズする方法を解説します。

テーマCocoonには独自のアクセス集計機能がついているので、そのデータを元に簡単に人気記事ランキングを作成することができます。定番のサイドバーや、トップページに表示すると読者の目を引きやすいですよ。

まず、カスタマイズのビフォーアフターをご覧ください。左側がCocoonのデフォルト。右の２つが今回ご紹介するカスマイズ例です。

ランキング部分の背景を丸くすると可愛い雰囲気になりませんか？

こんな人におすすめ

テーマはCocoonを使っている
人気記事ランキングを表示する方法を知りたい
ラベルのスタイルや色を変更したい

Contents

Cocoon人気記事を表示する方法は３つ
ブロック機能を利用した人気記事Cocoon人気記事ランキング
1. 人気記事の表示方法
2. ブロックで設定する人気記事のオプション項目
ショートコードを利用したCocoon人気記事ランキング
1. 人気記事の表示方法
2. ショートコードで設定する人気記事のオプション項目
ウィジェットを利用したCocoon人気記事ランキング
1. 人気記事の表示方法
2. ウィジェットで設定する人気記事のオプション項目
Cocoon人気記事ランキングラベル（番号）のスタイルをカスタマイズする方法
1. ラベル（番号）のスタイルを変更
2. ラベル（番号）色を個別に変更する方法
まとめ

Cocoon人気記事を表示する方法は３つ

　人気記事を表示するにはは３つの方法があり、それぞれ特徴がありますが最終的に表示される人気記事は同じものです。

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

ひとつずつ説明していきます。

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

投稿ページや固定ページに人気記事を表示するときには、ブロック機能が便利です。

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

ブロックで設定する人気記事のオプション項目

このような人気記事一覧が表示されます。右側のサイドメニューである程度カスタマイズできます。

表示する記事数　
- デフォルト：5記事
データの集計期間
- デフォルト：全期間集計
表示タイプ（カードの形状）
- 下記の５種類から選択できます。
  - 通常のリスト（デフォルトはこの小さなカードです）
  - カードの上下に区切り線を入れる
  - カードの枠線を表示する
  - 大きなサムネイル表示
  - 大きなサムネイルにタイトルを重ねる
タイトルの文字の太さ
- デフォルト：オフ
矢印を表示する
- デフォルト：オフ
横並びにする
- デフォルト：オフ
ランキングの番号を表示する
- デフォルト：オフ
PV数の表示
- デフォルト：オフ

今回はランキングの番号部分のカスタマイズなので、ランキングの番号表示をONにしておきましょう。

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

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

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

ショートコードで設定する人気記事のオプション項目

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

[popular_list rank="1"]

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

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

Cocoon公式

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

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

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

ウィジェットで設定する人気記事のオプション項目

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

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

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

人気記事ランキングのラベル（番号）スタイルや色を変更するには、CSSを追加します。（子テーマを使用します）

Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

HTML？CSS？どこに書いたらいいの？戸惑う方向けに、このページではHTMLやCSSの編集方法とバックアップのとり方をまとめます。特にCocoonでのカスタマイズが初めての方、慣れていない方はご一読ください。見たいところをクリックでき...

ラベル（番号）のスタイルを変更

カスマイズ例①

画像のようにスタイルを変更するには、下記のCSSを追加します。ラベル（番号）のスタイルを丸くする、位置を少しずらすといったことを指定しています。

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

カスマイズ例②

画像のようにスタイルを変更するには、下記のCSSを追加します。ラベル（番号）の背景色を白くする、番号まわりに枠線を追加するといったことを指定しています。

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

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

CocoonのCSSを確認してみると、ランキングの番号部分には全体で#666666（グレー）のカラーコードが指定されています。

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

そして１～３位までを部分的に金銀銅をイメージしたカラーに上書き。それぞれno-1、no-2、no-3とういうクラス名が付与されています。

個別に色を変えたいときはno-1、no-2、no-3とういうクラス名がついているそれぞれのbackground: #カラーコード;の部分に変更したいカラーコードを入れればOK。

参考　原色大辞典

/*人気記事ランキング番号部分*/
.widget-entry-cards.ranking-visible .card-thumb::before{
    background: #666666;/*ランキング全体のラベル背景色（グレー）*/
}

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before {
    background: #cca11f;/*ランキング1位のラベル背景色*/
}

.widget-entry-cards.ranking-visible .no-2 .card-thumb::before {
    background: #b1b1b3;/*ランキング2位のラベル背景色*/
}

.widget-entry-cards.ranking-visible .no-3 .card-thumb::before {
    background: #b37036;/*ランキング3位のラベル背景色*/
}