Posts」を利用した、アクセス数ランキングを表示させています。今回はこのランキングに表示されている順位を、CSSだけでいい感じに表示させてあげようというものです。Posts」の導入の仕方やオプションなどの説明は、こっちで詳しく書いたので参考にして下さい。順位をCSSだけで表示する順位の表示には疑似要素の「:before」、数値の制御には「counter」を使用します。wpp-ranking;}これでリストの<li>タグの手前に、順位の数値が挿入され、表示されるようになります。(画像はスタイル適用済み)カウンター変数の名称に「wpp-ranking」を使用していますが、他で使ってなさそうな名前なら何でも構いません。́・ω・`)counterの第2引数は「list-style-type」でdecimalは算用数字。デフォルトだけど一応。他にもローマ数字や、ローマ字、漢数字など色々あります。list-style-type-スタイルシートリファレンスこの実装の方法は、こちらを参考にさせてもらいました。表示した順位にスタイルを当てるそのままだと、ちょっと残念な表示になるので、スタイルをあてていい感じに表示させます。サムネイルの左上にかぶさるように表示させたいので、1つのリストを基準(relative)にして、絶対座標(absolute)で置きました。1;}list-style-typeは、もう一つ上の<ul>(.wp-list)に付けた方が良いのかもしれないですが、めんどくさいので<li>に混ぜています。noneが指定されていたら必要ありません。サムネイルにピッタリ角が合うのが嫌だったので、上と左にpaddingを付けて、順位の方は上と左に隙間をなくす指定をしています。透明にしたかったのでopacityを使ってみたんですが、文字も薄くなるのが嫌だったので、背景にだけ透過色を指定しています。色は当サイトのイメージが緑なので緑っぽい色になっています。お好きな色にしてお使い下さい!z-indexを1に上げているのは、サムネのhover時に順位が隠れてしまうからです。参考にしたのはこちらなんですが、うまくいかなかったので、だいぶ書き換えています。【WordPress】CSSでナンバリング!人気記事のランキング順位を表示する方法1位~3位だけ背景色を変える別に色を変えるだけじゃなく、他に変化を付けてもいいと思いますが、一応背景色だけ各順位に指定する方法です。0.9);}これで1位~3位だけ特別なスタイルを当てることが出来ます。セレクター」等で検索してみて下さい。終わりにランキングを表示しているのに、順位が書いていないので分かり辛いな~と思いつつも、そこまで優先度は高くないか...、と後回しにしてました。別件で、ランキング周りで手を入れたいことがあったので、ついでにちゃちゃっとやってしまおうと手を入れた次第です(^q^)その別件というのが、サイドバーで表示している「デイリーのランキング」を、もっと見れるようにしたり、「ウィークリー、マンスリー、トータル」それぞれを見れるようにしたいなぁという内容です。これは明日にでも記事を書こうと思っています。お楽しみに!→書きました。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*「日本語が含まれない」「URLが4つ以上含まれる」場合は無視されます。今日はブログを開設してちょうど1ヶ月が経った日です。...WordPressに新しいテーマ(STINGER5)を適用させるまずWordPressを導入して最初にすることと言えば。昨日更新するとか言っておいて遅れました。Posts】ショートコードでサクッと人気記事ランキングの固定ページを作る方法プロフィールまちゃぬ2015年5月までIT系のエンジニアやってました。現在はフリーランスです(・∀・)雑食系のブログですが婚活をメインにしたいと思っています。一個も婚活記事書いてないけどw詳しくは「当サイトについて」をご覧下さい。(16)スポンサーリンク↑の広告スペースを「ココナラ」にて販売中です。去年の古い灯油でストーブが壊れた!直す方法は簡単!替え芯の交換は最後の手段!【爆笑】【エロ注意】監獄学園11話が面白すぎる!【プリズンスクール】エリンギ・ブロコビッチ2TBを超えるHDDを導入・増設する方法と注意点XAMPPのMySQLをコマンドプロンプトから使用する。