MENU
おすすめの記事
WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

2024年4月にリニューアルしました!絞り込み検索やお気に入り機能もあります。ぜひ見ていってください!

さとしん
WordPressとSWELLが好きなブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。
【2024/10/24】SWELLサイト事例集を更新しました!→【20241024】SWELLサイト集更新!→クリックタップ

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

当ページのリンクには広告が含まれています。
SWELLのカテゴリーとタグページをカスタマイズする方法!
  • URLをコピーしました!

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

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

オリジナルのページを作れるよ…!
カスタマイズの例
  • 記事を読んでほしい順に並べる
  • 通常の記事の様に作り込む

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

さとしん

訪問者に優しいアーカイブページ作りにチャレンジしてみましょう…!


SWELLの使い方ガイド

SWELLの使い方や設定など、便利な機能をまとめた使い方ガイドを作りました。

目次

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

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

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

  1. 記事の配置をオリジナルにした状態
  2. 通常記事(まとめ記事)のようにした状態

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

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

実際にカスタマイズした例を見る
カテゴリーページをカスタマイズした例-1
さとしん

自分の好きなデザインを作れます…!

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

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

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

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

実際にカスタマイズした例を見る
カテゴリーページをカスタマイズした例-2
さとしん

最近はカテゴリーページを記事化する人が増えてきている気もします…!

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

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

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

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

  1. カスタマイザーから設定する項目
  2. アーカイブの編集ページで設定する項目

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

>>

さとしん

公式のマニュアルに各項目の説明が細かく書かれているのでしっかり見てくださいね…!

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

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

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

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

>>

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

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

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

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

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

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

アーカイブページでブログパーツを使う方法-2

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

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

カテゴリー用ブログパーツ

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

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

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

STEP
管理画面→「投稿」→「カテゴリー」or「 タグ」をクリック
アーカイブページのカスタマイズ方法-1
STEP
編集したいアーカイブページの編集画面に進む
アーカイブページのカスタマイズ方法-2
STEP
「ページで呼び出すブログパーツ」の欄でお好みのブログパーツを選択
アーカイブページのカスタマイズ方法-3

「2ページ目以降は表示しない」にチェックを入れると、記事一覧を表示していてアーカイブページが複数になる場合などに、2ページ目以降のブログパーツを非表示にできます。

STEP
「更新」をクリックして完了

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

次にアーカイブページをカスタマイズする際に知っておくと良いことを2つ紹介します。

カテゴリーページに目次を挿入する方法

カテゴリーやタグページをブログパーツでカスタマイズして記事化する場合、デフォルトの状態では目次が表示されません。

カテゴリーページに目次を表示させる場合は、ショートコードを使用します。

SWELLのアーカイブページに目次を表示させる方法-1
目次が表示されない
SWELLのアーカイブページに目次を表示させる方法-2
目次を表示させる

目次を表示させたい場所で、以下画像のように「swell_toc」というショートコードを入力すると目次が表示されるようになります。

SWELLのアーカイブページに目次を表示させる方法-3

この方法で目次を表示した場合、画面右下に表示できる「目次」ボタンは動作しません。

2ページ目以降にはブログパーツ部分を非表示にする方法

カテゴリーやタグページが複数ページになる場合、2ページ目以降はブログパーツのカスタマイズ部分を非表示にすることができます。

みにしん

ブログパーツでカスタマイズした内容が2ページ目以降には不要だなと感じることもあるよね…!

アーカイブページで2ページ目以降のブログパーツを非表示にするためには、以下の場所にチェックを入れます。

WordPress管理画面→「投稿」→「カテゴリー」→「ページで呼び出すブログパーツ」→『2ページ目以降は表示しない』

SWELLのアーカイブページで2ページ目以降のブログパーツを非表示にする方法

上記の設定にチェックを入れることで、アーカイブページに反映されるブログパーツは1ページ目だけで表示されるようになります。

記事化したカテゴリーページに「PR」や「広告」を明記する方法

カテゴリーやタグのトップページをまとめ記事化している場合、ページ内にアフィリエイトリンクを設置することもあると思います。

そのような方で、2023年10月施行のステマ規制への対策を講じたいと考えている方は、SWELLのPR表記機能を活用すると便利です。

SWELLのPR表記機能-9

カテゴリー編集画面の以下から簡単に設定できます。

WordPress管理画面→「投稿」→「カテゴリー」→「SWELL設定」→『「PR表記」をページに表示するかどうか』

SWELLのPR表記機能-8

この表記に関する詳細の設定方法は以下の記事にまとめているので参考にしてください。

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

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

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

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

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

SWELLのCTAウィジェット

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

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

CTA用ブログパーツ

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

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

STEP
管理画面→「投稿」→「カテゴリー」or「 タグ」をクリック
アーカイブページのカスタマイズ方法-1
STEP
編集したいアーカイブページの編集画面に進む
アーカイブページのカスタマイズ方法-2
STEP
「このカテゴリーのCTA」の欄でお好みのブログパーツを選択
アーカイブページのカスタマイズ方法-4
STEP
「更新」をクリックして完了

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

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

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

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

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

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

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

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

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

さとしん

難しくないのでチャレンジしてみましょう…!

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

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


はこちらからどうぞ…!

SWELLの使い方や設定に関する記事

SWELLの便利機能を使いこなすためのSWELL使い方ガイド↓↓

SWELL全般の関連記事

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

この記事が気に入ったら
いいね または フォローしてね!

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