Cocoon人気記事ランキングカスタマイズ／ラベル背景色を変更する方法

今回はCocoonの人気記事ランキングのカスタマイズについて。

この２点について書いていますのでご覧ください。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでフルカスタマイズ
• JavaScriptを勉強中
• ドメインパワー32
• ワードプレスで２サイトを運営しています

はっちゃん
です

Cocoon人気記事ランキング／カスタマイズのイメージ

まず、カスタマイズのビフォーアフターをご覧ください。

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

Cocoon人気記事ランキング／カスタマイズの手順

Cocoon人気記事ランキング／ブロック機能を利用する方法

まず人気記事の表示の仕方。（既にランキングを表示している場合は読み飛ばしてください）

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

ブロックで「人気記事」を検索してクリック。

このような人気記事一覧が表示されます。

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

Cocoon人気記事ランキング／ショートコードを利用する方法

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

テーマ【Cocoon】には独自のアクセス集計機能がついているので、そのデータを元にショートコードを利用して簡単に人気記事ランキングを作成できます。

[popular_list]

ランキングの表示方法

1. ブロックを選択して上部メニューから
   [/]人気記事一覧を選択する
   （メニューバーが出ないときは何か文字を入れるとでてくるはずです）
2. またはショートコードを直接入力してもOK

このような人気記事を表示するショートコード（各オプション項目）が表示されます。

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

ランキングのオプションについて

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

[popular_list rank="1"]

さらにオプションで詳しく設定できます。

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

その他の表示オプションなどは下記を参照ください。

Cocoon人気記事ランキング／CSSはこちら

人気記事が表示されたらあとはCSSを追加するだけです。（子テーマを使用します）

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

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

turicco.com

2023年01月18日

/*人気記事ランキングの番号デザイン*/
.widget-entry-cards.ranking-visible .card-thumb::before {
top:-6px!important;
left:-5px!important;
border-radius:50%;/*角を丸くする*/
padding:2px;
}

当サイトの実際の人気記事ランキング

カスタマイズ

ボックスデザイン（囲み枠）CSSコピペOK！／ブログを見やすく装飾

2022年08月24日2023年09月21日

カスタマイズ

Cocoonで作るサイト型トップページ／オシャレなSWELL風（固定ページ、HTML、CSS使用）

2022年10月05日2023年09月20日

カスタマイズ

CSSでテキストをなめらかに点滅させる方法（コピペＯＫ）

2021年01月25日2023年09月16日

カスタマイズ

Cocoonアピールエリアのカスタマイズ／SWELL風オシャレなトップページ（ファーストビジュアル）を作ってみる

2022年06月29日2023年09月16日

カスタマイズ

タブ切り替えをHTMLとCSSで実装（JavaScriptなし／複数設置可）

2021年01月26日2023年09月16日

Cocoon人気記事ランキング／個別に色を変更するには

デベロッパーツール（HTMLの構成やCSSを見ることができるGoogleChromeの標準機能）で確認すると分かりますが、ランキングのラベル部分には全体で#666666（グレー）のカラーコードが指定されています。

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

そして１～３位までを部分的に金銀銅をイメージしたカラーに変更。

つまり、個別に色を変えたいときは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だと分かってしまう部分なので、ちょっとした部分に個性を出してみてはいかがでしょうか。