SWELLのページネーション設定とページャーカスタマイズ完全ガイド

SWELLを使い始めて、記事一覧の下に出るページネーションやページャーをもっと見やすく、おしゃれにしたいのに、設定場所が分からなかったり、そもそも表示されなくて首をかしげたことはありませんか。

ひと言でまとめると、SWELLのページネーション設定とページャーカスタマイズは、基本の考え方とよく使うパターンさえ押さえておけば、コードが得意ではなくても十分きれいに仕上げられます。

SWELLのページネーション設定とページャーカスタマイズの全体像

SWELLでいうページネーション・ページャーとは？

まずは、日常的に混ざりやすい言葉を簡単な表にまとめてみます。

用語	意味	表示される場所の例
ページネーション	一覧ページの下に出る「1 2 3 次へ」などのページ送り全体	ブログ一覧、カテゴリーページ、タグページなど
ページャー	SWELL内でページネーション周りのデザインやボタン部分を指す呼び方	カスタマイザーの「ページャー」設定で見た目を調整する部分
前へ / 次へリンク	「前のページ」「次のページ」だけを表示するシンプルなナビゲーション	記事一覧の下や記事詳細の下などに配置されるリンク
無限スクロール	下までスクロールすると自動で次の投稿を読み込む仕組み	一覧ページを長く見せたいときに使う表示方法

この記事では、一覧下の数字リンクも、前へ・次へのボタンも、まとめて「ページネーション」や「ページャー」と呼びつつ、SWELLの用語にも合わせて説明していきます。「一覧下のページ送り全体のことなんだな」くらいの理解で大丈夫です。

SWELLでページネーションを設定する基本ステップ

カスタマイザーからのSWELLページネーション設定手順

SWELLのページネーション設定は、テーマ独自の管理画面だけでなく、カスタマイザーから行うのが基本になります。よく使うメニューと役割を表にしました。

メニュー	役割	おすすめの使い方
外観 → カスタマイズ → サイト全体設定	サイト全体のフォントや色、レイアウトを決める場所	ページャーだけでなく、全体の世界観もここで整える
サイト全体設定 → ページャー	ページネーションの形やスタイルを決めるメインの設定	丸型か角丸か、背景ありか枠線のみかをここで選ぶ
サイト全体設定 → カラー	メインカラーやサブカラーなどサイト全体の色設定	ページャーのベースとなる色をここで決める
投稿ページ設定／アーカイブページ設定	記事一覧やカテゴリーページの見せ方を調整する	1ページあたりの件数や抜粋文の長さなどを調整

おおまかな流れは次のとおりです。

• カスタマイザーを開く
• 「サイト全体設定」から「ページャー」を選ぶ
• 形（丸型・角丸など）やスタイル（背景あり・枠線のみなど）を決める
• 色のバランスが気になる場合は「カラー」側でメインカラーも調整する

ここまで触ってみて「何となくしっくりこないな」と感じたら、あとから紹介するCSSでのカスタマイズを少しだけ足してあげると、自分の理想に近づけやすくなります。

ページネーションが表示される場所と表示条件

次に、「どのページでページネーションが出るのか」を整理しておきます。ここを勘違いしていると、「設定したのにSWELLのページネーションが出ない」と、原因探しが遠回りになりがちです。

ページの種類	ページネーションの表示	補足
ブログ一覧（投稿ページ）	投稿数が表示件数を超えると表示される	「設定 → 表示設定」で投稿ページにしている場合
カテゴリーページ	カテゴリー内の記事数が多いと表示される	自動的にページャーが出る
タグページ	タグ内の記事数が多いと表示される	カテゴリーページと同じようなイメージ
固定ページ + 投稿リストブロック	設定によっては数字のページ送りではなくボタンや読み込みになる	デフォルトでは数字付きページネーションが出ないケースもある
検索結果ページ	検索結果が多いとページネーションが出る	テーマの仕様やカスタマイズ状況によって表示が変わる

「投稿数が少ないうちはページネーションがそもそも出ない」というのは、SWELLに限らずWordPress全体の基本的な仕様です。「表示件数を10件にしているのに、まだ7記事しか公開していない」ような場合は、どれだけ設定を変えてもページャーは出てきません。最初はシンプルに記事数も確認してみてください。

SWELLページネーションが表示されないときのチェックリスト

まず確認したい3つの基本設定

いきなり難しいカスタマイズやプラグインのせいにする前に、まずは次の3つをチェックするのがおすすめです。簡単に見られる項目を表にしました。

チェック項目	確認する場所	OKな状態の目安
公開済みの投稿数	投稿一覧、ゴミ箱の中身	設定している表示件数より多くの公開済み記事がある
1ページの表示件数	設定 → 表示設定 → 1ページに表示する最大投稿数	極端に多すぎず少なすぎない（10〜20件程度が目安）
トップページの種類	設定 → 表示設定	「最新の投稿」か「固定ページ＋投稿ページ」のどちらかを理解して選んでいる

私がよくやってしまうのが、テスト中に投稿を下書きや非公開に戻してしまい、実際の公開数が減っているパターンです。その結果「さっきまであったページャーが急に消えた」と焦ることがあります。そんなときも、まずは冷静に記事数を数え直すところから始めると、意外とすぐ解決することが多いです。

固定ページ＋投稿リストブロック利用時の考え方

最近は、トップページを固定ページで作り、そこに「投稿リスト」ブロックを置いて記事一覧を出しているサイトも多いです。このとき「カスタマイザーでページャーを設定しても、数字のページ送りが出ない」と悩むケースがあります。

このパターンでは、次のような点を理解しておくとスッキリします。

• 投稿リストブロックは「もっと読むボタン」や「スクロールで追加読み込み」など、数字のページ送りとは別の見せ方が用意されている
• 数字のページネーションを使いたいなら、投稿ページをトップにする構成にしたり、テンプレート側での調整が必要になる場合がある
• 「トップページはボタンで追加読み込み」「カテゴリーページは数字のページャー」というように、ページごとに見せ方を変えるのもあり

どの見せ方が良いかは、サイトの目的によって変わります。

• 更新頻度が高いブログ型サイトなら、数字のページネーションで過去記事にもアクセスしやすくする
• 1枚のランディングページのように見せたいサイトなら、無限スクロールや「もっと見る」ボタンで、ストレスなく読み進めてもらう

こうした方針を先に決めておくと、SWELLでページャーをどうカスタマイズするかも自ずと固まってきます。

SWELLページャーカスタマイズの基本（CSSなしでできること）

カラーや形を変えるSWELL標準設定

SWELLのページャーは、標準機能だけでもある程度柔軟にカスタマイズできるようになっています。よく触る項目を表にまとめました。

設定項目	変えられる内容	注意したいポイント
ページャーのスタイル	丸型、角丸、フラットなどボタンの形	サイトロゴやボタン類の雰囲気に合わせると統一感が出る
背景あり / 枠線のみ	ボタンを塗りつぶすか、枠線だけにするか	背景ありは目立つが、色が強すぎると主張が激しくなりがち
現在ページの強調スタイル	今いるページ番号の色や太さ	ナビゲーションメニューより派手になりすぎないようにする
カラー設定のメインカラー	ページャーを含む多くのパーツの基準となる色	ここを変えるとサイト全体の印象が変わるので、大きな方向性を先に決める

私のおすすめは、「まずメインカラーを決めてから、ページャー側は基本スタイルだけ変える」という順番です。サイト全体の色が整っていれば、ページャーだけが浮いて見えることはあまりありません。先に色の土台を作っておくイメージです。

「やりすぎない」デザインのコツ

ページャーのデザインをいじっていると楽しくなってきて、つい派手にしたくなる気持ちもよく分かります。ただ、SWELLでページャーをいじるときにありがちな失敗が、「ページ送りの部分だけ異様に目立ってしまう」状態です。

例えば、次のようなパターンは注意が必要です。

こうなると、ユーザーの視線は肝心のコンテンツではなくページャーにばかり向いてしまいます。目安としては、

• グローバルメニューよりは少し控えめ
• 本文中のリンクよりは少しだけ強め

くらいのバランスにしておくと、自然な存在感に落ち着きます。

CSSでSWELLページャーをガチカスタマイズする方法

よく使うクラス名と役割の一覧

まずは、ページネーション周りでよく出てくるクラス名をざっくり押さえておきましょう。これを知っておくだけでも、CSSを書くときの迷いがかなり減ります。

クラス名	対象	よく行うカスタマイズ例
.c-pagination	ページネーション全体のラッパー	上下の余白調整、中央揃え、全体の幅の調整
.page-numbers	各ページ番号共通のスタイル	フォントサイズ、余白、角丸、枠線など
.page-numbers.current	現在のページ番号	背景色を変える、文字色を白にする、少し大きく表示する
.page-numbers.prev / .page-numbers.next	前へ / 次へのボタン	矢印アイコンの追加、文字を短くする、余白を広げて押しやすくする
テーマ独自のクラス	装飾用のクラス、レイアウト用のクラスなど	テーマアップデートで変わる可能性があるので、使うときは様子を見ながら

CSSを書く場所は、基本的には「外観 → カスタマイズ → 追加CSS」で問題ありません。子テーマのstyle.cssに書く方法もありますが、「まずは試したい」「自分だけで運用しているブログ」という状況なら、追加CSSのほうが気軽で扱いやすいはずです。

よくあるデザインカスタマイズ例（体験談込み）

ここからは、私が実際のサイトでよく行っているページャーカスタマイズの例をいくつか紹介します。細かいコードはテーマのバージョンによって変わることもあるので、ここでは「どんなことができるか」のイメージを掴んでもらえればOKです。

• アクティブなページ番号だけ背景色を濃くする
  → 今どのページにいるのか一目で分かるようになり、ユーザーが迷いにくくなります。
• ホバー時にふわっと色が変わるようにする
  → ホバー状態で少しだけ背景色を変えたり、transitionでなめらかにするだけでも「押せそう感」が出ます。
• 「前へ」「次へ」のテキストをアイコンっぽく見せる
  → 疑似要素で「←」「→」を足してあげると、文字だけよりも直感的に操作しやすくなります。

クライアントサイトでこういったカスタマイズを入れたときは、ページャー部分のクリックが増えたり、関連記事まで見てもらえる回数が少し増えたりと、数字にも変化が出ました。もちろんコンテンツの質も大事ですが、「次のページに進む」という行動がとりやすいかどうかも、意外とサイト全体のパフォーマンスに影響してきます。

ちょっと上級者向けのSWELLページネーション応用テク

人気記事リストなどカスタムループへの適用

例えば、次のようなケースを考えてみます。

• 「人気記事ランキング」を複数ページに分けて表示したい
• 「お知らせ」用のカスタム投稿だけ一覧ページを作りたい

このような場合は、WordPressのカスタムループと組み合わせてページネーションを組むことになります。ざっくりした流れは、次のようなイメージです。

• 通常の投稿ループとは別に、WP_Queryなどでカスタムループを作る
• そのクエリ用にページ数や現在のページ番号を計算する
• SWELLのページャーデザインを流用したい場合は、構造やクラス名を揃える

具体的なコードはテーマの構成やカスタマイズの度合いによって変わるので、ここでは概念だけにとどめますが、「マークアップの構造とクラスをSWELL標準に近づければ、既存のCSSがそのまま活かせる」という考え方を持っておくと、応用の幅が広がります。

条件分岐でページャーを出し分ける

もうひとつよくある要望が、「ページによってページャーの出し方を変えたい」というものです。例えば、次のようなイメージです。

• トップページにはページネーションを出したくない
• カテゴリーページでは数字のページネーションを出し、タグページでは「前へ・次へ」だけにしたい

この場合は、テンプレート側で条件分岐を使って、どのページでどのページャーを表示するかを制御する形になります。

PHPに触れる必要があるので、ここまでやるかどうかはサイトの規模しだいです。ただ、「ページャーは条件分岐と組み合わせることで、表示・非表示やデザインの出し分けが柔軟にできる」ということを頭の片隅に置いておくと、今後のサイト運用のヒントになると思います。

SEO・UXから見たSWELLページネーション設計のポイント

ページネーションとSEOの考え方

ページネーションがSEOにどう影響するかについて、よく出てくる疑問がこちらです。

• 2ページ目以降は検索結果に出していいのか
• noindexをつけるべきなのか

ざっくりとした考え方を表にまとめると、次のようになります。

設計パターン	メリット	向いているサイト
すべてのアーカイブページをインデックス	クロールされやすく、過去記事も検索から拾われやすい	記事数が多いブログやメディアサイト
2ページ目以降にnoindexを付ける	重複コンテンツを減らす方向で調整しやすい	ニッチなジャンルで記事数がそこまで多くないブログ
アーカイブ自体をnoindexにする	記事個別ページに評価を集中させやすい	お知らせの少ないコーポレートサイトなど

大事なのは、「カテゴリーページやタグページを、読者にしっかり使ってほしいかどうか」です。カテゴリーページを目次のように作り込むのであれば、ページネーションつきでインデックスさせる価値は十分あります。逆に、カテゴリーページがほぼ初期状態のままなら、noindexを検討するのもひとつの選択肢です。

スマホユーザーを意識したページャーデザイン

今は、多くのユーザーがスマホからサイトを見ています。ページャーのカスタマイズでも、PCだけでなくスマホでの使いやすさを最優先で考えたほうが、結果的に喜ばれます。

具体的なポイントを挙げると、次のような感じです。

• タップしやすいサイズにする（高さは40px前後、左右の余白もたっぷりめに）
• 数字を詰め込みすぎず、「前」「次」「1〜3ページ」くらいに抑える
• 背景と文字のコントラストをしっかり確保する
• 上下の余白を取りすぎず、スクロールが不必要に長くならないようにする

私の感覚だと、スマホでは「1 2 3 4 5 6 7 8 9 10」とズラッと並んだページャーより、「1 2 3 … 次へ」くらいのほうが、あまり考えずに操作してもらえます。SWELLのページネーション設定を触るときも、PC表示だけで判断せず、必ずスマホ表示もチェックするようにしてみてください。

よくある質問（SWELLページネーション設定・ページャーカスタマイズ編）

Q1. SWELLのページネーションが出ないとき、最初に見るべき設定はどこですか？

A. まず確認したいのは、WordPress本体の「1ページに表示する最大投稿数」と、実際の公開済み投稿数です。公開数が表示件数より少ないと、どれだけ設定を変えてもページネーションは出ません。そのうえで、カスタマイザーの「サイト全体設定 → ページャー」で、表示スタイルが正しく選ばれているか、色や背景が背景色と同化していないかも確認してみてください。

Q2. ページャーをカスタマイズしたいのですが、CSSを書くのがこわいです。どこまでなら比較的安全でしょうか？

A. 追加CSSの範囲であれば、うまくいかなかったときにその部分だけ消せば元に戻せるので、比較的安心して試せます。特に、.page-numbers や .page-numbers.current の色や余白を少し変える程度なら、レイアウト全体が大きく崩れることはあまりありません。心配であれば、数値を少しずつ変えて、プレビューを確認しながら公開する流れにすると安心です。

Q3. ページネーションの設定をいじると、SEOに悪影響が出たりしませんか？

A. ページネーションの表示スタイルを変えること自体が、直接SEOに大きな悪影響を与えることはほとんどありません。むしろ、ページネーションが分かりやすくなり、過去記事にもスムーズにアクセスしてもらえるようになることで、回遊率や滞在時間が伸びることもあります。ただし、アーカイブページのnoindex設定や、無限スクロールの使い方によっては、検索エンジンの巡回のされ方が変わることもあるので、その点だけは意識しておくと安心です。

まとめ：SWELLのページネーション設定・ページャーカスタマイズの最初の一歩

この記事のポイントを整理しておきます

今日からできる最初の一歩としては、テスト用の一覧ページを用意して、

• カスタマイザーの「ページャー」設定をひと通り触って、どこがどう変わるか試してみる
• 追加CSSで .page-numbers.current の背景色だけ変えてみる

という2ステップから始めてみるのがおすすめです。「意外と簡単にページャーをカスタマイズできた」と感じられたら、少しずつ他の部分も調整してみてください。ページネーションが整うと、サイト全体がぎゅっと引き締まって見えるので、デザイン面のモチベーションもぐっと上がります。