当ブログを紹介いただいたサイトを掲載します受付中

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

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

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

この2点について書いています
  1. ランキング部分を丸くして少し可愛くする
  2. 個別に1~3位までのランキング番号部分の背景色を変更する
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

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

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

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

人気記事ランキング
スポンサーリンク

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

  • Step1
    人気記事を表示させる

    2つの方法があり、どちらの方法でもOKです。

    1. ブロック機能 NEW
    2. ショートコード利用
  • Step2
    CSSをコピペする

    ここでスタイルを整えます。

  • 完成

    これだけ!

スポンサーリンク

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

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

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

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

人気記事

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

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

人気記事
設定できる項目
  • 表示する記事数
  • データの集計期間
  • 表示タイプ(カードの形状)
  • タイトルの文字の太さ
  • 矢印を表示する
  • 横並びにする
  • ランキングの番号を表示する
  • PV数の表示

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

スポンサーリンク

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

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

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

\こちらがショートコード/
[popular_list]

ランキングの表示方法

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

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

ショートコード書き方の例
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]

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

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

[popular_list rank="1"]

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

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

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

スポンサーリンク

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

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

CSSで設定すること
  • ランキング番号の枠を丸くする
  • 位置を少しずらす
/*人気記事ランキングの番号デザイン*/
.widget-entry-cards.ranking-visible .card-thumb::before {
	top:-6px!important;
	left:-5px!important;
	border-radius:50%;/*角を丸くする*/
	padding:2px;
}

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

\ショートコードで表示しています/
カスタマイズ
ボックスデザイン(囲み枠)CSSコピペOK!ブログを見やすく装飾
カスタマイズ
CSSでなめらかに点滅させる方法(コピペOK)
カスタマイズ
Cocoonで作るサイト型トップページ/オシャレなSWELL風(HTML、CSS使用)
カスタマイズ
Cocoon見出しデザインカスタマイズと装飾をリセットする方法/CSSコピペOK
カスタマイズ
Cocoonアピールエリア/SWELL風オシャレなトップページ(ファーストビジュアル)を作ってみるカスタマイズ

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

デベロッパーツール(HTMLの構成やCSSを見ることができるGoogleChromeの標準機能)で確認すると分かりますが、ランキングのラベル部分には全体で#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だと分かってしまう部分なので、ちょっとした部分に個性を出してみてはいかがでしょうか。

Comment

  1. ulysses より:

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

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