コロナに負けるな!ステイホームでブログを書きます!

【Cocoon】人気記事のランキング番号をカスタマイズ

こんにちは、ブログ歴15年、Wordpress歴8年のLeoです。

今日は無料テーマ最強の「Cocoon」で、サイドバーにウィジットで表示させている「人気記事一覧」で表示される順位の数字周りをカスタマイズした話と方法をサクッと紹介します。

  • 人気記事一覧ランキング表示のカスタマイズ方法
  • カスタマイズするメリット

今回のカスタマイズでやったこと

ざっくり図で見せると上記の様な事をやりました。

デフォルトではランキングの数字が正方形の中に入っていますが、それを丸に整形し、さらに1〜3位の背景をフラット寄りの色合いに変更しました。

CSSにて整形

やり方は簡単です。

以下のCSSコードをブチ込むだけ。

.sidebar .widget-entry-cards.ranking-visible .card-thumb::before { color: #fff; background:#596275; font-size:15px; font-weight: 800; border-radius: 15px; font-style: italic; left: -5px; top: -5px; opacity: 1; padding-left:2px; padding-right:4px; padding-top:3px; padding-bottom:2px; }

これで全てのバッジ背景を#596275という色に指定し、角を丸くしています。leftとtopに「-5px」を指定して枠外にはみ出させています。

.widget-entry-cards.ranking-visible .no-1 .card-thumb::before { background: #fdcb6e; } .widget-entry-cards.ranking-visible .no-2 .card-thumb::before { background: #b2bec3; } .widget-entry-cards.ranking-visible .no-3 .card-thumb::before { background: #cd6133; } .widget-entry-cards.ranking-visible .card-thumb { counter-increment: p-rank; } .sidebar .widget-entry-cards.ranking-visible .card-thumb a:hover { transform: scale(1.05); }

以上で1位〜3位に個別の色を指定します。論理的に言うと任意の順位を色やサイズを変えることもこの応用でできます。

このカスタマイズのメリット

正直、デザイン的な好み以外メリットはないですが、1位〜3位がメダルと同じ金・銀・銅色をしていることから、メダルと同じ丸型にすることはその意味ではメリットというか、デザイン性のかっこよさに繋がると言う要素があるかも知れません。

あとは、プロフィール画像だったりSNSボタン類だったり全体に丸型のデザインを多く取り入れている場合はデザインの統一性という意味で細かく設定していくのはいいことかも知れません。

この記事が気に入ったら
いいね!しよう

Leo Miyanagaを
Like
LikeLoveHahaWowSadAngry
このブログを書いてる人
Leo

コロナで色々バグった起業家😷
写真家/ブロガー/YouTuberなど色々やってます。愛機はα7III & RX100VII。
シアトル生まれ、大阪育ち→シアトルにも10年以上住んでましたが今は大阪ベース。
このブログではLeoの気になるコトや毎日の色んなコトを記録しています!
詳しいプロフィールはこちら

Leoをフォローする
Web・Wordpress WORK
LEO LOG

Comment 気軽にどうぞ!!

トップへ戻る
タイトルとURLをコピーしました