WPPで、人気記事のサムネイルにランキングアイコンを表示

<div class="blog-container">
	<?php 
		if (function_exists('wpp_get_mostpopular')) {
  			$arg = array (
				'range' => 'weekly',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
    			'order_by' => 'views',//表示順｛views（閲覧数),comments（コメント数）,avg（1日の平均）}
				'post_type' => 'all_',//ポストタイプを指定 {post, page, カスタムポスト名}
				'stats_date' => 1,//日付を表示 { 1(表示), 0(非表示) }
				'stats_date_format' => 'Y.m.d',//日付表示フォーマット
				'limit' => 4, //表示数
				'post_html' => '<li"><article class="rank">
									<div class="blog-grid">
										<div class="blog-i">
											<div class="blog-icon zoomIn">
												{thumb}
											</div>
											<div class="wpp_rank">
												{item_position}
											</div>
										</div>
										<div class="blog-article">
											<h4 class="title">{title}</h4>
											<div class="time2">{date}</div>
										</div>
									</div>
        						</article></li>'//表示されるhtmlの設定
			);
			//ランキングを表示  
			wpp_get_mostpopular($arg);//リストの出力	
		}
	?>
</div>

.blog-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
    gap: 1em;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    gap: 1em;
	border-bottom: 1px solid #ccc;
	padding-bottom:1em;
}

.blog-icon {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-right: 1.5em;
	object-position: 50% 50%;
	margin-bottom: 12px;
	border-radius: 5px;
}

.blog-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title {
	text-align: left;
	font-size: 1.3em;
}

@media screen and (min-width: 740px) {

	.blog-container {
		grid-template-columns: repeat(4, 1fr);
	}

	.blog-grid {
		grid-template-columns: repeat(1, 1fr);
		border-bottom: none;
		padding-bottom:0;
	}

}

/* ランキング */

.blog-i {
	position: relative;
}

.wpp_rank {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 20px;
	z-index: 99;
	top: -7px;
	left: -7px;
	text-align: center;
	font-size: 2rem;
	line-height: 40px;
	font-weight: 400;
	color: #fff;
}

.blog-container li:first-child .wpp_rank {
	background: #9B7D02;
}

.blog-container li:nth-child(2) .wpp_rank {
	background: #828282;
}

.blog-container li:nth-child(3) .wpp_rank {
	background: #873800;
}

.blog-container li:nth-child(4) .wpp_rank {
	display: none;
}

@media screen and (min-width: 1250px) {

	.wpp_rank{
		width: 50px;
		height: 50px;
		border-radius: 25px;
		top: -10px;
		left: -10px;
		text-align: center;
		vertical-align: middle;
		font-size: 2.5rem;
		line-height: 50px;
	}
	
}