8wired

とりあえずやってみるブログ

WordPress

人気記事にCSSだけでランキングを表示する方法

投稿日:2017年1月11日 更新日:

1つ前の記事で「STINGER8でWPP Plus Widgetを使う時のフォーマット設定」というのを書きましたが、CSSだけで簡単にランキング表示が可能なので方法を載せておきます。

style.cssに以下の記述を追加するだけです。

#wpp-plus-widget {counter-reset:ranking-counter;}
#wpp-plus-widget dt {position:relative;}
#wpp-plus-widget 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だけ再読み込みすればちゃんと更新されたので事なきを得ましたが、うまく表示されないときにはマニュアルで再読み込みしてみてください。

スポンサーリンク

-WordPress
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事