SWELLの記事一覧レイアウトを変更する方法｜見やすく整えるコツ

2026年10月26日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

トップページやカテゴリーページの記事一覧を、もっと見やすく、クリックしたくなる形に変えたいと思っていませんか。私は以前、文字だけの一覧にしていたため、トップページが地味で、ほかの記事を読んでもらえない状態が続いていました。

この記事では、SWELLの記事一覧のレイアウトを変更する方法を、設定画面の名前まで具体的に初心者向けに解説します。実際の失敗談も交えるので、読みながら進めれば、読者が思わずクリックしたくなる一覧に整えられます。

※まだエックスサーバーを契約していない方へ：今月は最大30%OFFの限定キャンペーンが開催されています。この記事の手順を見ながら進めれば、初心者でも最短10分で国内シェアNo.1の高速ブログを開設できますよ。

➡️【公式】エックスサーバーの限定特設ページはこちら

早めに申し込むほど、キャンペーンの割引をしっかり活かせます。

ニャフィ

記事一覧の見た目を、もっとおしゃれにしたいのにゃ！

たいがブログ

一覧が見やすいと、ほかの記事も読んでもらいやすいですよね。

ニャフィ

種類がたくさんあって、どれを選べばいいか迷うにゃ…

たいがブログ

選び方のコツと手順を、5つのステップで解説しますね。

▼あわせて読みたい：画像の多い記事一覧もサクサク表示できるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLの記事一覧レイアウトの種類

SWELLでは、トップページの新着記事やカテゴリーページなど、記事一覧の見た目をカスタマイザーからまとめて変更できます。コードを書かずにレイアウトを選ぶだけなので、初心者でも安心です。

筆者はCocoonを使っていたころ、一覧のレイアウトの選択肢が少なく物足りなさを感じていました。SWELLはパソコンとスマホで別のレイアウトを選べるので、どちらの読者にも見やすい一覧を作れます。

カード型・リスト型・サムネイル型などから選べる

SWELLでは、カード型・リスト型・サムネイル型・テキスト型などのレイアウトから選べます。アイキャッチ画像を見せたいなら、カード型かサムネイル型がおすすめです。

パソコンとスマホで別のレイアウトにできる

パソコンではカード型で2〜3列、スマホではリスト型で1列のように、端末ごとにレイアウトを変えられます。画面の大きさに合った見せ方ができるのが魅力です。

SWELLの記事一覧レイアウトを変更する方法

記事一覧のレイアウトは、カスタマイザーの「記事一覧リスト」から変更します。あわせて表示する情報や抜粋文の長さも整えると、すっきりした一覧に仕上がります。

筆者は文字だけの一覧をカード型に変えたところ、トップページから記事を読んでもらえる回数が増えたと感じています。アイキャッチ画像が見えるだけで、読者の興味を引きやすくなるのです。

アイキャッチ画像の比率をそろえる

カード型やサムネイル型では、アイキャッチ画像の縦横の比率がばらばらだと一覧が乱れて見えます。1200×630pxなど同じサイズで作っておくと、きれいにそろいます。

抜粋文の長さを調整する

記事一覧に表示される抜粋文は、長すぎると一覧が縦に伸びてしまいます。パソコンとスマホで文字数を別々に設定できるので、スマホは短めにしておきましょう。

STEP

カスタマイザーを開く

WordPressの管理画面から「外観」→「カスタマイズ」を開きます。プレビューにトップページやカテゴリーページを表示しておくと、変化がわかりやすいです。

STEP

記事一覧リストの設定を開く

メニューから「記事一覧リスト」を選びます。ここにレイアウトや表示する情報など、一覧に関する設定がまとまっています。

STEP

パソコンとスマホのレイアウトを選ぶ

パソコン用とスマホ用のレイアウトをそれぞれ選びます。筆者はアイキャッチの比率がばらばらでカードの高さがそろわなかったので、画像のサイズも統一しましょう。

STEP

表示する情報を整える

投稿日・カテゴリー・抜粋文などの表示を調整します。情報を詰め込みすぎると読みにくくなるので、必要なものだけを表示するのがコツです。

STEP

いろいろなページで確認して公開する

「公開」を押したら、トップページ・カテゴリーページ・検索結果で一覧を確認します。スマホでもカードが小さすぎないかチェックしておきましょう。

記事一覧をもっと見やすくするコツ

レイアウトを選んだら、ページごとの見せ方やアイキャッチ画像も整えると、さらにクリックされやすい一覧になります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者はカード型を3列にしたとき、23.8インチの外部モニターではきれいでも、ノートPCの画面では窮屈に見えました。両方で見比べた結果、パソコンは2列に落ち着いています。

トップページは投稿リストブロックで見せ方を変える

トップページでカテゴリーごとに一覧を分けたいときは、SWELLの投稿リストブロックを使うと便利です。ブロックごとにレイアウトを選べるので、メリハリのあるページになります。

アイキャッチ画像のデザインを統一する

アイキャッチの雰囲気がばらばらだと、一覧全体が落ち着かない印象になります。Canvaでテンプレートを1つ決めて作ると、統一感のある一覧を手軽に作れます。

記事一覧のチェックポイント

アイキャッチ画像のサイズがそろっている
スマホでカードが小さすぎない
抜粋文が長すぎない
表示する情報を必要なものに絞っている

▼あわせて読みたい：記事一覧のレイアウトを大きな画面で確認できる、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

一覧に表示される記事の数を変えたいです。: WordPressの「設定」→「表示設定」にある、1ページに表示する最大投稿数を変更します。レイアウトの列数で割り切れる数にすると、一覧がきれいにそろいます。
一覧に更新日を表示できますか？: できます。「記事一覧リスト」の設定で、投稿日と更新日のどちらを表示するか選べます。情報の新しさが大切な記事が多いなら、更新日の表示がおすすめです。
アイキャッチがない記事はどう表示されますか？: アイキャッチがない記事には、代わりの画像が表示されます。SWELLでは代わりの画像も設定できますが、できるだけすべての記事にアイキャッチを付けましょう。
カテゴリーごとにレイアウトを変えられますか？: カスタマイザーの設定は一覧全体で共通です。カテゴリーごとに見せ方を変えたい場合は、固定ページに投稿リストブロックを置いて作る方法がおすすめです。