【クリエイターモード】ランキングの順位のアイコンに画像を表示させることはできますか。

◆順位の数字に背景画像を指定する方法

順位の表示に、rank-1、rank-2・・・のように順位別のclassをつけることで、
画像を表示させることができます。

順位を出力する変数タグ

<{$ranking_item.list[i].num}>

を囲む要素（div、p、spanなど）に、

class="rank-<{$ranking_item.list[i].num}>"

のように、順位を判別するclassを書くことで、rank-1、rank-2・・・のように順位別のclassをつけることができます。

それぞれのclassに対して、王冠などの画像が表示されるようにデザインしてください。

以下はCSSで背景画像として指定するサンプルソースです。

HTML例）

<span class="rank-num rank-<{$ranking_item.list[i].num}>"><{$ranking_item.list[i].num}></span> 

CSS例）

.rank-num {
	background: #999;
	color: #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: block;
	margin: 0 auto 5px;
	line-height: 28px;
} 
.rank-1,
.rank-2,
.rank-3 {
	color: transparent;
	border-radius: none;
	width: 100%;
	display: block;
	text-indent: -9999px;
}
.rank-1 {
	background: transparent url(/images/original_design_default/samplesource/3/rankIcon1.png) no-repeat center;
}
.rank-2 {
	background: transparent url(/images/original_design_default/samplesource/3/rankIcon2.png) no-repeat center;
}
.rank-3 {
	background: transparent url(/images/original_design_default/samplesource/3/rankIcon3.png) no-repeat center;
}

ソースは一例です。
ショップ様でのデザインにあわせて変更してください。

◆<img src="画像のURL">で画像を表示する方法

ランキングの順位　1、2・・・
を使用して画像ファイル名を命名し、HTMLに<img>を記述し画像で表示表示させることも可能です。

例）
1位のアイコン用の画像を
ファイル名　rank1.png　と命名する。
画像はファイルサーバーにアップロードする。

HTMLには画像のURLを記載

<div class="rank-num"><img src="https://gigaplus.makeshop.jp/ショップID/フォルダ名/rank<{$ranking_item.list[i].num}>.png" alt="<{$ranking_item.list[i].num}>位"></div>