【SWELL】投稿一覧・カテゴリーアーカイブページのデザインってどんな感じなの?

【レビュー】XWRITEでブログと企業サイトのデモサイトを作ってみた感想
初心者

SWELLの一覧ページってどんなデザインなの?
カテゴリーページのデザインを見てみたい
設定オプションも知りたい

そんな疑問に答えます。

WordPress有料テーマ「SWELL」でお知らせを一覧表示させるアーカイブページのデザイン、カテゴリーごとの一覧ページデザインとその設定オプションを図解で解説します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

お知らせ・投稿・カテゴリーアーカイブページのデザイン

カテゴリーアーカイブページのデザイン
かんた

SWELLはベースとなるデザインが6パターン用意されています。

カテゴリー・タグアーカイブのデザインパターン

  1. カード型
  2. リスト型
  3. リスト型(交互)
  4. サムネイル型
  5. ブログ型
  6. テキスト型

①カード型

SWELLカード型

カード型はSWELLカテゴリーアーカイブページのデフォルトデザインです。何も設定しない場合はこのカード型デザインが全カテゴリーアーカイブぺージのデザインです。

かんた

SWELL公式サイトのカテゴリーページもこのカード型デザインを採用しています↓

投稿一覧ページでカード型デザインを指定した場合にデフォルトで表示される要素は次の通りです。

オプション

  • アイキャッチ画像
  • タイトル
  • カテゴリー(アイキャッチ画像上の右上に表示されます)
  • 公開日
  • 更新日
  • 著者
  • 抜粋

オプションごとに表示・非表示にオプションがあります。例えば、公開日は表示したいけど更新日は表示したくない場合は更新日のオプションを非表示にすることができます。

僕はできるだけシンプルにしたいので、アイキャッチ画像・カテゴリー名、タイトルのみ表示しています。著者や抜粋まで表示するとさすがにゴチャゴチャした印象です。

アイキャッチの比率

ブログ型デザインを選択した際に表示されるアイキャッチ画像の比率は管理画面で変更できます。

画像比率

  • 白銀比率(1:1414)
  • 黄金比率(1:1618)
  • 一眼(3:2)
  • ワイド(16:9)
  • 横長(2:1)
  • 超横長(5:2)
  • 正方形(1:1)

アイキャッチ画像は縦横の比率を気にせずアップロードしてもカテゴリーアーカイブページで自動的に指定の比率にトリミングされます。

アイキャッチの比率はテキスト型以外の全デザインで設定できます。

②リスト型

SWELLリスト型

リスト型はブログデザインでよく見るデザインパターンです。

アイキャッチ画像が左、タイトルや抜粋などが右型に表示されるレイアウト形式です。「①」のカード型同様に、次の設定オプションで表示する要素をチューニングできます。

オプション

  • アイキャッチ画像
  • タイトル
  • カテゴリー(アイキャッチ画像上の右上に表示されます)
  • 公開日
  • 更新日
  • 著者
  • 抜粋

③リスト型(交互)

リスト型

リスト型(交互)オプションは②のリスト形式とほぼ同じです。アイキャッチの位置が奇数の投稿では「左」、偶数の投稿では「右」に交互に表示されます。

あまり有料テーマにはないデザインパターンでオシャレ度高めです。表示する設定オプションはブログ型、リスト型と同じです。

オプション

  • アイキャッチ画像
  • タイトル
  • カテゴリー(アイキャッチ画像上の右上に表示されます)
  • 公開日
  • 更新日
  • 著者
  • 抜粋

④サムネイル型

サムネイル型

サムネイル型デザインはカード型に類似しています。

ブログ型はアイキャッチ画像の下にタイトルや抜粋などの情報が表示されます。サムネイル型はアイキャッチ画像に重なるようにタイトルなどが表示されます。

かんた

SEOを考慮しタイトルにキーワードをモリモリ入れる系の人だとちょっと窮屈になってしまうのが欠点。

⑤ブログ型

SWELLブログ型

ブログ型デザインは有料テーマだとお馴染みのデザインです。ブログ型やサムネイル型のような3カラムではなく、1カラムで表示されるデザインです。

かんた

比較的サッパリとしたデザインで見やすい印象ですが、スクロールしないと目に入らない投稿が多くなってしまうのが欠点です。

⑥テキスト型

SWELLテキスト型

テキスト型はその名の通りテキストリンクのみのデザインです。

アイキャッチは表示されません。ブログのカテゴリー一覧として使うにはちょっと味気ない気がします。

用途とするとコーポレートサイトでお知らせカテゴリー一覧を表示する場合に使えます。

コーポレートサイトのお知らせコンテンツは営業時間のお知らせ・夏季休業といったもので、アイキャッチ画像がないコンテンツがあったりします。一覧表示でひとつだけアイキャッチがないとどうしてもチグハグとした印象を与えてしまいます。

かんた

テキスト型を使えばわざわざアイキャッチ画像を用意しなくても良いというメリットがあります。

カテゴリー・タグアーカイブページの設定オプション

カテゴリー・タグアーカイブページの設定オプション

SWELLのカテゴリーアーカイブページ・タグアーカイブなどのお知らせを一覧するページはカテゴリーごとにデザイン系のオプションを変更することができます。

例えば「営業時間カテゴリー」ではサイドバーを表示しない。

「それ以外のカテゴリー」ではサイドバーを表示してデザインをカード型にする…なんて感じで個別のカテゴリーやタグごとにデザインを調整できます。

カテゴリーの設定イメージ

  • お知らせカテゴリー:サイドバーなし、アイキャッチ画像を表示
  • 製品カテゴリー:サイドバー有り、CTAを表示する
かんた

SWELLにはざっくり次のようなオプションがあります。

アーカイブページの設定オプション

  1. ページに表示するタイトル
  2. ページに表示するサブタイトル
  3. 新着順/人気順のタブ
  4. タイトル位置
  5. サイドバー
  6. タームナビゲーション
  7. タイトルの背景画像(画像アップロード)
  8. アイキャッチが蔵(画像アップロード)
  9. アイキャッチ画像をページに表示するかどうか
  10. 「説明」の内容をページに表示するかどうか
  11. ページで呼び出すブログパーツ
  12. カテゴリーのCTA(ブログパーツ)

SWELL開発者さんが作ったSEO SIMPLE PACKプラグインをインストールする追加で以下のオプションも設定できるようになります。

追加オプション

  • robotsタグ(index、noindexなど)
  • meta title
  • meta description
  • canonical URL
  • OGPイメージ(画像アップロード)

SEO SIMPLE PACKプラグインはWordPress公式ディレクトリーに登録されている無料プラグインです。

新着順/人気順のタブ

このオプションを使うとカテゴリーアーカイブページに次の画像のようなタブが表示されます。

SWELLのカテゴリー一覧ページにある新着順/人気順のタブ機能。

「新着記事」タブをクリックすると、投稿日が新しい順に記事が表示されます。「人気順」タブをクリックするとアクセス数が多い記事順に自動的に並び替えて表示させる仕組みです。

SWELLはテーマの機能として記事ごとのアクセス数を記録するシステムが搭載されています。人気順タブは内部でカウントされたPVをもとに順序を変更する仕組みです。

SWELL公式サイトのカテゴリー一覧ページでもこのタブ機能を使っています。

かんた

実際の動作を確認したい人はSWELL公式サイトをチェックしてみましょう。

サイドバー

サイドバーの表示オプションです。「表示」「非表示」の他、「ベースに従う」という共通設定を優先するオプションがあります。「表示」を選択するとサイト共通のサイドバーが表示されます。

「非表示」を選択するとサイドバーが消え、広々とした1カラムデザインになります。

サイドバーのオプション

  • 表示(2カラム)
  • 非表示(1カラム)
  • ベースに従う

SWELLの基本機能ではカテゴリーごとにサイドバーの表示を変えるといった制御はできませんが、簡単な独自カスタマイズでサイドバーの表示を切り替えることができます。詳しくは次の記事で解説しています。

ページで呼び出すブログパーツ

カテゴリーアーカイブページの先頭に、ブロックエディターで作成したパーツを表示させる機能です。

この機能の用途

  • 「このカテゴリーはこういう系の情報です~」といったテキストの表示
  • カテゴリーごとのオシャレな画像を設置してイメージアップ

ちなみに「ブログパーツ」とはSWELLのオリジナル機能の1つです。

SWELLはブロックエディター対応テーマです。そのブロックエディターで任意のパーツを作っておき、ページやウィジェットなどで呼び出して使うといった用途で使います。

ブログパーツの利点

  • 繰り返し使うパーツを登録しておくことで作業効率が上がる
  • ウィジェットにないパーツを自分で作れる

一覧ページにカスタムフィールドを追加表示するカスタマイズ

カスタムフィールドを一覧ページに表示するカスタマイズ

サイト運営で使える実用的なテクニックです。

不動産サイトで物件を一覧表示するページ上に、カスタムフィールドで入力した要素を表示させる方法を紹介します。

こんな場合に使えるテクニック

ポータルサイトや、ガジェットブログなどでアイキャッチ画像とタイトルと合わせてカスタムフィールドを表示できます。

カスタムフィールドを出力したサンプル

デモサイトのURL

一覧ページの出力に、任意のテキスト、アイコン、マークアップした要素を追加できます。特別難しいカスタマイズは不要で、「抜粋」に入力したものをそのまま表示する仕組みです。

かんた

詳しくは次の記事で詳しく解説しています。

まとめ

WordPress有料テーマSWELLの記事一覧、カテゴリーアーカイブページのデザインと設定オプションを紹介しました。SWELLの投稿一覧ページのデザインのベースデザインは下記6パターン。

一括での反映だけでなくカテゴリーやタグごとに自由に設定出来るのが特徴です。

投稿・カテゴリーアーカイブページのデザイン

  1. カード型
  2. リスト型
  3. リスト型(交互)
  4. サムネイル型
  5. ブログ型
  6. テキスト型

公式 SWELL公式サイト

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