+本日の人気記事TOP10+
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法14
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法9
- アイドリングストップシステム異常警告灯表示対処方法8
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- お風呂の枕バスピローおすすめと自作してみた。5
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)5
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- 車のハンドルが重い時にできる対処方法4
多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ=離脱率ダウンにつながります。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
人気記事一覧
車のキーナンバー確認方法。キーレス紛失や壊れた時
148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法
75,488件の PV
Windows10でエラーコード0x800705b4の対処方法
67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整
40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法
31,411件の PV
車のキーナンバー確認方法。キーレス紛失や壊れた時 148,561件の PV
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 105,367件の PV
Windows10,Windows8.1プロダクトキー確認方法 75,488件の PV
Windows10でエラーコード0x800705b4の対処方法 67,219件の PV
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 41,164件の PV
スロットルポジションセンサー調整で不安定なアイドリング調整 40,227件の PV
車から異音の原因。カラカラ、カタカタ、コトコトなど…。 38,151件の PV
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 37,221件の PV
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 36,232件の PV
カーメイトのエンジンスターターでエラー15表示と対処方法 31,411件の PV
この記事を読まれている方におすすめ一覧クリック
そこでCSSで人気記事ランキングに順位表示をつける方法です。
はじめに前提として、
「WordPress Popular Posts」というプラグインを導入していることとします。
私のサイト・ブログでも記事の一番上に「本日の人気記事」というものを設置しています。
これまでは、
ランキングの順位表示は要らないかなぁ。
なんて思っていましたが、重い腰を上げてやってみることにしました。
だって、
ただ単に「本日の人気記事」とあって10個(任意数)表示されていても、どれがいったい1番なのか分かりません。
普通は上から順番に1位、2位、3位・・・・・・。
と分かるかもしれませんが、
より分かりやすくする為です。
まずは、以下のCSSを記述して初期化します。
/* カウンターの初期化 */
.wpp-list {
counter-reset: wpp-ranking;
}
/* カウンターの値を表示 */
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
}
※順位の表示には疑似要素の「:before」、数値の制御には「counter」を使用しています。
これだけでも記事の左側に算用数字の番号が割り振られて、
順位表示はされます。
ランキング表示などに用いる数字は今回は算用数字にしていますが、他にもギリシャ文字や黒丸や白丸やローマ字などに変えることもできます。
以下参照して適宜変更してみてください。
ですが、
見栄えがイマイチというか悪いのでスタイルを適用させて綺麗にします。
次に、表示した順位にスタイルを当てて綺麗に魅せるCSSです。
.wpp-list li {
position: relative;
list-style-type: none;
padding-top: 5px;
padding-left: 5px;
}
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
background: rgba(107, 107, 107, 0.5);
BORDER-RADIUS: 100%;
color: #fff;
font-size: 1px;
line-height: 1;
padding: 4px 8px;
position: absolute;
left: 0;
/*top: 0;*/
top: 8px;
z-index: 1;
}
上記CSSを記述すると、
人気記事のランキング左側の算用数字にスタイルが当てられてそれなりに綺麗に魅せることができます。(見えるようにすることができます。)
大文字の
BORDER-RADIUS: 100%;
はスタイルを丸くするものです。
以下記事と同様です。
四角いままで良い方はコメントアウトするか削除してください。
四角いままですと以下のようになります。
top: 0;をコメントアウトしているのは、(/*top :0;*/の部分です。)
私の場合は真左にランキングを配置したい為です。
左上に表示させたい場合はコメントアウトを外してください。
次に、トップ3だけ色分けしてみます。
- 1位はピンク色、
- 2位は黄色、
- 3位はオレンジ色、
という感じです。
その1位から3位までの人気記事に上記の色を付けるCSSは以下になります。
.wpp-list li:nth-child(1):before {
background: rgba(255, 88, 196, 0.9);
BORDER-RADIUS: 100%;
}
.wpp-list li:nth-child(2):before {
background: rgba(245, 171, 31, 0.9);
BORDER-RADIUS: 100%;
}
.wpp-list li:nth-child(3):before {
background: rgba(255, 121, 37, 0.9);
BORDER-RADIUS: 100%;
}
こちらも同じくBORDER-RADIUS: 100%;にて四角い角を丸くしています。
このままでも良いのですが、
記事のタイトルと重なってしまうのでタイトルがちょっと見えにくくなってしまいます。
なので、
人気記事のタイトルを少し右側によせてあげます。
人気記事のタイトルと被らない程度に以下のCSSを追記します。
.wpp-post-title {
padding-left: 18px;
}
padding-leftのpx数はご自分のサイトやブログに合わせて適宜変更してみてください。
これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。
こんな感じになります。
よろしければ参考にして頂けると嬉しいです!(^-^)!
参考にさせていただいたサイト)
おすすめの記事一部広告
- ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法14
- Windows10で動かないアプリを動かす方法213
- カーメイトのエンジンスターターでエラー15表示と対処方法9
- アイドリングストップシステム異常警告灯表示対処方法8
- エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー6
- お風呂の枕バスピローおすすめと自作してみた。5
- Windows10起動しない使えないアプリを起動する方法(筆ぐるめなど)5
- シガーライターがない車にシガーライターソケットの付け方と増設方法5
- エクストレイルT32で電動レカロをバッ直でなく車に取り付ける方法5
- 車のハンドルが重い時にできる対処方法4
おすすめ!!
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
Multiplex 広告
あなたにおすすめ
-
車のエアコンが臭い時のおすすめの対処方法はフィルター交換
そろそろ、春日和になってきました。そこで、 これから暑くなる夏やジメジメする梅雨時にはエアコンは必須になると思います。特に車においては外で走ったり外に駐車されている為に、 室内のエアコンより臭いの原因…
インフィード広告アドセンス
-
Amazonプライム会員になる10のメリットを紹介してみます。
Amazonプライムを見てみる以前に「Amazon(アマゾン)で間違った商品の返品方法」というタイトルで記事にしたことがありますが、 今回はそのAmazon(アマゾン)のプライム会員になるメリットを1…
インフィード広告アドセンス
-
年末調整の書き方と提出書類や方法など
今年も(毎年ですが…。)そろそろ年末調整の時期が近づいてきました。 そろそろ、サラリーマンの方々には会社から年末調整の提出書類が渡される頃ではないでしょうか?必要な書類や書き方となると、意外と知らない…
インフィード広告アドセンス
「STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧
アドセンス336pxPC閲覧記事下表示1つ目コード
アクセスランキング
よろしかったらシェアよろしくお願いします。
-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
comment