◆順位の数字に背景画像を指定する方法
順位の表示に、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>


