Title: クエリーループブロック Author: Akira Tachibana Published: 2021年7月16日 Last modified: 2024年10月3日 --- ## カテゴリー * [はじめに](https://ja.wordpress.org/support/category/getting-started/) * [インストール](https://ja.wordpress.org/support/category/installation/) * [基本的な使い方](https://ja.wordpress.org/support/category/basic-usage/) * [基本的な管理](https://ja.wordpress.org/support/category/basic-administration/) * [カスタマイズ](https://ja.wordpress.org/support/category/customizing/) * [メンテナンス](https://ja.wordpress.org/support/category/maintenance/) * [セキュリティ](https://ja.wordpress.org/support/category/security/) * [高度なトピック](https://ja.wordpress.org/support/category/advanced-topics/) * [トラブルシューティング](https://ja.wordpress.org/support/category/troubleshooting/) ## 翻訳・改善にご協力ください ドキュメンテーションを現在[英語版](https://wordpress.org/support/)から翻訳中です。 どなたでも[ご協力いただけます](https://ja.wordpress.org/team/2019/08/06/359/)。 誤字や間違った情報にお気づきの方は、各記事の下にあるフィードバックセクションから お知らせください。 # クエリーループブロック [**ブロック**一覧へ戻る](https://ja.wordpress.org/support/article/blocks/) クエリーループブロックは、指定したパラメータに基づいて投稿を表示することができる 高度なブロックで、コードのない PHP ループのようなものです。これは、より複雑でパワフル な「[最新記事ブロック](https://ja.wordpress.org/support/article/latest-posts-block/?output_format=md)」 のようなものと考えることができます。様々なブロックパターンがブロックの設定に統合 されているので、ポートフォリオやお気に入りのレシピを満載したページなどを作成する ことができます。 ![3件の記事が並んでおり、画像、投稿タイトル、公開日が表示されています。](https:// wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at-5.49.43-PM-1024x374. png) クエリーループブロックを追加するには、ブロック追加ボタンをクリックして、このブロック を選択します。また、新しい段落ブロックに “/query loop” と入力して Enter キーを押す と、すぐに追加することができます。 ブロックの追加方法の詳細は[こちら](https://wordpress.org/support/article/adding-a-new-block/) をご覧ください。 ## ブロック設定 クエリーループブロックを追加すると、ブロックパターンの方式で様々なレイアウトの選択肢 が表示されます。すべてのオプションは、カルーセル形式またはグリッド形式で表示でき ます。各クエリーループブロックは、投稿タイトルブロックや投稿抜粋ブロックなど様々 なブロックが入れ子状態で組み合わされて作られています。これらの入れ子状態のブロック 内のコンテンツは編集することができませんが、外観やレイアウトをカスタマイズすること ができます。 **パターンの選択方法** 1. クエリーループブロックをお好みの方法で追加します。 2. そこから、カルーセル状のオプションをクリックして表示するか、すべてのオプションを グリッドで表示するかのオプションが表示されます。ブロックの上部で、どちらの方式に するかを切り替えることができます。 3. カルーセル表示の場合は「選択」ボタンを使って、グリッド表示の場合は希望のオプション を選択して決定してください。 **空の状態から始める方法** 1. クエリーループブロックをお好みの方法で追加します。 2. 「新規」オプションを選択します。 3. ここで、4つのバリエーションから選ぶことができます。使用したいものを選択してくだ さい。 **外観のカスタマイズ方法** クエリーループブロックは、再配置や追加などが可能な入れ子状のブロックで構成されて いるため、数多くのカスタマイズ方法があります。クエリーループブロックで1つのブロック をカスタマイズすると、その変更は同じタイプのすべてのブロックに適用されます。この ブロックをカスタマイズする際には、上部ツールバーのリスト表示を利用するとよいでしょう。 ここでは、カスタマイズのためのアイデアをいくつかご紹介します。 * クエリーループブロックの様々な部分の**幅を変更**できます。 * クエリーループブロックの内の**配置を変更**できます。 * クエリーループブロック内に例えば投稿者や投稿抜粋などの**ブロックを追加**できます。 * ドラッグ & ドロップまたはムーブツールを使ってお好みのままに**ブロックを再配置** できます。 * クエリーループブロックを選択し、ブロッツールバーの「表示設定」オプションを調整 することで、**表示される投稿数を変更**することができます。 * ブロック設定のオプションを使って、**様々な色のオプション**を設定できます。 * アイキャッチ画像ブロックを追加して**アイキャッチ画像を追加**できます。 ## ブロックツールバーオプション 各ブロックには固有の制御ツールがあり、エディター上でブロックを操作することができ ます。 ![クエリーループブロックのツールバーでの各種設定をあらわす画像。](https://wordpress. org/support/files/2021/07/Screen-Shot-2021-07-07-at-5.51.38-PM.png) クエリーループブロックのツールバー クエリーループブロックのツールバーには以下のオプションがあります。 **配置の変更** * **幅広** – クエリーループブロックの幅をコンテンツサイズよりも広く増加させます。 * **全幅** – 画面の全幅をカバーするまでクエリーループブロックを広くします。 ![](https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at-5.54.20- PM.png) **表示設定** このオプションでは、以下の制御が可能です。 * **ページごとの項目数** – クエリーループブロック内に表示したい記事の数を選択し ます。 * **オフセット** – 出力を開始する前に、クエリーループブロックが特定の数の WordPress 投稿をスキップできるようにします。 * **表示する最大ページ数** – 表示するコンテンツの数を制限します。 ![](https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at-6.13.09- PM.png) **リストビュー (デフォルト)** 投稿した内容をスタック一覧で表示します。 ![ブロックツールバーの設定で「リスト表示」を選択した際に投稿が一覧で表示されている 画像。](https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at-6.21.52- PM-984x1024.png) リスト表示 **グリッドビュー** 投稿をグリッド表示します。 ![ブロックツールバーの設定で「グリッド表示」を選択した際に投稿がグリット状に表示 されている画像。](https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07- 07-at-6.21.44-PM-1024x642.png) グリッド表示 ## クエリーループ設定 すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイド バーにも特定のオプションがあります。サイドバーが表示されていない場合は、「公開」 ボタンの横にある「歯車」アイコンをクリックしてください。 **色** クエリーループブロックの色オプションは、クエリー全体に影響します。なお、クエリー ループブロックの中にある個々のブロックもカスタマイズできることも覚えておいてくだ さい。 * **テキスト色** – あらゆるテキストの色を制御します。 * **背景色** – ブロックの全体的な背景を制御します。 * **リンク色** – あらゆるリンクの色を制御します。 **テンプレートからのクエリーを継承** これは、ループが依存するクエリーをカスタマイズするかどうかによって、有効化/無効化 を切り替えることができるオプションです。それ以外の場合、WordPress は使用されている テンプレートに基づいて、どの記事を表示するかを決定します。このオプションを有効化 すると、特定のカスタマイズオプションが非表示になります。無効化すると、より多くの カスタマイズオプションが表示されます。 **並び順** * 投稿順 (最新から) * 投稿順 (過去から) * アルファベット順: A から Z * アルファベット順: Z から A **上部固定投稿** このオプションでは、3つのオプションのいずれか選択できます。 * **含む** (デフォルト) – 上部固定投稿を表示します。 * **除外** – 上部固定投稿を除外します。 * **限定** – 上部固定投稿のみを表示します。 **フィルター** このオプションでは、表示される投稿をさらにカスタマイズすることができます。このセクション が表示されていないのは、「テンプレートからクエリーを継承」の設定をオフにする必要 があるためです。 * **カテゴリー** – 含めたいカテゴリーを半角カンマで区切って入力してください。 * **タグ **– 含めたいタグを半角カンマで区切って入力してください。 * **投稿者 **– 全投稿者のリストから選択してください。 * **キーワード** – 含めたいキーワードを入力してください。 ![クエリーループブロックのカテゴリーやタグなどの各種絞り込みオプションの画像。]( https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at-6.30.18-PM. png) ## 高度な設定 「高度な設定」タブでは、ブロックに CSS クラスを追加することができ、カスタム CSS を記述して、ブロックを自由にスタイリングすることができます。また、HTML 要素を割り当てる こともできます。 ![クエリーループブロックに HTML 要素を割り当て、CSS クラスを追加するオプションを 示す画像。](https://wordpress.org/support/files/2021/07/Screen-Shot-2021-07-07-at- 10.43.23-AM.png) 高度な設定のセクションでは、ブロックに CSS クラスを追加したり、HTML 要素を割り当て たりすることができます。 ## クエリーループブロックのデモ クエリーループブロックの動作を示す動画 ## リソース * [Query Loop: The Ins and Outs of One of WordPress 5.8’s Most Powerful Features](https://wptavern.com/query-loop-the-ins-and-outs-of-one-of-wordpress-5-8s-most-powerful-features) 変更履歴: * Added in resources section on 2021-07-14 * **Created** 2021-07-08 [原文](https://wordpress.org/documentation/article/query-loop-block/) ## この記事は役に立ちましたか ? どうすればさらに改善できますか ? フィードバックを送信するには[ログイン](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fja.wordpress.org%2Fsupport%2Farticle%2Fquery-loop-block%2F&locale=ja) する必要があります。