【Cocoonカスタマイズ】サイドバーに設置している、人気記事ランキングのアイコンを丸くしたい

WordPressブログテーマCocoonのサイドバーに設置している、人気記事ランキングのアイコンを丸くしたい！

サイドバーに人気記事を表示したんだけど、1位、2位、3位…って表示されているアイコンを可愛くカスタマイズしたいけど、どうしたらいいんだろう？

できればデフォルトの四角じゃなくて、柔らかい雰囲気にしたいから丸いアイコンにしたいな～。

それなら、追加CSSに、今から説明するコードをコピーして貼り付けると、簡単にカスタマイズできます！

＼コードはこちら！／

/* 人気記事ランキング style1 */
.widget-entry-cards.ranking-visible .card-thumb::before {
   top:-6px!important; /*上からの位置*/
   left:-5px!important; /*左からの位置*/
   border-radius:100%; /*角を丸くする*/
}

すると、以下の画像のようなスタイルに変更されます！

／Happy !＼

CSSが苦手な私でも、コピペで簡単に変更することができた！

このように、簡単にできるところもあるので、自分好みのブログサイトにカスタマイズできたらいいですよね！

コードの意味がわからないところは、AIに聞いてみると、わかりやすく答えてくれます。
ちなみに私は、Geminiにコードのことやカスタマイズのことをいろいろ相談しています。確実じゃない時もあるので、試しながら参考にさせてもらってます。

※今回は、こちらの記事を参考にカスタマイズさせていただきました！

＼詳しく記載された記事はこちら！／

Cocoon人気記事ランキング｜表示方法とラベルの色やスタイルを変更するカスタマイズ

Cocoonテーマには独自のアクセス集計機能が搭載されており、そのデータを元に人気記事ランキングを簡単に作成できます。サイドバーやトップページに設置すれば、読者の目を引きやすく記事の回遊率アップにも効果的です。この記事では以下の２点について...

turicco.com

Turiccoさんの記事は、とてもわかりやすく、詳しく解説されているので、いつも参考にさせていただいております！

ありがとうございました(*‘ω‘ *)