無料イラストをダウンロード【イラストAC】会員登録はこちら

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

アイキャッチ/人気記事 Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

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

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

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

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

こんな人におすすめ
  • テーマはCocoonを使っている
  • 人気記事ランキングを表示する方法を知りたい
  • ラベルのスタイルや色を変更したい
当サイトの実際の人気記事ランキングです(横並び表示)
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計250件(月間約20件)購入いただいています
はっちゃん
です
プロフィール

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

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

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

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

スポンサーリンク

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

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

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

人気記事の表示方法

Cocoon 2.5.7のバージョンアップで人気記事ブロックが追加され、従来のショートコードの他にブロックでも利用できるようになりました。

ブロックメニューから「人気記事」を検索してクリック。

人気記事

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

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

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

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

スポンサーリンク

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

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

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

人気記事の表示方法

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

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

直接入力

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

基本のショートコード
[popular_list]

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

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

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

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

[popular_list rank="1"]

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

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

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

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

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

人気記事の表示方法

  • Step1
    ウィジェットで「人気記事」を選択

    Cocoon管理画面「外観」→「ウィジェット」→「人気記事」をクリックします。

  • Step2
    「人気記事」をサイドバーに追加します。

    人気記事をクリック→下のドロップダウンメニューから「サイドバー」を選択→「ウィジェットを追加」をクリックします。

    またはドラッグ&ドロップ(クリックしたまま右側のサイドバーに追加)する方法でもどちらでもOKです。

  • Step3
    人気記事の表示設定

    人気記事右端の▼をクリックすると下に設定メニューが開きます。各設定を終えたら、右下の「保存」をクリックします。

  • Step4
    完了

    これでウィジェットの設定は完了です。表示を確認しましょう。

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

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

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

スポンサーリンク

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

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

ラベル(番号)のスタイルを変更

カスマイズ例①

人気記事ランキング

画像のようにスタイルを変更するには、下記の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;/*ランキング全体のラベル背景色(グレー)*/
}

そして1~3位までを部分的に金銀銅をイメージしたカラーに上書き。それぞれ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位のラベル背景色*/
}

このCSSをコピペして変更すれば簡単だね

金銀銅のイメージカラーが気に入っているので当サイトではデフォルトのまま変更していません。サイトカラーに統一したい場合などにも使えます。

まとめ

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

とても細かい部分となりますが、このカスタマイズによってシンプルなデザインのよさはそのままでオリジナル感を出すことができます。このテーマのユーザーはとても多くこのランキングを見るだけでCocoonだと分かってしまう部分なので、ちょっとした部分に個性を出してみてはいかがでしょうか。

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. ulysses より:

    はじめまして。
    色々、参考にさせて頂きます。

タイトルとURLをコピーしました