WordPress Popular Postsおしゃれにランキング順位を入れたい！

/*– 人気記事デザイン –*/
ul.wpp-list li {
border-bottom: 1px dashed #fff;/*記事間の点線と色*/
position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
margin: 10px 10px 10px 0px;/*画像の余白*/
padding: 3px;/*画像の位置*/
}

ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
display: block;/*ブロック形式で表示*/
font-size: 15px;/*文字サイズ*/
color: #341e73;/*文字色*/
padding: 12px;/*タイトル位置*/
text-decoration: none;/*タイトルの下線なし*/
}

ul.wpp-list li a.wpp-post-title:hover {
color: #4169e1;/*ホバー時のタイトル色*/
}

ul.wpp-list li:before {/*ランキングカウンター全体*/
content: counter(wpp-count);/*カウンターを表示*/
display: block;/*ブロック形式で表示*/
position: absolute;/*絶対位置*/
font-size: 16px;/*数字サイズ*/
font-weight: bold;/*数字を太字に*/
color: #fff;/*数字の色*/
background-color: #341e73;/*背景色*/
padding: 5px 15px;/*縦と横の幅*/
border-radius: 6px;/*角の丸み*/
right: 0;/*右からの位置*/
bottom: 0;/*下からの位置*/
opacity: 1;/*透明度*/
z-index: 5000;/*重なりの順序*/
}

ul.wpp-list li {
counter-increment: wpp-count;/*カウント数*/
}

/* ウィジェットタイトル部分 */
.widget-area .widget h2 {
text-align:center; /* タイトルの中央寄せ */
line-height: 20px; /* 高さ */
font-size: 15px; /* 文字の大きさ */
color: #fff; /* 文字色 */
background-color: #4169e1; /* 背景色 */
border-radius: 3px; /* 角に丸みをつける */
padding: 2px 10px; /* 左と上下に余白 */
}
.widget-area .widget ul {
list-style: disc; /* リストマーク */
padding-left:30px; /* 左に余白 */
}

.widget-area .widget a {
color: #00008ｆ; /* リンク部分の文字色 */
text-decoration: none; /* リンク部分にアンダーライン */
font-weight: normal; /* 文字の太さはノーマル */
}

.widget-area .widget a:visited {color: #00008ｆ;}
.widget-area .widget a:hover{color: #4169e1;}