ご購入からテーマ導入までの流れ

カテゴリーごとの投稿リストをレイアウトする方法

投稿リストのレイアウト例

カテゴリーやタグなどの分類ごとに記事をレイアウトする方法をご紹介します。

例えば、こちらのサイトSTORK19をご使用いただいています)のように、カテゴリー分類ごとの投稿リストを2カラム(横並び)で配置したレイアウトを、ブロックエディタで再現してみます。

このようなレイアウトを作ります

記事リストを2カラムでレイアウトした例
記事リストを2カラムでレイアウトした例

ブロックエディターで複数のブロックを設置して構成するようになりますが、ここではグループ化したブロックを2カラムレイアウトに変更する方法で解説します。

ブロックエディタでカラムレイアウトを作る方法

レイアウトを作成する手順

手順1:必要なブロックを設置する

先ずは必要なブロックを配置します。今回の場合だと「見出し」「画像」「記事リスト(カテゴリー)」「ボタン」のブロックを追加します。

ブロックリスト

カテゴリー以外の記事を表示したい場合は「記事リスト(タグ)」や「記事リスト(新着記事)」を追加してください。

それぞれのブロックは、以下の用途として使用します。

  • 見出し(カテゴリー名)
  • 画像(カテゴリーのアイキャッチ)
  • 記事リスト(投稿リストの表示)
  • ボタン(記事一覧ページへのリンク)

記事リストはSTORK19/SEで使用できるブロックです。

記事リストブロックの使い方 - STORK19

手順2:設置したブロックをグループ化

手順1で設置した各ブロックをグループに変換します。複数のブロックを選択してブロックタイプを変更できます。

手順3:グループ化したブロック(グループブロック)を複製

手順2で変換したグループを複製します。この時点で2つのグループブロックができます。

グループを複製

手順4:2つのグループをカラム化

2つのグループブロックをカラムに変換します。2つのグループブロックを選択してブロックタイプを変更できます。

横並び」というスタイルを使用する方法もありますが、現状ではスマホ表示の際に縦に並べることができないようなので、今回は「カラム」を使用しています。


以上の手順でレイアウトは出来上がりました!

あとは、このレイアウトを基にして各ブロックの内容を変更すれば完成です。

まとめ

カテゴリーごとにまとめるレイアウトの作成方法については、これまでにもご質問が多い内容だったので、今回記事してみました。

カテゴリーやタグ、新着記事など、分類ごとに記事を見易くまとめることができるので、トップページなどのレイアウトの参考にしていただければと思います。

また、それぞれの投稿リストをタブ形式の切替え表示にして、ページ内で複数の投稿リストをコンパクトに見せる方法もあります。

情報の整理や比較表示に便利な「タブ」ブロック

NEWモデル

STORK SE

よりコンテンツに集中させるテーマ
STORK SE(ストークSE)

STORK SEはシングルカラム(1カラム)に特化したテーマなので、より訴求力の高いページやブログ記事を作成するのに向いています。

究極のモバイルファーストテーマ
STORK19(ストーク19)

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。