Arkhe 投稿リストレイアウトテキスト型のデザインをカスタマイズ

2023.11.192024.10.7

WordPressテーマArkheでは、投稿リストのレイアウトスタイルとして「カード型」「リスト型」「テキスト型」の3パターンが用意されています。このうちの「テキスト型」のスタイルは、標準では記事タイトル上に公開日・更新日・カテゴリーなどが表示される2行仕様になっています。

SP表示では文句なしの良いデザインなのですが、PC表示などの横幅がある場合においては記事タイトルが短いと空白が多くできてしまうため、自分は公開日・更新日・カテゴリー・タイトルなどの全要素を2行ではなく1行に並べたいと思いました。

Arkhe Patterns Libraryには、gnPostList03(汎用投稿リスト03)という今回の要件を満たしていそうなパターンが掲載されているのですが、こちらは投稿リストを挿入してarkhe-gnPostList03というclassを与え、カスタマイズを行っています。自分は、サイト全体のテキスト型のスタイルに対してcssを適用したいため、gnPostList03をそのまま使うことはできませんでした。

そこで雑ですが、gnPostList03を改良して以下のようなコードを追加しました。~~完成形は本サイトのトップページなどで表示されているテキスト型の投稿リストです。~~(現在はデザイン変更済み)

@media (min-width: 1000px) {
    /* 更新日の非表示 */
    .p-postList.-type-simple .c-postTimes__item.u-flex--aic.-modified {
        display: none;
    }

    /* カテゴリーを非表示 */
    .p-postList.-type-simple .p-postList__category {
        display: none;
    }

    /* 公開日のスタイリング */
    .p-postList.-type-simple .c-postTimes__item.u-flex--aic.-posted {
        width: 115px;
        margin-right: 0.5rem;
        margin-bottom: 0;
    }

    /* 投稿リスト本体のスタイリング */
    .p-postList.-type-simple .p-postList__body {
        display: flex;
        flex-direction: row;
        align-items: baseline;
    }
}

CSS

本サイトでは、テキスト型を使用する場合に更新日とカテゴリーは不要なので非表示にしました。また公開日にはwidthを指定しています。これは、公開日が「XXXX年XX月XX日」の時と「XXXX年XX月X日」の時で、タイトルの表示開始位置が半角スペースおよそ1つ分ズレてしまうのを防ぐために公開日の表示幅を固定しています。必要に応じて変更を加えて下さい。

以上、Arkheで投稿リストレイアウト「テキスト型」のデザインをカスタマイズする方法でした。