CSSだけでpopular-postsに色付け＆順番表示

WordPressの固定ページを、ここまで変えられる。
プラグインを増やさず、テーマを改造せず、CSSだけでデザインを作り込む。

今回やったのは、人気記事一覧ページのビジュアル強化。
色分け、レスポンシブ対応、サムネ整形、そして順位バッジ表示。
すべてCSSのみで実装しました。

さて・・・・

やったこと一覧

• LIFE / GOURMET / COOKING を色分け
• 各カテゴリ内を PC3列・タブレット2列・スマホ1列に最適化
• サムネ画像を正方形に統一
• タイトルを複数行制御
• アクセス数を重ならないよう整理
• サムネ左上に順位番号を自動表示

テーマはそのまま。
WordPress Popular Posts もそのまま。
追加CSSだけで完成です。

1. カテゴリを色分けして見やすく

3カラムのブロックにクラスを付け、背景色を付与。
視認性が一気に上がります。

.page-id-104252 .pp-cats > .wp-block-column:nth-child(1){
  background: #eef6ff;
}
.page-id-104252 .pp-cats > .wp-block-column:nth-child(2){
  background: #fff3e6;
}
.page-id-104252 .pp-cats > .wp-block-column:nth-child(3){
  background: #eefaf1;
}

柔らかいトーンにすると、雑誌風にまとまります。

---

2. 各カテゴリ内をレスポンシブグリッド化

WPPのリストをグリッドに変更。

.page-id-104252 .pp-cats .wpp-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}@media (max-width: 1024px){
  .page-id-104252 .pp-cats .wpp-list{
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 640px){
  .page-id-104252 .pp-cats .wpp-list{
    grid-template-columns: 1fr;
  }
}

これだけで
PCは3列、タブレット2列、スマホ1列。
自動で整います。

---

3. サムネ画像を統一

正方形トリミングで段差を消す。

.page-id-104252 .pp-cats .wpp-list li img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
}

見た目の完成度が一段上がります。

---

4. タイトルとアクセス数の整理

タイトルは3行まで。
その下にアクセス数を表示。

.page-id-104252 .pp-cats ul.wpp-list > li{
  display: flex;
  flex-direction: column;
}

重なり問題もCSSだけで解決できます。

---

5. サムネに順位番号を表示

CSSカウンターを使えば、HTMLを書き換えずに順位を出せます。

.page-id-104252 .pp-cats > .wp-block-column{
  counter-reset: ppRank;
}.page-id-104252 .pp-cats .wpp-list li{
  counter-increment: ppRank;
  position: relative;
}.page-id-104252 .pp-cats .wpp-list li::before{
  content: counter(ppRank);
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,.8);
  color: #fff;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

各カテゴリごとに1位から自動で番号が付きます。

---

なぜCSSだけでやるのか

• プラグインを増やさない
• テーマを壊さない
• 更新に強い
• 軽い

大事なのは、「必要以上に仕組みを増やさないこと」。

人気のWordPressを使って、売上・集客につながる構成・デザインのホームページをお作りします。Webサイトを作ってみたいけどどうしたらいいかわからないという方も、「専門用語を使わない丁寧なコミュニケーション」を心がけておりますので、ご安心ください！
格安サイトから大規模なECサイトまで対応いたします。