こんにちは、ブログ歴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ボタン類だったり全体に丸型のデザインを多く取り入れている場合はデザインの統一性という意味で細かく設定していくのはいいことかも知れません。
