「SWELL」でwebサイトの記事一覧リストを設定してみた！

WordPress初心者のエディター小林が、WordPressで人気のテーマ「SWELL」を実際に使い、学びながら紹介していく本記事。今回のテーマは、「記事投稿ページの設定方法」について。

その細かい手順を画像付きで、ゼロから丁寧に解説していきます！

WordPressの人気テーマ「SWELL」についての関連記事はこちら。

まずは、SWELLの超便利機能「カスタマイザー」から

「SWELL」では、WordPress管理画面にある「カスタマイザー」からサイトのビジュアルやデザインに関するあらゆる設定をここから行えます！

「カスタマイズ」をクリック。
（呼称は「カスタマイザー」なのに表示は「カスタマイズ」。。）

カスタマイザーでは、左側の設定項目で変更した設定を、右画面のプレビューでその都度確認しながら作業ができるのです！とても便利！

記事一覧リストとは

今回は、SWELLの「記事一覧リスト」の項目を設定していきます。

記事一覧リストとは、以下のような、記事の一覧をホーム画面上で見ることができる箇所のことです。

このリストのデザインについて
カスタマイザーで設定可能な項目が７つあります。

本記事では、その中から

「リストのレイアウト設定」
「投稿情報の表示設定」
「サムネイル画像の比率設定」
「マウスホバー時の設定」

の４項目について紹介していきます。

「リストのレイアウト設定」を設定する

「リストのレイアウト設定」の項目では、主に
・リストのレイアウト（PC・Tab・スマホそれぞれのデザイン）
・最大カラム数（PC・Tab・スマホそれぞれのデザイン）
を設定できました。

↓リストのレイアウト（PC・Tab）の設定

↓最大カラム数（PC・Tab）の設定
https://gfycat.com/tenseincompletecrane

「投稿情報の表示設定」を設定する

「投稿情報の表示設定」では、
・各記事の公開日、更新日の表示の有無
・抜粋文の文字数（PC・Tab・スマホそれぞれ）
を設定できます。

↓各記事の公開日、更新日の表示の有無の設定

↓抜粋文の文字数（PC・Tab）の設定

「サムネイル画像の比率設定」を設定する

「サムネイル画像の比率設定」では、
それぞれのリストレイアウト（カード型・リスト型・サムネイル型・ブログ型）
で表示される画像部分の比率
設定できます。

↓カード型の画像比率設定

↓リスト型のの画像比率設定

「マウスホバー時の設定」を設定する

「マウスホバー時の設定」では、
リスト内の記事にカーソルを合わせた際、画像に着色されるグラデーションを設定できました。
この項目は、着色自体が薄いため、かなり微妙な変化になります。色々試してみるのが良いですね。

↓記事にカーソルを合わせた時の着色とはこのような表示のこと

↓グラデーションの設定

もしも設定をリセットしたくなったら！

ここで、設定項目が多く一つ一つ手作業で元に戻すのが面倒くさくなってしまった時の最後の手段として、「カスタマイザーのリセット」をご紹介しておきます。

カスタマイザーのリセットは、WordPress管理画面の「SWELL設定」→「リセット」→「カスタマイザーのリセット」→「デフォルトに戻す」

記事リストは奥が深い

記事リストの項目では、他にも
「タブ切り替え設定」や「投稿一覧から除外するカテゴリー・タグ」などを設定できます。

自身のサイトやHPに最適な記事リストを設定して、読者が見やすいホーム画面にしていきましょう！