Cocoon/人気記事ランキングを表示して可愛く、個別にラベル背景色を変更するカスタマイズ(ショートコードのほかブロックでも表示できるようになりました)

アイキャッチ/人気記事カスタマイズ

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

  • ランキング部分を丸くして少し可愛く
  • 個別に1~3位までの背景色を変更する

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

カスタマイズのイメージ

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

人気記事ランキング

カスタマイズの手順

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

    どちらの方法でもOKです。

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

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

  • STEP3
    完成

    これだけ!

ブロック機能を利用する方法

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

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

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

人気記事

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

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

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

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

ショートコードを利用する方法

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

テーマ【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

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

CSSはこちら

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

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

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

\ショートコードで表示しています/
カスタマイズ
ボックスデザイン(囲み枠)CSSコピペOK!/ブログを見やすく装飾しよう
カスタマイズ
Cocoonで作るサイト型トップページ/オシャレなSWELL風(固定ページ使用)
カスタマイズ
Cocoonアピールエリアのカスタマイズ/SWELL風オシャレなトップページ(ファーストビジュアル)を作ってみる
カスタマイズ
Cocoon(コクーン)でカスタマイズ/HTML・CSSの編集方法
カスタマイズ
HTMLとCSSだけでタブ切り替えを自作する(複数設置可/JavaScriptなし)

個別に色を変更するには

デベロッパーツールで確認すると分かりますが、ランキングのラベル部分には全体で#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

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