1つ前の記事で「STINGER8でWPP Plus Widgetを使う時のフォーマット設定」というのを書きましたが、CSSだけで簡単にランキング表示が可能なので方法を載せておきます。
style.cssに以下の記述を追加するだけです。
.wpp-list {counter-reset:ranking-counter;}
.wpp-list dt {position:relative;}
.wpp-list dt::before {
position:absolute;
top:0px;
left:0px;
width:22px;
height:22px;
line-height:22px;
font-size:13px;
text-align:center;
color:#ffffff;
background-color:#424242;
content:counter(ranking-counter, decimal);
counter-increment: ranking-counter;
opacity:0.9;
z-index:1;
}
記述を追加すると、下記のようにサムネイルの左上にランキングが表示されます。
top、leftを-5pxなどに変更すればランキングがサムネイルから少しずれて表示されます。
まとめ
CSSに記述するだけで簡単に追加できるので、ぜひ試してみてください。
実はWPP Plus Widgetの機能に追加しようと思ったのですが、簡単に追加できることがわかり見送りました。
そういえば、動作の確認中、ページの再読み込みしてもstyle.cssが更新されないことが多々ありましたが、私だけ？
マニュアルでstyle.cssだけ再読み込みすればちゃんと更新されたので事なきを得ましたが、うまく表示されないときにはマニュアルで再読み込みしてみてください。
コメント