SWELLアーカイブページの作り方。SEOと回遊性を上げる方法

こんにちは。hakubi code 代表のてらだです。

SWELLでサイトを運営していると、「アーカイブページ」のカスタマイズで悩むこと、結構ありますよね。デフォルトのままだと、ただ記事が並んでいるだけで味気ないし、SWELLのカテゴリーページの作り方として、もっと戦略的なページにしたい、と思うかもしれません。

SWELLのアーカイブページ設定は、実はすごく奥が深いです。ブログパーツを使った作り方をマスターすれば、特定のカテゴリーページだけデザインを変えたり、SEOを意識したnoindex設定を使い分けたりも自在です。でも、いざやろうとすると「設定項目がどこにあるか分からない」「タグページとカテゴリーページで何が違うの?」と混乱しがちかなと思います。

この記事では、SWELLのアーカイブページに関する作り方を、基本的なカスタマイザーの設定から、SWELLのポテンシャルを最大限に引き出すブログパーツを使った高度な作り込みまで、網羅的に解説していきます。記事が表示されないといったトラブル対処法もカバーしているので、安心してください。

  • アーカイブ設定の2つの基本領域がわかる
  • SWELLのブログパーツを使った作り込み手順
  • カテゴリーとタグの戦略的な使い分け
  • SEO最適化とトラブルシューティング
目次

SWELLアーカイブページの基本的な作り方

SWELLアーカイブページの基本的な作り方

まずは基本から。SWELLのアーカイブページ設定は、大きく分けて2つの場所にある「カスタマイザー」で制御します。ここを理解するのが、SWELLのアーカイブページ作り方の第一歩です。

アーカイブページの基本デザイン6選

アーカイブページの基本デザイン6選

SWELLには、アーカイブページ(記事一覧)のレイアウトとして、あらかじめ6種類のデザインパターンが用意されています。ここ、意外と知らない人もいるかも。

具体的には以下の6つです。

  • カード型: 一番人気かも。情報がカード状にまとまってグリッド表示されます。
  • リスト型: シンプルな縦一列のレイアウトです。
  • リスト型(交互): サムネイルが左右交互に出て、視覚的に楽しい感じ。
  • サムネイル型: アイキャッチ画像を大きく見せたいサイト向け。
  • ブログ型: 昔ながらのブログっぽいレイアウト。
  • テキスト型: 画像なしの、超シンプルなテキストリンク一覧です。

それぞれのスクリーンショットです。画像をクリックで拡大できます。

SWELLテーマのブログ記事グリッドレイアウト。3つのカラムに異なるブログ記事サムネイルが配置されている。左側に青と金の「SWELL完全対応!CSSコピペでループスライダー」のサムネイル(2025-11-16)、中央に黄色い枠の「お問い合わせフォームプラグイン最適解」ビジネスマン画像(2025-11-15)、右側に「SWELLGoogleフォント設定ガイド」ハンドジェスチャー画像(2025-11-13)が表示されたブログアーカイブページ
①カード型
SWELLテーマのブログ記事リスト表示。左側に3つのブログ記事カード、右側に詳細説明テキストが配置されたレイアウト。上部のカードに「CSSコピペでループスライダー」の青と金のサムネイル、中央に「お問い合わせフォームプラグイン最適解」の黄枠サムネイル、下部に「SWELLGoogleフォント」のハンドジェスチャー画像が表示され、各記事タイトルと日付、カテゴリ情報が記載されたブログアーカイブリスト
②リスト型
SWELLテーマのブログアーカイブページレイアウト。左側に上から順に3つのブログ記事サムネイルが配置(ループスライダー、お問い合わせフォーム、Googleフォント)、各記事の下に「READ MORE」ボタンが配置されている。右側にも記事カードが配置され、各記事タイトル、投稿日(2025-11-16、15、13)、「ウェブ制作・ライティング」カテゴリタグが表示されたレスポンシブブログ一覧ページ
③リスト型(交互)
SWELLテーマのブログコンテンツグリッド。上段3つのカラムに「CSSコピペでループスライダー」「お問い合わせフォームプラグイン」「SWELLGoogleフォント」の記事サムネイル、下段に「差がつく設定術」「CSSが反映されない原因と解決法」「WordPress初期設定」のコース・チュートリアル関連コンテンツが表示された、混合コンテンツタイプのグリッドレイアウト
④サムネイル型
SWELLテーマのフィーチャード記事バナー。上部に日付「2025/11/16」と「ウェブ制作・ライティング」カテゴリ。中央に青い大型バナーに白い斜字イタリックテキスト「SWELL完全対応!」「CSSコピペで」「ループスライダー」と配置され、右側にSWELLロゴマーク(円形の青い月と笑顔シンボル)が表示。下部に記事概要テキストと「READ MORE」ボタンが配置されたメインコンテンツ紹介バナー
⑤ブログ型
SWELLテーマの最近の投稿リスト。3つの記事が時系列で表示され、各行に投稿日(2025-11-16、15、13)、「ウェブ制作・ライティング」カテゴリバッジ、記事タイトル「CSSコピペでループスライダーを実装」「お問い合わせフォームおすすめ決定版」「Googleフォント設定ガイド」が記載されたシンプルなブログ最新記事一覧ページ
⑥テキスト型

これらの基本レイアウトは、後述するカスタマイザーの「記事一覧リスト」設定から、あなたのサイトの雰囲気に合わせて選ぶことができます。

2つのカスタマイザー設定の役割

2つのカスタマイザー設定の役割

SWELLのアーカイブ設定で一番混乱しやすいのが、「設定する場所が2つに分かれている」ことです。

この2つの役割の違いを、まずしっかり押さえましょう。

SWELLアーカイブ設定の2領域

  1. 「アーカイブページ」設定
    • 場所: [カスタマイザー] > [アーカイブページ]
    • 役割: ページの「ガワ」(外側)を担当。具体的には、ページのH1大見出し(例:「カテゴリー:SEO」)のデザインや表示位置を決めます。
  2. 「記事一覧リスト」設定
    • 場所: [カスタマイザー] > [記事一覧リスト]
    • 役割: ページの「ナカミ」(中身)を担当。実際に並ぶ記事リストのレイアウト(さっきの6パターンとか)や、表示する情報(日付やカテゴリー名など)を決めます。

この棲み分けがわかると、設定で迷子にならなくなりますよ。SWELLの基本的な設定については、他の記事でも解説しているので、もし「WordPressの初期設定から不安…」という場合は、そちらも参考にしてみてください。

記事一覧リストのレイアウト設定

記事一覧リストのレイアウト設定

では、まず「ナカミ」から。 [カスタマイザー] > [記事一覧リスト] で設定できる主要な項目を見ていきましょう。

ここの設定は、トップページやカテゴリーページなど、サイト全体の記事一覧に影響する「グローバル設定」です。

レイアウトの選択

ここで、さっき紹介した6つの基本デザインパターン(カード型、リスト型など)から、サイトの標準レイアウトを選びます。

アイキャッチ画像の比率設定

これはデザインの統一感に直結する超重要な設定です。

SWELLでは、サムネイル画像の縦横比を「ワイド」「黄金比率」「正方形」などで統一できます。例えば「ワイド(16:9)」を選んだら、今後作るアイキャッチ画像も16:9で統一していくと、一覧ページがめちゃくちゃ綺麗に整います。サイトの運用ルールとして決めておきましょう。

投稿情報の表示設定

記事一覧に「投稿日」「更新日」「カテゴリー名」「著者」などを表示するかどうかを細かくON/OFFできます。サイトの運用方針に合わせて(例:更新日の鮮度をアピールしたい、など)調整しましょう。

アーカイブページのタイトル設定

アーカイブページのタイトル設定

次に「ガワ」の設定です。[カスタマイザー] > [アーカイブページ] を開きます。

ここでは、アーカイブページのH1大見出しのデザインを専門に扱います。

例えば、タイトルをコンテンツエリアの上にシンプルに表示するか、それともカテゴリー編集画面で設定した「アイキャッチ画像」とタイトルを統合して、ビジュアルをリッチにするか、といったデザインスタイルを選べます。

ここまでのカスタマイザー設定で、サイト全体のデザインは整います。でも、SWELLの本当の強みは「ここから先」にあるんです。

高度なSWELLアーカイブページの作り方

高度なSWELLアーカイブページの作り方

「全部のカテゴリーページが同じデザインじゃ嫌だ」「特定のカテゴリーページだけ、戦略的なコンテンツを入れたい!」…ここからが本題です。SWELLのアーカイブページ作り方の核心、「ブログパーツ」機能を使った高度なカスタマイズを紹介します。

SWELLのブログパーツ機能とは?

SWELLのブログパーツ機能とは?

SWELLの「ブログパーツ」は、私がSWELLを最強テーマだと思う理由の1つです。

簡単に言うと、「ブロックエディターで作った好きなコンテンツ(文章、画像、ボタン、SWELLの独自ブロックなど)を、一つの『パーツ』として保存して、サイト内の好きな場所に何度も呼び出せる機能」です。

この「呼び出せる場所」に、「カテゴリーページの上部」「タグページの上部」が含まれているのが、今回のカスタマイズのキモになります。

PHPで category.php を編集するといった、従来のテーマカスタマイズで必要だったコーディングが一切不要になります。ブロックエディターの操作だけで、アーカイブページを自由に「作り込む」ことができる。これがSWELLの革命的なところです。

カテゴリーページの作り方と設定

カテゴリーページの作り方と設定

では、実際に「SEO」というカテゴリーページの上部に、独自の紹介文やおすすめ記事へのリンクを設置する手順を見ていきましょう。

STEP 1: ブログパーツで中身を作る

まず、[ダッシュボード] >

> [新規追加] をクリックします。普通の記事作成と同じブロックエディターが開くので、ここに表示したいコンテンツを自由に作ります。

(例:SEOカテゴリーの概要説明文、SWELLの「投稿リスト」ブロックを使って「特に読んでほしい記事3選」を設置、収益記事へのボタンを設置、など)

STEP 2: ブログパーツの「用途」を設定する

コンテンツが完成したら、編集画面の右サイドバーにある「ブログパーツ設定」パネルを開きます。そこの「用途」というドロップダウンを「カテゴリー用」に設定します。これ、忘れがちなので注意です。

設定したら「公開」ボタンを押して保存します。

SWELLテーマのアーカイブページ設定パネル。左側に「アーカイブページ設定用」という見出しと説明文「このブログパーツは、アーカイブページの装飾用です。」が記載され、下部に2つのプレビューエリア(「CTA設定」ラベル付き)が表示されている。右側に詳細設定パネルがあり、「目」アイコン付きの「アーカイブページ設定用」タブ、「25語。読了時間1分。最終編集2分前。」の統計情報、「ステータス」が「下書き」、「公開」が「今すぐ」、「ゴミ箱へ移動」ボタン、「用途」セクションにピンク枠で囲まれた「カテゴリ用」チェックボックス(チェック済み)、「タグ用」「ブロックパターン」オプション、「用途を追加」リンクが表示されたページ設定インターフェース

STEP 3: カテゴリー編集画面で割り当てる

最後に、[ダッシュボード] > [投稿] > [カテゴリー] に移動し、カスタマイズしたいカテゴリー(例:「SEO」)の編集画面を開きます。

画面を下にスクロールすると、SWELL独自の「SWELL設定」セクションがあります。そこに「一覧ページ上部に表示するブログパーツ」という項目があるので、さっきSTEP 2で作ったブログパーツを選択します(数字は自動的に入力されます)。

これで「更新」すれば完了です。

カテゴリーページはSWELLで最も優遇されていて、「一覧ページ下部(CTA)」にも別のブログパーツを割り当てられます。

これにより、「導入(上部ブログパーツ)」「記事リスト(自動生成)」「結論・CTA(下部ブログパーツ)」という、完璧なランディングページ(ハブページ)構成が簡単に作れてしまいます。この機能の応用については、CTAに特化した記事でも解説しています。

アーカイブページに、先ほど設定したブログパーツが挿入されていますね!

タグページのカスタマイズと注意点

タグページのカスタマイズと注意点

タグページのカスタマイズ手順も、カテゴリーページとほぼ同じです。

ブログパーツの「用途」を「タグ用」に設定し、[投稿] > [タグ] の編集画面で、該当するブログパーツを割り当てるだけ。

ただし、タグページにはカテゴリーページとの決定的な機能差が1つあります。

重要:タグページは「下部CTA」が設定できない

タグページの編集画面には、SWELL設定に「一覧ページ上部に表示するブログパーツ」しかありません。カテゴリーページにあった「一覧ページ下部(CTA)」の割り当て欄が、タグページには用意されていないんです。

これはSWELLの仕様です。もし「導入・記事リスト・CTA」という完璧なハブページを作りたいなら、そのトピックは「タグ」ではなく「カテゴリー」として設計する必要がある、ということです。この仕様を理解して、サイトの構造設計を考えるのが大事ですね。

カスタム投稿タイプのアーカイブ設定

カスタム投稿タイプのアーカイブ設定

「制作実績」や「商品」といった、通常の「投稿」とは別枠のカスタム投稿タイプ(CPT)を使っている場合も、基本的にはカスタマイザーの設定(記事一覧リストやアーカイブページ設定)が適用されます。

ただ、CPTはWordPressの高度な機能なので、SWELLの標準機能だけでは手が届かない問題が出やすい領域でもあります。

例えば、「カスタム投稿タイプのアーカイブタイトルから『アーカイブ:』という文字を消したい」とか、「月別アーカイブがうまく機能しない」といった場合です。

こういう高度なカスタマイズには、functions.phpフィルターフック というコードを追記する必要が出てくることもあります。CPTの運用は、少しだけ上級者向け、と覚えておくといいかもです。

SEOに効くnoindex設定の判断基準

SEOに効くnoindex設定の判断基準

アーカイブページを「作り込む」ことは、SEOにも直結します。

よく「アーカイブページは noindex(検索結果に出さない)にすべきですか?」と聞かれますが、SWELLにおける私の答えは明確です。

「ブログパーツで『独自の価値』を追加したか?」

これが全ての判断基準です。

  • noindex 推奨ケース ブログパーツを何も設定せず、単に記事が並んでいるだけのデフォルト状態のページ。特にタグページは、内容が薄い(低品質コンテンツ)とGoogleに判断されやすいので、作り込まないなら「noindex」が無難です。
  • index 必須ケース ブログパーツを使い、そのカテゴリーの概要や、厳選した内部リンクなどを追加した「作り込まれた」ページ。これはもはや「単なるリスト」ではなく、価値ある「ハブページ」です。必ず「index」設定にして、検索エンジンに評価してもらいましょう。

「noindex」の設定自体は、SEOプラグイン(SWELL公式推奨の「SEO SIMPLE PACK」など)を使えば、カテゴリーやタグの編集画面から簡単に個別に設定できます。

近年ではAI検索の台頭により「SEOは不要になるのか!?」なんていう話題を見かけることもありますが、多様化する検索最適化の土台として、むしろ重要性は増していくと考えています。
詳しくは以下の記事内で解説しています。よろしければご覧ください!

記事が表示されない時の対処法

記事が表示されない時の対処法

「設定を変えたのに、アーカイブページに記事が1件も表示されない!」「ページャー(次のページへ、のリンク)が出ない!」

こういう表示系のトラブル、焦りますよね。でも、SWELLの場合、原因の9割は「キャッシュ」です。

まず、これを試してください

[ダッシュボード] > [SWELL設定] > [リセット] タブにある「キャッシュクリア」ボタンを押してください。

SWELLは表示を高速化するために強力なキャッシュ機能を持っています。設定を変更したのに、古いキャッシュ(設定変更前のデータ)を読み込んでしまい、表示がおかしくなることが本当によくあります。

設定が反映されない、CSSが効かない、といった問題のほとんどはこれで解決します。キャッシュクリアは、SWELL運用者の必須スキルですね。

キャッシュ問題については、CSSが反映されないケースを例に、こちらの記事でも詳しく解説しています。

これでもダメな場合は、他のプラグイン(特にキャッシュ系や記事表示を制御するもの)との競合を疑ってみましょう。

SWELLアーカイブページ作り方の総括

SWELLアーカイブページ作り方の総括

SWELLのアーカイブページ作り方について、基本から応用まで解説してきました。

最初はカスタマイザーでサイト全体の「型」を決め、次に「ブログパーツ」機能を使って、特に重要なカテゴリーページを「ハブページ」として個別に作り込んでいく。これが、SWELLのポテンシャルを最大限に引き出す流れかなと思います。

特にブログパーツ機能は、コーディング知識ゼロでアーカイブページを戦略的なページに変貌させられる、本当に強力な武器です。ぜひ使いこなして、あなたのサイトの回遊性とSEOを強化してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次