多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ=離脱率ダウンにつながります。
車メンテナンス・カスタマイズ・点検・修理、WordPressカスタマイズ、PC設定、車、時事ネタ、情勢、日々の出来事など津々浦々に綴っていきます。
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
2025年6月23日 (月曜日)本日の人気記事トップ10
所要時間目安: 約 3 分
今日は2025年6月23日です。
この記事は2017年1月13日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2025年6月23日 (月曜日)↓における週間月間人気記事トップ3は?↓
カーメイトのエンジンスターターでエラー15表示と対処方法 1PV
夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
歯が痛いような鈍痛が続く意外な理由と対処方法かもしれない 1PV
人間何年も生きていれば、誰もが虫歯になったり噛み合わせがおかしくなったりしてくると思います。中には、虫歯がない人もいらっしゃいますがそういった方々は、幼い頃からの口腔内環境細菌(フローラ)が整っている…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 30PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 15PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
初めての経験でした。(汗)…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。(汗)…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …
エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 30PV
車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 15PV
過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…
多くのサイトやブログにおいて人気のある記事は異なると思います。
また、
人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります。
そして、
回遊率のアップ=離脱率ダウンにつながります。
アドセンス336pxPC閲覧記事下表示1つ目コード
はじめに前提として、
「WordPress Popular Posts」というプラグインを導入していることとします。
これまでは、
ランキングの順位表示は要らないかなぁ。
なんて思っていましたが、重い腰を上げてやってみることにしました。
だって、
ただ単に「本日の人気記事」とあって10個(任意数)表示されていても、どれがいったい1番なのか分かりません。
普通は上から順番に1位、2位、3位・・・・・・。
と分かるかもしれませんが、
より分かりやすくする為です。
/* カウンターの初期化 */
.wpp-list {
counter-reset: wpp-ranking;
}
/* カウンターの値を表示 */
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
}
※順位の表示には疑似要素の「:before」、数値の制御には「counter」を使用しています。
これだけでも記事の左側に算用数字の番号が割り振られて、
順位表示はされます。
ランキング表示などに用いる数字は今回は算用数字にしていますが、他にもギリシャ文字や黒丸や白丸やローマ字などに変えることもできます。
以下参照して適宜変更してみてください。
ですが、
見栄えがイマイチというか悪いのでスタイルを適用させて綺麗にします。
.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;
}
大文字の
BORDER-RADIUS: 100%;
はスタイルを丸くするものです。
以下記事と同様です。
四角いままで良い方はコメントアウトするか削除してください。
top: 0;をコメントアウトしているのは、(/*top :0;*/の部分です。)
私の場合は真左にランキングを配置したい為です。
左上に表示させたい場合はコメントアウトを外してください。
という感じです。
.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%;にて四角い角を丸くしています。
このままでも良いのですが、
記事のタイトルと重なってしまうのでタイトルがちょっと見えにくくなってしまいます。
なので、
人気記事のタイトルを少し右側によせてあげます。
.wpp-post-title {
padding-left: 18px;
}
これで以下のように丸くてタイトルと被らず左上でもないランキング表示が可能になります。
こんな感じになります。
よろしければ参考にして頂けると嬉しいです!(^-^)!
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
さて今回は…。 なんとスマホでバッテリバッテリー容量が最大級で、連続待受時間も最大38日間という驚異的なバッテリー容量を持った高性能格安スマホが出ました。 そして、 急速充電も可能ときたもん...
郵便物には、はがきや封筒やゆうパックやレターパックライト(レターパックプラス)簡易書留や書留郵便などさまざまな種類があります。 普通郵便が料金としては、普通郵便が料金としては一番安いと思いますが、願書...
Multiplex 広告
あなたが訪問してから
⏰ 0 秒経過 🎉ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
今週の人気記事トップ10
アドセンス336pxPC閲覧記事下表示1つ目コード
よろしかったらシェアよろしくお願いします。
-STINGER PLUS+, Stinger6, Stinger7, WordPress, カスタマイズ, 伝えたいこと, 備忘録
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
The tracking opt-out feature requires cookies to be enabled.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyandTerms of Serviceapply.
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。
新着コメント