SWELLページネーション設定完全ガイド！表示されない時の対処法
こんにちは。hakubi code 代表のてらだです。
WordPressテーマSWELLを使っていると、記事一覧の下にあるページネーションのデザインをもっとおしゃれにしたいとか、あるはずのページ番号が表示されないといった壁にぶつかること、ありますよね。ページ送りはサイトの回遊率を高める重要なパーツなので、ここが上手く機能していないとSEOの観点からも少し心配になるかなと思います。
この記事では、SWELLのページネーションに関するカスタマイザーでの基本的な設定手順から、色が反映されない場合のCSSによる色変更テクニック、さらにはSEO SIMPLE PACKと連携した検索エンジン対策まで、私が現場で実践しているノウハウを余すことなく解説していきます。
- SWELL標準機能を使ったページネーションの形状変更テクニック
- ページ送りが表示されない原因を特定する5つのチェックポイント
- 色やデザインを自由に操るためのコピペ可能なCSSコード
- SEOを考慮したアーカイブページのインデックス設定と運用戦略
SWELLのページネーション設定と表示されない時の対処法
まずは、SWELL標準機能でできることと、トラブルが起きた際の基本的な切り分け方から見ていきましょう。ここを理解しておくだけで、無駄なプラグインを入れずに問題を解決できるケースがほとんどです。
基本的な設定方法とカスタマイズ画面の使い方
SWELLのページネーション設定は、WordPressの管理画面から直感的に変更できるようになっています。CSSを書かなくても、「丸」や「四角」といった形状の変更や、デザインの微調整が可能です。
具体的な設定場所は以下の通りです。
この画面を開くと、プレビューを見ながらリアルタイムでデザインを変更できます。「ページャーの形」では、サイトの雰囲気に合わせて「丸」か「四角」を選んでみてください。個人的には、柔らかい印象のブログなら「丸」、コーポレートサイトのようなカッチリしたサイトなら「四角」が馴染みやすいかなと思います。
また、「デザイン」の項目では「背景色あり」や「枠線あり」を選択できます。SWELLのデフォルトではシンプルで見やすいデザインになっていますが、ここを変更するだけでサイトのアクセントになりますね。
ページネーションが表示されない主な原因と解決策
「設定したはずなのに、記事一覧の下にページネーションが出てこない！」という相談、実はよく受けます。この場合、不具合を疑う前に確認すべき仕様上のルールがいくつかあります。
まず疑うべきは、記事数が「1ページに表示する最大投稿数」を超えているかどうかです。当然ですが、2ページ目に送るべき記事が存在しなければ、ページネーションは表示されません。
よくある勘違い
記事が5件しかないのに、設定で「1ページ10件表示」にしている場合、ページネーションは表示されません。テスト環境で確認したい場合は、一時的に表示件数を「1件」などに減らしてみるのが手っ取り早いです。
表示設定の記事数とループ処理の関係性
先ほど触れた「表示件数」の設定ですが、これはSWELLの設定ではなく、WordPress本体の設定に依存します。
管理画面の「設定」＞「表示設定」にある「1ページに表示する最大投稿数」の数値を確認してください。ここが、ページネーションが出現する分岐点になります。SWELLのアーカイブページ（カテゴリーやタグ一覧など）は、基本的にこの設定値を読み込んでループ処理（記事を順番に出す処理）を行っています。
この設定値は、サイト全体のメインクエリ（情報の取得命令）に影響を与える非常に重要なパラメータです。WordPressの仕組みとして、この数値を超えた場合に初めてページ送り機能が発動するという仕様になっています。
（出典：WordPress.org サポート『設定・表示設定画面』）
固定ページでページ送り機能が動かない理由
ここが一番のハマりポイントかもしれません。トップページを「固定ページ」で作っている場合、SWELL標準のページネーションが上手く機能しないことがあります。
固定ページの中に「投稿リストブロック」を置いて記事一覧を作っているケースですね。実は、投稿リストブロックには「もっと見る」ボタンを表示する機能はあっても、「1、2、3…」と続く番号付きのページネーション機能は標準ではついていないんです。
もしトップページで番号付きのページネーションを実現したい場合は、固定ページではなく、SWELLの「メインビジュアル」や「記事スライダー」機能と、標準の「最新の投稿」一覧を組み合わせてトップページを構築するか、アーカイブページのカスタマイズを行う方がスムーズです。
アーカイブページの詳しい作り込みについては、以下の記事でも解説しているので参考にしてみてください。
プラグインの干渉による不具合を解消する手順
設定も記事数も問題ないのに表示されない場合は、他のプラグインが悪さをしている可能性があります。特に、「Category Order and Taxonomy Terms Order」のような並び替えプラグインや、「Elementor」のようなページビルダー系プラグインは、WordPressのメインクエリ（記事取得の命令）を書き換えてしまうことがあります。
診断手順
一度、SWELL本体と「WP Multibyte Patch」などの必須プラグイン以外をすべて「無効化」してみてください。これでページネーションが表示されるなら、犯人はプラグインです。
一つずつ有効化しながら確認すれば、どのプラグインが干渉しているか特定できますよ。
SWELLのページネーションをCSSでデザイン変更する方法
機能面が解決したら、次は見た目です。SWELLはデフォルトでも十分きれいですが、サイトのトンマナ（トーン＆マナー）に合わせて色や挙動を微調整したいこともありますよね。ここからはCSSを使ったカスタマイズ方法を解説します。
CSSが反映されなくて困っている方は、以下の記事で原因と対策をまとめているので、あわせてチェックしてみてください。
おしゃれなデザインに変更するCSSカスタマイズ
ページネーションのデザインを少しリッチにするために、影をつけたり、ホバー時の動きをつけたりしてみましょう。「外観」＞「カスタマイズ」＞「追加CSS」に以下のコードをコピペして調整してみてください。
/* ページネーションをおしゃれにする */
.c-pagination .page-numbers {
transition: all 0.3s ease; /* ふわっと変化させる */
border: 1px solid #ddd; /* 薄い枠線 */
}
/* ホバー時に浮き上がる */
.c-pagination a.page-numbers:hover {
background-color: #ff6b6b; /* 好きな色コードに書き換え */
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}これだけで、マウスを乗せた時に「ふわっ」と浮き上がる動きがつき、クリックしたくなるようなボタンになります。
色を変更してサイトのテーマカラーに合わせる
SWELLの設定で「メインカラー」を変えるとページネーションの色も変わりますが、「ページネーションだけ別の色にしたい」という場合もありますよね。その場合は、.current（現在地）のクラスをターゲットにCSSを書きます。
/* 現在のページ番号の背景色を変更 */
.c-pagination .page-numbers.current {
background-color: #ff6b6b; /* 好きな色コードに書き換え */
border-color: #ff6b6b;
color: #fff;
}これを指定することで、サイト全体のメインカラーとは独立して、ページネーションだけ目立つ色（アクセントカラーなど）に設定可能です。
SEO SIMPLE PACKの設定とSEOへの影響
ページネーションはSEOとも密接に関係しています。特によくある議論が「アーカイブの2ページ目以降をGoogleにインデックスさせるべきか？」という問題です。
ここで注意したいのが、SWELL推奨プラグイン「SEO SIMPLE PACK」の設定仕様です。画像の設定画面を見ていただくと分かる通り、用意されているのは「アーカイブページ全体をインデックスさせない（noindex）」という設定のみです。
ではどうすべきか？ 私の結論としては、デフォルトの「いいえ（インデックスさせる）」のままで全く問題ありません。
現在のGoogleはページネーションを正しく理解しており、2ページ目以降を「質の低い重複コンテンツ」としてペナルティを与えることはほぼありません。むしろ、クローラーが過去記事を巡回するための重要な動線になります。
どうしても2ページ目以降だけ除外したい場合
プラグインの設定では不可能ですので、functions.php に条件分岐（is_paged()）を使ったコードを記述する必要があります。ですが、通常のブログ運営であればそこまで神経質になる必要性は低いです。
SEO SIMPLE PACKの詳しい設定方針については、以下の記事でも深掘りしています。
無限スクロールやもっと見るボタンの導入検討
最近のスマホアプリのように、スクロールするだけで次々と記事が読み込まれる「無限スクロール」を導入したいという声も聞きます。しかし、個人的にはブログサイトでの無限スクロール導入は慎重になるべきだと考えています。
無限スクロールのデメリット
- フッターにある情報（運営者情報やポリシーなど）にたどり着けなくなる
- 「ここまで読んだ」という達成感がなく、ユーザーが疲れてしまう
- ブラウザの「戻る」ボタンを押した時の挙動がおかしくなりやすい
SWELLは標準で高速な表示を実現しているので、無理に外部プラグインで無限スクロールを実装してサイトを重くするよりは、標準のページネーションを使って、ユーザーに「ページの区切り」を意識させた方が、結果的に回遊率が上がることが多いです。
記事一覧のSWELLページネーション最適化まとめ
今回は、SWELLのページネーションについて、設定方法からトラブルシューティング、デザインカスタマイズまで解説しました。
ページネーションは地味な機能に見えますが、ユーザーがサイト内を快適に旅するための「道しるべ」です。設定自体は簡単ですが、表示されないトラブルやSEOへの影響など、奥が深い部分でもあります。
まずはカスタマイザーで基本設定を見直し、必要であればCSSで少し個性を出す。そして何より、記事を充実させてページ送りが機能する状態を作ることが、サイト成長への一番の近道かなと思います。