SWELLでカテゴリーページをカスタマイズ！ブログパーツでデフォルトから脱却

SWELLのブログパーツ機能を使えば、デフォルトの記事羅列から脱却し、読者にとって使いやすいオリジナルなカテゴリーページが簡単に作成できます。

この記事では、カテゴリーページのカスタマイズ方法からデザイン設定、その他の便利機能まで、画像付きで詳しく解説します。

ぜひ最後まで読んで実践し、読者に優しいカテゴリーページを作成しましょう！

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。

SWELLのカテゴリーページ

SWELLでは、カテゴリーページを柔軟にカスタマイズできます。

デフォルト状態とカスタマイズ後では、読者の使いやすさに大きな差が生まれます。

カスタマイズ前後でどのような違いがあるのかを見てみましょう。

デフォルトのカテゴリーページ

SWELLのデフォルト状態では、カテゴリーページに記事が新着順で羅列されるだけです。

この状態だと、読者が目的の記事を見つけにくく、すぐに離脱してしまう可能性がありますね。

カスタマイズしたカテゴリーページ

カテゴリーページをカスタマイズすれば、読者に読んでほしい記事を表示して、誘導することができます。

記事風にカスタマイズ

上記の例では、デフォルトのようにただ記事を並べるのではなく、カテゴリーページをまとめ記事のようにする方法です。

最近では上記の例のように、カテゴリーページを記事化する人も多くなってきました。

タブブロックを使ってカスタマイズ

デフォルトの状態だと、親カテゴリーも子カテゴリーも一緒に新着順で並びます。

そこで、タブブロックを使って子カテゴリーである「SWELLの始め方」と「SWELLの使い方」の記事を分けて表示するように変更しました。

タブブロックを使うことで、読者は読みたい記事を素早く見つけることができるようになります。

SWELLでカテゴリーページをカスタマイズする方法

SWELLのブログパーツ機能を使えば、以下の手順でカテゴリーページを簡単にカスタマイズできます。

順番に見ていきましょう

STEP1 ブログパーツを作成する

ブログパーツをカテゴリーページに設置すると、以下のように「タイトル」と「記事一覧」の間に表示されます。

まずは、カテゴリーページに表示するコンテンツをブログパーツで作成しましょう。

WordPress管理画面から「ブログパーツ」⇒「投稿を追加」の順にクリックしてください。

ブログパーツは好きなように作り込みましょう。

ブログパーツのなかでは、見出しブロックや、関連記事ブロックそしてタブブロックも自由に使えます。

こんなふうにブログパーツで記事風に作ってもOKです。

あるいは、タブブロックを使って、記事一覧を子カテゴリーごとに分けるのも一つの方法です。

なお、ブログパーツの使い方については以下の記事で詳しく解説しているので参考にしてください。

STEP2 ブログパーツを「カテゴリー用」に設定する

ブログパーツを作成したら、ブログパーツ編集画面のサイドバーにある「用途」欄で「カテゴリー用」にチェックを入れてください。

チェックを入れ忘れると、カテゴリー編集画面でブログパーツを選択できないので注意しましょう。

作成したブログパーツの「用途」を「カテゴリー用」に設定したら、「公開」ボタンをクリックします。

STEP3 カテゴリー編集画面でブログパーツを適用する

作成したブログパーツをカテゴリーページに設定していきましょう。

WordPress管理画面から「投稿」⇒「カテゴリー」の順にクリックしてください。

カテゴリーページが表示されたら、対象のカテゴリーを選択してください。

今回は「SWELL」カテゴリーを選択します。

カテゴリー編集画面下部の「ページで呼び出すブログパーツ」で、作成したブログパーツを選択してください。

STEP4 2ページ目以降でブログパーツを表示しない

カテゴリーページが複数ページになる場合、２ページ目以降にブログパーツでカスタマイズした部分を表示しないよう設定できます。

２ページ目以降でブログパーツを非表示にするためには、カテゴリー編集画面「ページで呼び出すブログパーツ」の下にある「2ページ目以降は表示しない」にチェックを入れましょう。

上記のチェックをいれるだけで、１ページ目だけにブログパーツが表示されるようになります。

設定が完了したら、カテゴリー編集画面最下部の「更新」ボタンを忘れずにクリックしてください。

STEP5 表示を確認する

ここまで設定したら、実際にどう表示されるかを確認しておきましょう。

WordPress管理画面から「投稿」⇒「カテゴリー」の順にクリックしてカテゴリーページを表示させましょう。

表示したいカテゴリーにカーソルを合わせて表示される「表示」をクリックしてください。

すると、カテゴリーページのタイトル下にブログパーツが表示されます。

SWELLカテゴリーページのデザイン設定

カテゴリーページの見た目は、カテゴリー編集画面から細かく調整できます。

まずは、カテゴリー編集画面を表示させましょう。

WordPress管理画面から「投稿」⇒「カテゴリー」の順にクリック。

カテゴリーページが表示されたら、対象のカテゴリーを選択してください。

これでカテゴリー編集画面が表示されます。

タイトルとサブタイトルの変更方法

デフォルトの表示では、カテゴリーページのタイトルは「カテゴリー名 -category-」と表示されます。

カテゴリー編集画面で「ページに表示するタイトル」と「ページに表示するサブタイトル」を変更することができます。

例えば、タイトルを「SWELLで楽しくサイト運営しよう」、サブタイトルを「初心者向けガイド」に設定してみましょう。

この設定により、読者がカテゴリーの内容を一目で理解できるようになります。

記事一覧デザインの変更方法

SWELLでは、カテゴリーページの記事一覧を6種類のデザインから選択できます。

それぞれ以下のようなデザインになります。

カード型

 デフォルトのデザインで、アイキャッチ画像の下にタイトルや情報が配置されます。

リスト型

 アイキャッチ画像が左、タイトルや抜粋が右に表示される定番レイアウトです。

リスト型（左右交互）

 奇数番目の記事は左に、偶数番目の記事は右にアイキャッチが配置される特徴的なデザインです。

サムネイル型

 アイキャッチ画像に重なるようにタイトルが表示され、スタイリッシュな印象を与えます。

ブログ型

 1カラムでスッキリとした表示になり、記事内容に集中してもらいたい場合に適しています。

テキスト型

 アイキャッチ画像を使わないシンプルなテキストリンクのみの表示となります。

新着順と人気順のタブ切り替え設定

カテゴリーページの記事一覧に、新着順と人気順の切り替えタブを設置することができます。

カテゴリー編集画面の「新着順と人気順でタブを分けるかどうか」で「する」を選択してください。

「する」を選択することで、読者は新着記事と人気記事を簡単に切り替えられるようになります。

サイドバーの表示・非表示設定

SWELLではカテゴリーごとにサイドバーの表示・非表示を設定できます。

サイドバーの表示の有無は、カテゴリー編集画面の「サイドバー」項目で選択してください。

その他のカテゴリーカスタマイズ

カテゴリーページでできる、デザイン以外の設定を紹介します。

順番に説明します。

ショートコードを活用して目次を挿入する

カテゴリーページをブログパーツでカスタマイズした場合、通常の記事のように目次を表示できません。

そこで目次を表示するため、ブログパーツ内で[swell_toc]というショートコードを使用します。

以下のように、ショートコード[swell_toc]を配置した場所に目次が表示されます。

ショートコードで目次を表示した場合、画面右下の「目次」ボタンは表示されません。

カテゴリーページに「PR」表記する

SWELLでは、投稿ページだけでなくカテゴリーページにも「PR」表記することができます。

サイト運営で広告リンクを貼る場合、2023年10月から開始された「ステマ規制」により、「この記事には広告が含まれていますよ」と明記することが求められるようになりました。

「PR表記」するためには、カテゴリー編集画面の「『PR表記』をページに表示させるかどうか」で「表示する」に切り替えましょう。

「表示する」に切り替えると、カテゴリーページに以下のように「PR」表記が表示されます。

カテゴリーごとにCTAを設定する

SWELLではカテゴリーごとに、カテゴリーに含まれる記事の最下部にCTAを表示するよう設定できます。

CTAとは「Call To Action」の略で、読者の行動を促すための仕組みです。

CTAを設置する場合も、ブログパーツを利用します。

カテゴリー編集画面の「このカテゴリーのCTA」で、事前に作成したCTA用ブログパーツを選択してください。

CTAは記事下部の「この記事を書いた人」エリア上に表示されます。

この設定をした場合、CTAはカテゴリーページではなくカテゴリーに属する記事に設置されます。

まとめ｜カテゴリーページを編集してオリジナリティを出そう

今回は、SWELLでカテゴリーページをカスタマイズする方法を詳しく解説しました。

ブログパーツを使ってカテゴリーページをカスタマイズする手順は、次の通りです。

SWELLのブログパーツ機能を活用すれば、自由なレイアウトのカテゴリーページが簡単に作成できます。

単純な記事の羅列ではなく、読者にとって使いやすく、オリジナリティのあるカテゴリーページを作りましょう。

本ブログではWindowsテーマにSWELLを使用しています。

あなたも、直感的に操作できるSWELLにしませんか？

今回は以上です。

最後までお読みいただきありがとうございました。