グーテンベルクのブログ投稿用に再利用可能なDiviレイアウトブロックを作成する方法

Divi Layout Blockは、引き続きDiviテーマの便利なアップグレードであり、Gutenbergエディター内のブログ投稿にDiviLayoutを追加できます。 他のWordPressブロックと同じように、Diviレイアウトブロックをグーテンベルクで再利用可能なブロックに変換することもできます。 これにより、いくつかの役立つDivi Layoutデザインを、グーテンベルクで投稿を書く通常のフローに合理化するための扉が開かれます。

このチュートリアルでは、グーテンベルクのブログ投稿用に再利用可能なDiviレイアウトブロックを作成する方法を示します。 これを説明するために、この投稿の再利用可能なDiviレイアウトブロックの例のセクション仕切りを作成します。 ただし、これと同じ手法を簡単に適用して、Diviビルダーのほぼすべての再利用可能なDiviレイアウトブロックを作成できます。

始めましょう。

グーテンベルクのブログ投稿用のDiviレイアウトブロックの作成

ブログ投稿を作成または編集する

まず、新しいブログ投稿を作成するか、既存のブログ投稿を編集する必要があります。 この例では、いくつかの見出しブロックと段落ブロックを使用して、投稿のタイトルと本文にモックコンテンツを追加しましょう。 次に、注目の画像を追加し、Diviページ設定の下のページレイアウトに「サイドバーなし」を選択します。

インラインDiviレイアウトブロックを追加

投稿の大部分を作成したら、投稿コンテンツ領域内の任意の場所に新しいDiviレイアウトブロックを追加するだけです。

追加するには、メールオプチンを追加する領域にカーソルを合わせます。 次に、青いプラスアイコンをクリックして、新しいブロックを追加します。 ポップアップブロックリストで、DiviLayoutブロックを選択します。

Diviレイアウトブロック内に新しいレイアウトを構築する

Divi Layout Blockを選択すると、「BuildNewLayout」または「LoadfromLibrary」のいずれかを選択できます。 この例では新しい仕切りを作成する必要があるため、[新しいレイアウトの作成]オプションを選択します。

Diviレイアウトブロックエディタを使用してレイアウトを設計する

[新しいレイアウトの作成]ボタンを選択すると、レイアウトブロックエディター内でDiviレイアウトを設計できます。

この例では、Diviの断面形状の仕切りとグラデーションの背景を使用して、カスタムのセパレーターまたは仕切りを作成します。 これは、グーテンベルクのポスト内にセクションの仕切りを追加する便利な方法として、再利用可能なレイアウトブロックに変えることができるデザイン要素です。

セクションディバイダーデザインを作成するには、セクション設定を開き、以下を更新します。

• グラデーションの背景左の色：＃ddd6f3
• グラデーションの背景右の色：＃faaca8
• グラデーション方向：90度
• 開始位置：30％

• トップディバイダースタイル：スクリーンショットを参照
• トップディバイダーカラー：#ffffff
• トップディバイダーの高さ：50px

• ボトムディバイダースタイル：スクリーンショットを参照
• ボトムディバイダーカラー：#ffffff
• ボトムディバイダーの高さ：50px
• ボトムディバイダーフリップ：水平

• 高さ：100px
• パディング：0px上、0px下

設計が完了したら、Diviレイアウトブロックを必ず保存してください。

これで、Divi LayoutBlockセクションの仕切りがWordPressポストエディター内に表示されます。

レイアウトブロックのDiviレイアウトの上下の間隔は、フロントエンドよりもバックエンドの方が大きく表示される場合があることに注意してください。

これで、このDiviレイアウトブロックを再利用可能なレイアウトブロックに変換して、今後の投稿でこの同じセクション仕切りを簡単に追加できるようにする準備が整いました。

ただし、その前に、WordPressで再利用可能なブロックが何であるかを知っておくと役立つ場合があります。

再利用可能なレイアウトブロックとは

WordPressのデフォルトのブロックエディター（グーテンベルク）の再利用可能なレイアウトブロックは、Diviのグローバル要素によく似ています。 ブロックは複数回使用できますが、コンテンツと外観はすべてのインスタンスでまったく同じです。 また、再利用可能なレイアウトブロックを編集すると、サイト全体のレイアウトブロックのすべてのインスタンスに変更が適用されます。 レイアウトブロックがWordPressで再利用可能になると、投稿を書き込むときにブロックのリストでそのブロックを使用できるようになります。 これにより、複数のブログ投稿全体に同じレイアウトブロックを複数回追加すると非常に便利です。

Diviレイアウトブロックを再利用可能なレイアウトブロックに変える

Diviレイアウトブロックを再利用可能なブロックにするには、レイアウトブロックにカーソルを合わせ、3つのドットのアイコンをクリックして設定メニューを開きます。 次に、リストから「再利用可能なブロックに追加」オプションを選択します。

次に、再利用可能なブロックに名前を付け、[保存]ボタンをクリックして、ブロックを再利用可能なブロックとして保存します。

これで、ブログ投稿内に新しいブロックを追加すると、リスト内に新しい再利用可能なレイアウトブロックが表示されます（[再利用可能]カテゴリの切り替えの下）。 再利用可能なレイアウトブロックをクリックするだけで、投稿に追加されます。

ライブ投稿を見ると、まったく同じセクションディバイダーの2つのインスタンスが表示されます。

投稿またはサイト全体で再利用可能なブロックを複数回使用すると、再利用可能なレイアウトブロックのインスタンスの1つを編集でき、それらの変更はサイト全体のブロックのすべてのインスタンスに適用されます。

再利用可能なレイアウトブロックを編集するには、ブロックにカーソルを合わせ、ブロックの右上にある編集ボタンをクリックします。

次に、再利用可能なブロック内のレイアウトを選択（クリック）し、表示されるトップメニューの編集アイコンをクリックします。 右側のサイドバーの[ブロック]タブの下にある[レイアウトの編集]リンクをクリックすることもできます。

次に、レイアウトのデザインを必要に応じて変更します。 この例では、グラデーションの背景に使用される色を変更できます。

レイアウトを保存したら、再利用可能なレイアウトブロックの右上にある[保存]ボタンをクリックしてください。 次に、投稿を更新し、ライブサイトで変更を表示します。

再利用可能なレイアウトのすべてのインスタンスについて、デザインの変更が更新されていることがわかります。

ヒント：再利用可能なレイアウトブロックをテンプレートとして使用する

投稿で再利用可能なレイアウトブロックの修正バージョンを使用したい場合があります。 これにより、再利用可能なレイアウトブロックを開始テンプレートとして投稿に追加できるため、サイト全体で再利用可能なブロックに影響を与えることなく、特定のインスタンスのレイアウトブロックをカスタマイズできます。

再利用可能なレイアウトブロックをテンプレートとして使用するには、最初に再利用可能なブロックを投稿に追加します。

次に、ブロックメニューを開き、「通常のブロックに変換」オプションを選択します。

これで、他の再利用可能なブロックに影響を与えることなく、このインスタンスの特定のデザインのレイアウトを編集できます。

最終的な考え

再利用可能なDiviレイアウトブロックを作成すると、特にセクションディバイダーなどのDiviデザイン要素に役立ちます。 これにより、投稿全体で仕切りを繰り返し使用できます。 投稿を書くプロセスを合理化するだけでなく、サイト全体でブロックのデザインをはるかに簡単に更新する力も与えてくれます。 この投稿では、セクションディバイダーを再利用可能なブロックとして追加する方法を示しましたが、これと同じ手法を使用して、他の無数の理由で無限の再利用可能なDiviレイアウトブロックを作成できます。

再利用可能なDiviレイアウトブロックを自分のブログ投稿に組み込むための便利な方法を特定できますか？

コメントでお返事をお待ちしております。

乾杯！