Gutenbergで記事の一覧を設置する方法【初心者向け/WordPressの使い方】

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、他の記事も見てもらうためにプラグインなしで記事一覧を設置する方法をお伝えいたします。

「最新の投稿」ブロック

最新の投稿ブロックアイコン

すぐに設置するなら、「最新の投稿」ブロックがオススメです。

プラスボタンから「最新の投稿」ブロック選択
エディタ画面の「ブロックを追加」から「最新の投稿」ブロック選択
左上のプラスボタンからメニューを開いて「最新の投稿」ブロックを選択
画面左上プラスボタンからメニューを開き「最新の投稿」ブロック選択

今までの投稿した記事の一覧を表示できる、便利なブロックです。
公開されたページが表示されます。

「最新の投稿」挿入後ページ表示

パスワードで保護したページも表示されます。ご注意ください。

配置変更・表示切り替え

ブロックツールでは、配置を変更できる他、「リスト」か「グリッド」に表示を切り替えられます。

最新の投稿ブロックツールの配置変更

垂直配置の変更

  • 左寄せ
  • 中央寄せ
  • 右寄せ
リスト表示
グリッド表示

デフォルトは左寄せのリスト表示です。

では右メニューバーでいろいろ調整してみましょう。

投稿コンテンツ設定

投稿コンテンツ設定

投稿ページの一部を表示します。

投稿コンテンツ設定 ON

オンにすると、このように新しいメニューが現れます。

抜粋

最新の投稿ブロックの投稿コンテンツ設定の「抜粋」を選択

「抜粋」で記入した内容が表示されます。公開方法の解説で軽く触れた、記事の概要を入力するところです。空白の場合は、記事の最初の文章が表示されます。

抜粋内の最大単語数

最新の投稿ブロックの投稿コンテンツ設定の「抜粋内の最大単語数」
「抜粋」を選択した場合、表示文字数を選択できます。

WordPressの仕様により、英語のみ適用されます。日本語の場合は、特別な設定が必要です。

最新の投稿ブロックの投稿コンテンツ設定の「抜粋内の最大単語数」を変更(アニメーション)
日本語の記事には動きはないが、英語の記事だけ文字数が変動している。

日本語にも設定を反映したい時は、専門の人に頼みましょう。

投稿全文

最新の投稿ブロックの投稿コンテンツ設定の「投稿全文」

記事の内容がすべて表示されます。

投稿メタ設定

「最新の投稿」ブロックの「投稿メタ設定」

記事の情報を、どこまで表示させるか設定できます。

投稿者名の表示

最新の投稿ブロックの投稿メタ設定の「投稿者名の表示」

記事を書いたユーザーの名前が表示されます。複数ユーザーで記事を書いている場合は、これにチェックを入れるといいでしょう。

投稿日を表示

最新の投稿ブロックの投稿メタ設定の「投稿日を表示」

投稿の公開日が表示されます。

アイキャッチ画像設定

最新の投稿ブロックのアイキャッチ画像設定

アイキャッチ画像を表示し、詳しい設定を行います。

アイキャッチ画像を表示

最新の投稿ブロックのアイキャッチ画像設定にある「アイキャッチ画像を表示」をオン

オンにすると、記事のアイキャッチ画像が表示されます。ただし、アイキャッチ画像を設定している記事のみです。

画像サイズ

最新の投稿ブロックのアイキャッチ画像設定にある「画像サイズ」

アイキャッチ画像のサイズを選択します。

画像の寸法

最新の投稿ブロックのアイキャッチ画像設定にある「画像の寸法」

アイキャッチ画像のサイズを細かく調節できます。

画像の位置

最新の投稿ブロックのアイキャッチ画像設定にある「画像の位置」調整(アニメーション)

アイキャッチ画像を左・中央・右のいずれかに配置できます。

アイキャッチ画像のリンクを追加

最新の投稿ブロックのアイキャッチ画像設定にある「アイキャッチ画像のリンクを追加」(アニメーション)

チェックを入れれば、アイキャッチ画像にも記事のリンクを反映して、クリックしやすくします。

並び替えと絞り込み

最新の投稿ブロックの並び替えと絞り込み設定メニュー

記事の並び順と、どういった記事を表示するか設定できます。

タグでの絞り込みはできません。

並び順

最新の投稿ブロックの並び順

公開日順か、記事のタイトル名順に並び替えられます。

カテゴリー

最新の投稿ブロックのカテゴリー絞り込み

指定カテゴリーの記事に絞り込みます。複数選択可能です。

投稿者

最新の投稿ブロックの投稿者絞り込み

特定のユーザーが書いた記事に絞ります。

項目数

最新の投稿ブロックの「項目数」調整(アニメーション)
表示する記事の数を設定します。

カラム

最新の投稿ブロックの表示カラム数(アニメーション)
「グリッド表示」のみ設定できます。横に何列表示するか調節します。

同じカテゴリー・筆者の記事リンク一覧を挿入できるため、ブログの回遊率上昇につなげられます。

「クエリーループ」・「投稿一覧」ブロック

デザインをもう少し調整したいなら、「クエリーループ」もしくは「投稿一覧」ブロックを使用します。両方とも同じブロックですから、どちらでも構いません。

左上のプラスボタンからメニューを開いて「クエリーループ」「投稿一覧」ブロックを選択
画面左上プラスボタンからメニューを開き「クエリーループ」「投稿一覧」ブロック選択

レイアウトの設定

レイアウトをカルーセルグリッドで確認します。

選択できるレイアウトはこちらです。

クエリーループレイアウト:標準
標準
クエリーループレイアウト
クエリーループレイアウト:左に画像
左に画像
クエリーループレイアウト
クエリーループレイアウト:小さな画像とタイトル
小さな画像とタイトル
クエリーループレイアウト
クエリーループレイアウト:グリッド
グリッド
クエリーループレイアウト
クエリーループレイアウト:大きなタイトル
大きなタイトル
クエリーループレイアウト
クエリーループレイアウト:オフセット
オフセット
クエリーループレイアウト

新規」をクリックすると、表示パターンを4つの中から選べます。

投稿表示のパターンを選択
クエリーループ新規パターン:タイトルと日付
タイトルと日付
クエリーループ新規パターン
クエリーループ新規パターン:タイトルと抜粋
タイトルと抜粋
クエリーループ新規パターン
クエリーループ新規パターン:タイトル、日付、抜粋
タイトル、日付、抜粋
クエリーループ新規パターン
クエリーループ新規パターン:画像、日付、タイトル
画像、日付、タイトル
クエリーループ新規パターン

表示設定

ブロックツールで、記事の表示数を設定できます。

クエリーループのブロックツールにある表示設定
  • ページごとの項目数
    表示する記事の数です。
  • オフセット
    指定した数の記事を上から非表示にします。「1」にすると、一番上に表示していた記事が消えます。
クエリーループブロックツールにあるリスト表示とグリッド表示の切り替え

リストグリッドの表示を切り替えられます。「最新の投稿」ブロックと同じです。

クエリーループブロックツールにあるリスト表示とグリッド表示の切り替え(アニメーション)
リストとグリッドの切り替え

テンプレートの編集

「最新の投稿」ブロックと違うのは、一覧のデザインをブロックで調整できる点です。
「デザイン」や「テーマ」系統で、投稿表示に関するブロックがあります。これを利用して、一覧テンプレートを編集できます。

クエリーループブロックの投稿テンプレートの編集(アニメーション)

一つの「投稿テンプレート」ブロックを編集すれば、「クエリーループ」ブロック内にある他の投稿の表示も同じになります。

テンプレートに少し要素を追加、微調整をしたいときに便利です。

右サイドバーに移ります。

色設定

右メニューバーの色設定

テキストと背景の色を変更できます。これも「最新の投稿」ブロックにはない機能でした。

クエリーループブロックの色設定(アニメーション)

設定

何の一覧を表示するか、基本設定できます。

クエリーループの設定メニュー
テンプレートからクエリーを継承
細かい設定をしたいときはオフでいいです。オンにすれば、WordPressのテンプレート設定に従う形になり、カスタマイズできなくなります。
投稿タイプ
投稿タイプ
投稿」か「固定ページ」か選びます。「カスタム投稿」という機能を使っていれば、それも選択できます。ブログ記事の一覧を出したいなら「投稿」です。
並び順
並び順
公開日順か、記事のタイトル名順に並び替えられます。
先頭固定表示の投稿
先頭固定表示の投稿
「先頭固定表示」を設定している記事も含めるかどうか選択します。「限定」は先頭固定表示記事のみになります。

絞り込み

記事一覧の中から絞り込みします。

クエリーループの絞り込み設定
カテゴリーの絞り込み
カテゴリー
指定カテゴリーの記事に絞り込みます。複数選択可能です。
タグでの絞り込み
タグ
指定タグの記事に絞り込みます。複数選択可能です。
投稿者の絞り込み
投稿者
特定のユーザーが書いた記事に絞ります。
キーワードでの絞り込み
キーワード
カテゴリーやタグ以外に、記事の内容やタイトルのキーワードで絞り込みます。

以上、記事の一覧を設置する「最新の投稿」・「クエリーループ」ブロックを解説しました。

その他のブロックについての解説は、WordPressレクチャーからご覧ください。

受付時間 平日10:00~17:00(土日祝除く)

東京オフィス
香川オフィス
WordPressのログイン画面と投稿管理画面
WordPressの使い方 シリーズ
火燵でも利用しているCMS「WordPress」の使い方です。