Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで入れ子ブロックを選択し使用する方法

WordPressでネストされたブロックを選択して使用する方法を学びたいですか?

Gutenbergの入れ子ブロック機能では、親ブロックの中に複数のブロックを追加することができます。そして、異なるブロック要素を同時にカスタマイズし、投稿コンテンツを効率的に整理し、より柔軟なデザインにアクセスすることができます。

この投稿では、WordPressのネストされたブロックを簡単に選択して使用する方法を紹介します。

Select and use nested blocks in WordPress

WordPressの入れ子ブロックとは?

WordPress Gutenbergのネストブロック機能では、1つ以上のブロックを別のブロックの中に挿入(または「ネスト」)することができます。

ネストされたブロックは、複数のブロックを相互に追加することで、WordPressサイトでより複雑なレイアウトを作成するのに役立ちます。これにより、ページや投稿コンテンツのデザインやフォーマットをより柔軟に行うことができます。

例えば、グループブロックの中に複数のImageブロックを入れ子にして、特定のイベントの写真や、特定の技法で作られた一連の作品を表示することができます。

Preview of WordPress nested blocks

さらに、ネストされたブロック機能により、個々のブロックを区切り編集することができます。つまり、他のブロックに影響を与えることなく、ニーズに応じて各ブロックをカスタマイズできるのです。

その結果、コンテンツが整理され、コンテンツがより魅力的になり、クリエイティブなプロセスが効率化される。

ということで、WordPress Gutenbergネストブロックを簡単に選択して使用する方法を見てみましょう。

WordPressネストブロックの使い方

Gutenbergブロックエディターのグループまたはカラムブロックを使えば、複数のブロックを簡単にネストすることができます。

まず、WordPressの管理サイドバーからブロックエディターで既存投稿または新規投稿を開きます。

ここから、画面左上のブロック追加「+」ボタンをクリックし、グループブロックを見つけます。これをクリックしてページに追加したら、ネストさせるブロックのレイアウトを選択する必要があります。

このチュートリアルでは、「グループ」レイアウトを選択します。

Select Group block from the block menu

次に、画面上の「+」ボタンをクリックするだけで、親ブロック内にコンテンツを追加し始めることができる。

このチュートリアルでは、Imageブロックを追加します。

Add an image block within the Group block

ブロックを追加したら、上部にあるブロックツールバーの「グループ」ボタンをクリックして、親ブロックを選択するだけです。

次に、「+」ボタンをクリックしてブロックメニューを開き、そこから他のブロックを選んで追加する。

Open the block menu to add another block within the Group block

WordPressの入れ子ブロックの設定方法

複数のブロックをネストさせたら、それぞれのブロックをクリックして個々の設定を行うことができます。すると、画面の右カラムにブロックの設定が表示されます。

ここから、ネストしている他のブロックに影響を与えることなく、個々のブロックの背景色、テキスト色、サイズを調整することができます。

Configure the individual block settings

ネストしたブロックをすべて一緒に設定するには、上部のブロックツールバーの「グループ」ボタンをクリックする必要があります。すると、右カラムに親ブロックの設定が表示されます。

ネストされたすべてのブロックのジャスティフィケーション、向き、背景色、テキスト色、タイポグラフィを設定できるようになりました。

これらの設定は、親ブロックの中にネストされたすべてのブロックに影響することに留意してください。

Configure the settings of the Group block

また、ブロックの上部ツールバーにある「オプション」ボタンをクリックすると、既存の個々のブロックをネストしたブロックに変換することができます。

メニューが表示されるので、そこで「パターンを作成」オプションを選択する。

Create a pattern

そうすると、新しい再利用ブロックの名前とカテゴリーを選択するプロンプトが表示されます。

その後、「作成」ボタンをクリックして設定を保存します。

Add a name for the pattern

満足したら、忘れずに「公開する」または「更新する」ボタンをクリックして変更を保存してください。

この例では、タイトル、画像、段落のブロックをグループブロックの中に入れ子にしています。

ネストされたブロックは、デモサイトではこのように表示されます。

Preview of WordPress nested blocks

ボーナス:Wayfinderプラグインを使って、ネストしたブロックを簡単に選択する

複数のブロックが入れ子になっている場合、個々のブロックを選択して設定するのが難しいことがある。

幸いなことに、Wayfinderプラグインを使えば、親ブロックからネストしたブロックを選択するのがとても簡単で、ブロックのタイプやクラスまで教えてくれます。

まず、Wayfinderプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法についての初心者向けガイドをご覧ください。

有効化した後、WordPressの管理サイドバーから 設定 ” Wayfinderページにアクセスしてください。

そこに行くと、すでにすべての設定が有効化されています。使用したくない設定の隣のチェックボックスを外すだけです。

例えば、エディター内のすべてのブロックにブロックタイプを表示させたい場合は、’Display block type’オプションの横にあるチェックボックスをオンにしておきます。

Configure the Wayfinder plugin settings

ただし、プラグインにブロッククラスを表示させたくない場合は、そのオプションの隣にあるチェックボックスをオフにするだけでよい。

設定が終わったら、忘れずに「変更を保存」ボタンをクリックしてください。

次に、ダッシュボードからWordPressブロックエディターで既存投稿または新規投稿を開く必要があります。

一度、内側のブロックにマウスオーバーすると、アウトラインと名前が表示されます。また、親ブロックの中にネストされたブロックのアウトラインと名前も表示されます。

GIF for the Wayfinder plugin

これは、グループまたはカラムブロックの中に入れ子になっているすべての異なるブロックを識別するのに役立ちます。

ここから、親ブロックから個々のブロックを選択して、その設定を簡単に行うことができる。

Use Wayfinder plugin to easily select a block

カラム’または’グループ’見出しをクリックするだけで、ネストしたブロックをすべて同時に選択することもできます。そうすると、右カラムに親ブロックの設定が表示されます。

ブロック設定が完了したら、「更新」または「公開」ボタンをクリックして変更を保存します。

Click the Group block outline to open its settings

この投稿がWordPressのネストされたブロックの選び方や使い方の参考になれば幸いです。WordPress でブロックの高さと幅を変更する方法についてのステップバイステップのチュートリアルや、サイトの成長に欠かせない WordPress プラグインのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

4件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Ralph

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      管理者

  3. Jiří Vaněk

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。