WordPressテーマ『SWELL』では、カテゴリーページやタグページも柔軟にカスタマイズすることができます。
たとえば、以下のようにアレンジすることも可能です。
自分でブロックを組み合わせてページを作る以外にも、設定画面からマウス操作だけで設定できる項目も多数あるので、そのあたりも簡単に紹介します。
さとしん訪問者に優しいアーカイブページ作りにチャレンジしてみましょう…！
トップページのカスタマイズ方法を知りたい方は以下の記事もどうぞ。
SWELLはカテゴリー、タグページも柔軟にカスタマイズできる
SWELLではトップページだけでなく、カテゴリーページ、タグページも自由にカスタマイズすることができます。
例えば以下のようにアレンジした例を紹介します。
- 記事の配置をオリジナルにした状態
- 通常記事(まとめ記事)のようにした状態
まずは、トップページのように記事のレイアウトを工夫してみた例です。
さとしん自分の好きなデザインを作れます…！
このサイトの「SWELL」カテゴリーも、少しだけ記事の配置を変えてレイアウトを組んでみました。
それから、ただ記事を並べるだけでなく、通常の記事のように作りこむこともできます。
カテゴリーページを記事化して、まとめ記事のようにする手法です。
さとしん最近はカテゴリーページを記事化する人が増えてきている気もします…！
紹介した2つの例のように、カテゴリーやタグページのデザインを簡単にオリジナルのデザインにカスタマイズすることができます。
カテゴリーページ、タグページの基本的な設定項目
まず、アーカイブページの基本的な設定項目を紹介します。
以下の2つの設定があります。
- カスタマイザーから設定する項目
- アーカイブの編集ページで設定する項目
まず、カスタマイザーから設定する項目は、公式サイトの以下のページで解説されています。
さとしん公式のマニュアルに各項目の説明が細かく書かれているのでしっかり見てくださいね…！
上記リンク先の内容は、全てのアーカイブページに一律で反映される項目です。
タイトルの配置や表示形式を設定することができます。
また、各アーカイブの編集ページで個別に設定できる項目もあります。
こちらは、公式サイトの以下のページで詳しく解説されているので見てみてください。
カテゴリーページ、タグページのカスタマイズ方法
ここから、実際にアーカイブページのレイアウトをカスタマイズする方法を紹介していきます。
SWELLのブログパーツ機能を使用してカスタマイズしていきます。
ブログパーツについては以下の記事で詳しく紹介しています。
SWELLでは以下赤枠のように、アーカイブページのタイトル下にブログパーツを呼び出すことができます。
まずはブログパーツを作っておきましょう。
今回の例では、カテゴリーページをカスタマイズするため「カテゴリー用」にチェックを入れています。
作成したブログパーツをアーカイブページに設定する手順は以下のとおりです。
これでアーカイブページのタイトル下にブログパーツを設置することができます。
CTAもカテゴリーごとに設置できる
SWELLでは、CTAをカテゴリーごとに出しわけることができます。
こちらも ブログパーツ 機能を使用します。
CTAウィジェットは、記事下部の「この記事を書いた人」エリアの上あたりに表示されます。
そのカテゴリーに関連したCTAを表示することで、より読者の行動を促しやすくなるかなと思います。
先ほど同様、事前にブログパーツを作っておきましょう。
CTAは以下の手順で設定できます。
これでCTAウィジェットをカテゴリー、タグごとに個別に設定することができます。
カテゴリーページもオリジナルにカスタマイズしよう！
今回はSWELLのカテゴリーやタグページのカスタマイズについて紹介しました。
カスタマイザーからクリック操作だけで設定できる項目だけでなく、ブログパーツ機能を活用して、ページ内のレイアウトを柔軟に設定することができます。
工夫次第で、サイト全体を読者にとって見やすく分かりやすく整理することができます。
また、トップページと合わせてオリジナリティを出すことで他のブログとの差別化にもつながります。
トップページの作り方は以下の記事で紹介しています。
カスタマイズはSWELLの高機能なブロックエディターのおかげで、HTMLやCSSを書く必要もありません。
SWELLのブロックエディターについてはこちらも見てみてください。
さとしん難しくないのでチャレンジしてみましょう…！
みなさんがSWELLで素敵なサイトを作られることを楽しみにしています。
最後まで読んでいただきありがとうございました。
SWELL公式サイト
はこちらからどうぞ…！
SWELLを全力でレビューした記事
SWELLの設定や使い方をまとめた記事
SWELLのトップページカスタマイズ方法をまとめた記事
SWELLのブログ、サイト集はこちら
