このページでは、トップページやアーカイブページに表示される「記事一覧リスト」のカスタマイズ方法について説明していきます。
カスタマイザーの起動
![投稿リストの設定項目](https://swell-theme.com/wp-content/uploads/2019/04/customizer_post_list_menu.png)
記事一覧リストのレイアウト設定
「外観」>「カスタマイズ」>「記事一覧リスト」へと進むと、まず初めに次のような設定項目が用意されています。
![記事一覧リストのレイアウト設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_post_list_layout.png)
「リストレイアウト」という項目で、好きなレイアウトを選択することができます。
カード型やリスト型など複数の種類がありますので、実際に設定してみて、気に入ったものをご利用ください。
- 「最大カラム数」設定について
-
カード型・サムネイル型のリストにのみ有効な設定で、PCサイズ・スマホサイズのそれぞれで投稿リストを何列で表示するかを選択できます。
- 「READ MORE のテキスト」設定について
-
ブログ型・リスト型(左右交互)のリストにのみ「READ MORE」というボタンが表示されるのですが、その文字列を好きなものに変更できる設定です。
「もっと読む」や「この記事を読む」など、そのブログに合ったテキストにしてみてください!
各レイアウトでの表示例
上記の「リストレイアウト」設定や「最大カラム数」設定、その他の設定などを組み合わせて様々なレイアウトへ変化させることができます。
![カード型](https://swell-theme.com/wp-content/uploads/2019/03/ps_card_style.png)
![リスト型](https://swell-theme.com/wp-content/uploads/2019/03/ps_list_style.png)
![リスト型(左右交互)](https://swell-theme.com/wp-content/uploads/2019/03/pl_list_re.png)
![ブログ型(大)](https://swell-theme.com/wp-content/uploads/2019/03/pl_blog_big.png)
![サムネイル型(1カラム)](https://swell-theme.com/wp-content/uploads/2019/03/pl_thumb_1col.png)
![サムネイル型(2カラム/文字なし)](https://swell-theme.com/wp-content/uploads/2019/03/pl_thumb_2col.png)
投稿情報の表示設定
リストレイアウトの設定エリアのすぐ下には、次のような設定エリアがあります。
![投稿情報の表示設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_post_list_design.png)
ここで、タイトルや公開日、抜粋文などの投稿に関する基本的な情報を表示するかどうか選択できます。
カテゴリーの表示設定
さらにその下に、カテゴリーの表示に関する設定エリアがあります。
![カテゴリーの表示設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_post_list_category.png)
表示位置の違い
![カテゴリー位置の違い](https://swell-theme.com/wp-content/uploads/2019/03/ps_cat_pos.png)
サムネイル画像のサイズ比率設定
記事一覧リストに表示されているサムネイル画像のサイズ比率についても設定することができます。
![サムネイル画像の比率設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_post_list_thumbnail.png)
ちなみに、ver. 2.0.1 時点で選べるのは以下の7種類です。
- 白銀比率 (1:1.414)
- 黄金比率 (1:1.618)
- 一眼 (3:2)
- ワイド (16:9)
- 横長 (2:1)
- 超横長 (5:2)
- 正方形 (1:1)
![](https://swell-theme.com/wp-content/uploads/2019/04/icon_ryo.jpg)
ここで設定した比率に合わせて各記事のアイキャッチ画像を作成すると、綺麗な表示になります!
比率による見た目の違い
![サイズ比率](https://swell-theme.com/wp-content/uploads/2019/03/ps_thumb_size.jpg)
![サイズ比率](https://swell-theme.com/wp-content/uploads/2019/03/ps_thumb_size.jpg)
マウスホバー時のオーバーレイカラー設定
投稿リストにマススホバーさせると、サムネイル画像の上にグラデーション状態のカラーレイヤーが表示されます。
この色は、以下の設定項目で指定できます。
![グラデーションカラーの設定](https://swell-theme.com/wp-content/uploads/2021/08/postlist_overcolor.png)
![グラデーションカラーの設定](https://swell-theme.com/wp-content/uploads/2021/08/postlist_overcolor.png)
タブ切り替え設定
トップページやアーカイブページに表示される記事一覧リストは、「人気順」で並び替えたリストやカテゴリーごとにソートされたリストにタブで切り替えることも可能になっています。
こういうやつ!
このタブ切り替え機能については、別記事で詳しく説明していますのでそちらをご覧ください。
![](https://swell-theme.com/wp-content/uploads/2019/02/thumb_tab_change-300x169.png)
![](https://swell-theme.com/wp-content/uploads/2019/02/thumb_tab_change-300x169.png)
記事一覧から除外するカテゴリー・タグの設定
カスタマイザーの「記事一覧リスト」メニューの中の一番下の方に、以下のような設定項目が並んでいます。
![記事一覧から除外するカテゴリー・タグの設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_exc_tag.png)
![記事一覧から除外するカテゴリー・タグの設定](https://swell-theme.com/wp-content/uploads/2019/03/setting_exc_tag.png)
これらによって、トップページやウィジェットに表示される記事一覧リストから除外したいカテゴリーやタグも設定することができます。