SWELLの人気記事のランキングのラベルをカスタマイズしました！

有料テーマの人気記事を表示するとランキングの数字が表示されます。

アイキャッチ画像に文字を入れたら、ちょっと文字と重なるんです。

ランキングのラベルをを少し小さくカスタマイズしました。

このブログのCSSを紹介します。

よかったらコピペして使ってください。

追記してるCSS

/* ランキングのラベル */
.-w-ranking .p-postList__item:nth-child(1)::before {  
	background-image:none;
	background-color:#ffa500; 
	color: #ffffff;
	width: 20px;
    height: 20px;
}
.-w-ranking .p-postList__item:nth-child(2)::before {  
	background-image:none;
	background-color:#ffa500; 
	color: #ffffff;
	width: 20px;
    height: 20px;
}

.-w-ranking .p-postList__item:nth-child(3)::before {  
	background-image:none;
	background-color:#ffa500; 
	color: #ffffff;
	width: 20px;
    height: 20px;
}

.-w-ranking .p-postList__item:nth-child(4)::before {  
	background-image:none;
	background: #878787; 
	color: #ffffff;
	width: 20px;
    height: 20px;
}	

.-w-ranking .p-postList__item:nth-child(5)::before {  
	background-image:none;
	background: #878787; 
	color: #ffffff;
	width: 20px;
    height: 20px;
}

このブログのCSSです。

上から1位から5位のCSSになっています。

カッコの数字が順位です。