SWELLのカテゴリーページとタグページをカスタマイズする方法！

WordPressテーマ『SWELL』では、カテゴリーページやタグページも柔軟にカスタマイズすることができます。

たとえば、以下のようにアレンジすることも可能です。

自分でブロックを組み合わせてページを作る以外にも、設定画面からマウス操作だけで設定できる項目も多数あるので、そのあたりも簡単に紹介します。

トップページのカスタマイズ方法を知りたい方は以下の記事もどうぞ。

>>SWELLカスタマイズ！サイト型トップページの作り方！素敵なブログを作ろう！

SWELLはカテゴリー、タグページも柔軟にカスタマイズできる

SWELLではトップページだけでなく、カテゴリーページ、タグページも自由にカスタマイズすることができます。

例えば以下のようにアレンジした例を紹介します。

まずは、トップページのように記事のレイアウトを工夫してみた例です。

縦に長いので見たい方はアコーディオンを開いてみてください。

このサイトの「SWELL」カテゴリーも、記事の配置を変えてレイアウトを組んでいます。

それから、ただ記事を並べるだけでなく、通常の記事のように作りこむこともできます。

カテゴリーページを記事化して、まとめ記事のようにする手法です。

縦に長いので見たい方はアコーディオンを開いてみてください。

紹介した2つの例のように、カテゴリーやタグページのデザインを簡単にオリジナルのデザインにカスタマイズすることができます。

カテゴリーページ、タグページの基本的な設定項目

まず、アーカイブページの基本的な設定項目を紹介します。

以下の2つの設定があります。

まず、カスタマイザーから設定する項目は、公式サイトの以下のページで解説されています。

>>アーカイブページに関する基本的な設定項目

上記リンク先の内容は、全てのアーカイブページに一律で反映される項目です。

タイトルの配置や表示形式を設定することができます。

また、各アーカイブの編集ページで個別に設定できる項目もあります。

こちらは、公式サイトの以下のページで詳しく解説されているので見てみてください。

>>カテゴリー・タグページごとに個別カスタマイズできる設定項目一覧

カテゴリーページ、タグページのカスタマイズ方法

ここから、実際にアーカイブページのレイアウトをカスタマイズする方法を紹介していきます。

SWELLのブログパーツ機能を使用してカスタマイズしていきます。

ブログパーツについては以下の記事で詳しく紹介しています。

>>SWELLブログパーツの使い方！記事内でもウィジェットでも大活躍の便利機能！

SWELLでは以下赤枠のように、アーカイブページのタイトル下にブログパーツを呼び出すことができます。

まずはブログパーツを作っておきましょう。

管理画面→「ブログパーツ」→「新規追加」から作成できます。

ブログパーツを公開する際、「用途」には「カテゴリー用」か「タグ用」のチェックを入れてください。

今回の例では、カテゴリーページをカスタマイズするため「カテゴリー用」にチェックを入れています。

作成したブログパーツをアーカイブページに設定する手順は以下のとおりです。

これでアーカイブページのタイトル下にブログパーツを設置することができます。

CTAもカテゴリーごとに設置できる

SWELLでは、CTAをカテゴリーごとに出しわけることができます。

CTA：Call To Actionの略で、読者の行動を促すためのもの

こちらもブログパーツ機能を使用します。

CTAウィジェットは、記事下部の「この記事を書いた人」エリアの上あたりに表示されます。

そのカテゴリーに関連したCTAを表示することで、より読者の行動を促しやすくなるかなと思います。

先ほど同様、事前にブログパーツを作っておきましょう。

ブログパーツを公開する際、「用途」には「CTA」のチェックを入れてください。

CTAは以下の手順で設定できます。

これでCTAウィジェットをカテゴリー、タグごとに個別に設定することができます。

カテゴリーページもオリジナルにカスタマイズしよう！

今回はSWELLのカテゴリーやタグページのカスタマイズについて紹介しました。

カスタマイザーからクリック操作だけで設定できる項目だけでなく、ブログパーツ機能を活用して、ページ内のレイアウトを柔軟に設定することができます。

工夫次第で、サイト全体を読者にとって見やすく分かりやすく整理することができます。

また、トップページと合わせてオリジナリティを出すことで他のブログとの差別化にもつながります。

トップページの作り方は以下の記事で紹介しています。

カスタマイズはSWELLの高機能なブロックエディターのおかげで、HTMLやCSSを書く必要もありません。

SWELLのブロックエディターについてはこちらも見てみてください。

みなさんがSWELLで素敵なサイトを作られることを楽しみにしています。

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

---

SWELL公式サイトはこちらからどうぞ…！

SWELLを全力でレビューした記事

SWELLの設定や使い方をまとめた記事

SWELLのトップページカスタマイズ方法をまとめた記事

SWELLのブログ、サイト集はこちら