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

ネストされたブロックは、WordPressブロックエディターの最も強力な機能の1つであり、それらを使いこなすことでデザインを次のレベルに引き上げることができます。

これにより、段落、画像、ボタンなどの複数の要素を単一のレイアウトにグループ化して整理できます。それらの使い方を理解すれば、追加のプラグインやカスタムコードに頼ることなく、より柔軟でプロフェッショナルなページを作成できます。

WPBeginnerでは、ネストされたブロックが最初にリリースされて以来それらを使用しており、ページデザインのアプローチを完全に変えました。複雑なレイアウトの管理が容易になり、基本的なコンテンツを洗練されたユーザーフレンドリーなセクションに変えるのに役立ちます。

このガイドでは、WordPressでネストされたブロックを選択して使用する方法をステップバイステップで説明します。これにより、自信を持って、よりクリーンで効果的なレイアウトを構築できるようになります。

WordPressのネストされたブロックとは何ですか？

WordPressのGutenbergネストブロック機能を使用すると、1つのブロック内に1つ以上のブロックを挿入（または「ネスト」）できます。

ネストされたブロックを使用すると、複数のブロックを互いに内側に配置することで、WordPressウェブサイトでより複雑なレイアウトを作成できます。これにより、ページや投稿のコンテンツのデザインとフォーマットの柔軟性が向上します。

たとえば、複数の画像ブロックをグループブロック内にネストして、特定のイベントの写真セットや、特定のテクニックを使用して作成された一連のアートワークを表示できます。

さらに、ネストされたブロック機能を使用すると、個々のブロックを個別に編集できます。これにより、他のブロックに影響を与えることなく、ニーズに合わせて各ブロックをカスタマイズできます。

これにより、コンテンツの整理が改善され、コンテンツがより魅力的になり、作成プロセスが合理化されます。

それでは、WordPress Gutenberg のネストされたブロックを簡単に選択して使用する方法を見てみましょう。

WordPressのネストされたブロックの使用方法

Gutenbergブロックエディターでは、グループブロックまたはカラムブロックを使用して、複数のブロックを簡単にネストできます。

まず、WordPress管理サイドバーからブロックエディターで既存の投稿または新しい投稿を開く必要があります。

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

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

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

このチュートリアルのために、画像ブロックを追加します。

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

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

WordPressネストブロック設定の設定方法

複数のブロックをネストしたら、各ブロックをクリックして個々の設定を構成できます。そこから、ブロックの設定が画面の右側の列に表示されます。

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

コンテナ自体の設定を構成するには、親ブロックを選択する必要があります。これは、ブロックツールバーの「親を選択」アイコンをクリックすることで行えます。これは、積み重ねられた2つの正方形のように見えることが多いです。

または、エディターの一番下にあるパンくずリストバーを使用して、「グループ」や「カラム」などの親名をクリックすることもできます。

これにより、右側のカラムに親ブロックの設定が開きます。これで、セクション全体のレイアウト、背景色、タイポグラフィを構成できます。

個々の内部ブロックに特定のスタイルを適用した場合を除き、これらの設定は親ブロック内にネストされたすべてのブロックに影響することに注意してください。

既存のブロックをグループ化する方法

既存のコンテンツをネストされたブロックに変換することもできます。これは、最初にグループブロックを作成してから後で埋めようとするよりも速いことがよくあります。

結合したいブロックを単純に選択します。マウスをドラッグして選択するか、Shiftキーを押しながら複数のブロックをクリックすることでこれを行うことができます。

選択したら、ブロックツールバーのグループアイコンをクリックします。

WordPressは、選択したコンテンツを自動的にグループブロックで囲みます。これで、他のネストされたセクションと同様に、レイアウトと背景を編集できます。

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

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

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

複数のブロックがネストされている場合、個々のブロックを選択して構成するのが難しい場合があります。

幸いなことに、Wayfinderプラグインを使用すると、親ブロックからネストブロックを簡単に選択でき、ブロックのタイプとクラスもわかります。

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

有効化したら、WordPress管理サイドバーから設定 » Wayfinderページに移動してください。

そこに着いたら、すべての設定がすでに有効になっています。使用したくない設定の横にあるチェックボックスをオフにするだけです。

例えば、Wayfinderにエディタ内のすべてのブロックのブロックタイプを表示させたい場合は、「ブロックタイプを表示」オプションの横にあるチェックボックスをオンのままにしてください。

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

設定を構成した後、「変更を保存」ボタンをクリックすることを忘れないでください。

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

そこに着いたら、内部ブロックの上にマウスをホバーすると、その名前が表示されたアウトラインが表示されます。親ブロック内のネストされたブロックのアウトラインと名前も表示されます。

これにより、グループブロックまたはカラムブロック内にネストされているすべての異なるブロックを特定できます。

ここから、親ブロックから個々のブロックを簡単に選択して設定を構成できます。

「カラム」または「グループ」の見出しをクリックすると、ネストされたすべてのブロックを一度に選択することもできます。これにより、右側のカラムに親ブロックの設定が開きます。

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

ネストされたブロックに関するよくある質問

ここに、読者がネストされたブロックの使用について頻繁に尋ねる質問をいくつか示します。

WordPressで複数のブロックを選択するにはどうすればよいですか？

複数のブロックを選択するには、最初のブロックをクリックし、Shift キーを押したまま、選択したい最後のブロックをクリックします。または、マウスカーソルをブロック上でドラッグして、一度にすべてをハイライトすることもできます。

WordPressでブロックを結合する方法は？

特定のアイテムを選択して結合したいアイテムを選び、ブロックツールバーのグループアイコン（積み重なった四角形）をクリックすることで、ブロックを結合できます。これにより、それらは単一のコンテナにラップされ、1つのユニットとして移動またはスタイル設定できるようになります。

ブロックをグループ化する方法は？

ブロックをハイライトしてツールバーオプションからグループを選択することで、ブロックをグループ化できます。これにより、ブロックを整理し、セクション全体に背景色や境界線を適用できる親コンテナが作成されます。

WordPressの親ブロックとは何ですか？

親ブロックは、他のブロックを内部に保持するコンテナ（グループブロックやカラムブロックなど）です。内部のブロックは「ネストされた」または「子」ブロックと呼ばれ、通常は親ブロックのレイアウトとスタイル設定を継承します。

WordPressのスペーサーブロックとは何ですか？

スペーサーブロックは、他のブロックの間に調整可能な空のスペースを追加するために使用されるレイアウトツールです。カスタムコードを書くことなく、セクション間の垂直距離と余白を制御できます。

WordPressのダイナミックブロックとは何ですか？

ダイナミックブロックは、静的なHTMLを保存するのではなく、コンテンツを自動的に生成するブロックです。例としては、最新の投稿ブロックやカレンダーブロックがあり、新しいコンテンツを公開したりサイト設定を変更したりするたびに即座に更新されます。

WordPressのセパレーターブロックとは何ですか？

セパレーターブロックは、コンテンツセクションの間に視覚的な区切りを作成し、通常は水平線として表示されます。長い記事を明確な章やトピックに分割し、読書体験を向上させるのに役立ちます。

この記事がWordPressのネストされたブロックの選択と使用方法を学ぶのに役立ったことを願っています。また、WordPressでブロックの高さを変更する方法のステップバイステップチュートリアルや、WordPressブロックパターンの使用方法の初心者ガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。