WordPress List Category Postsで出力されるリストを「ブログらしい見栄え」に整える

List Category Postsで出力されるリストを、標準の箇条書きから「ブログらしい見栄え」に整えるための具体的なCSSコード例をご紹介します。

リストをカード型（横並び）にするカスタマイズ
1. 1. ショートコードの記述
2. 2. 追加CSSに貼り付けるコード
表示をさらに絞り込む便利なテクニック
1. 次のステップ

リストをカード型（横並び）にするカスタマイズ

デフォルトのままだと縦一列に並んでしまいますが、以下のCSSを使うと、アイキャッチ画像とタイトルがセットになったカード形式で表示できます。

1. ショートコードの記述

まず、CSSを適用しやすくするために class オプションを追加します。

<code>[catlist name="news" numberposts=6 thumbnail=yes date=yes excerpt=yes class="custom-card-list"]</code>

1	<code>[catlist name="news" numberposts=6 thumbnail=yes date=yes excerpt=yes class="custom-card-list"]</code>

2. 追加CSSに貼り付けるコード

WordPressの「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードをコピー＆ペーストしてください。

CSS

/* リスト全体の枠組み */
.custom-card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 画面幅に合わせて自動調整 */
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* 各記事のカード */
.custom-card-list li {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s;
}

.custom-card-list li:hover {
    transform: translateY(-5px); /* ホバー時に少し浮かす */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* アイキャッチ画像 */
.custom-card-list img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

/* タイトルと日付の余白 */
.custom-card-list a {
    display: block;
    padding: 10px 15px 5px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.lcp_date {
    display: block;
    padding: 0 15px 10px;
    font-size: 0.8em;
    color: #888;
}

/* リスト全体の枠組み */

.custom-card-list {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 画面幅に合わせて自動調整 */

gap: 20px;

list-style: none;

padding: 0;

}

/* 各記事のカード */

.custom-card-list li {

border: 1px solid #ddd;

border-radius: 8px;

overflow: hidden;

background: #fff;

transition: transform 0.2s;

}

.custom-card-list li:hover {

transform: translateY(-5px); /* ホバー時に少し浮かす */

box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}

/* アイキャッチ画像 */

.custom-card-list img {

width: 100%;

height: 150px;

object-fit: cover;

display: block;

}

/* タイトルと日付の余白 */

.custom-card-list a {

display: block;

padding: 10px 15px 5px;

font-weight: bold;

text-decoration: none;

color: #333;

}

.lcp_date {

display: block;

padding: 0 15px 10px;

font-size: 0.8em;

color: #888;

}

表示をさらに絞り込む便利なテクニック

リストを表示する際、特定の条件を除外したり追加したりすることも可能です。

特定の記事を除外したい exclude="10,12" （記事IDが10と12の記事を表示しない）
現在の投稿と同じカテゴリーを自動で表示したい categorypage="yes" （これを固定ページではなく、個別の投稿テンプレートに入れると、その記事と同じカテゴリーの関連記事リストになります）
タグで絞り込みたい tags="recommend" （特定のタグがついた記事のみ）

次のステップ

もし**「画像をもっと大きくしたい」「抜粋の文字数を制限したい」**といった具体的な要望があれば教えてください。ショートコードの引数やCSSの数値を調整して、理想の形に近づけるお手伝いをします。

このCSSを試してみて、表示が崩れたりうまくいかない部分はありましたか？