グーテンベルクの投稿にDiviスタイルの画像を追加するための再利用可能な画像レイアウトブロックを構築する方法

ディビのレイアウトブロックは、グーテンベルクのブログ投稿にディビスタイルの画像を追加するための再利用可能な画像レイアウトブロックとして使用できます。 これは、Diviの強力なデザインオプションと機能（美しい画像を作成するため）と、グーテンベルクで投稿を書く（およびブロックを追加する）便利さを兼ね備えています。

このチュートリアルでは、Divi LayoutBlockを使用していくつかの見事な画像レイアウトを設計する方法を示します。 次に、これらのレイアウトをグーテンベルクで再利用可能なブロックとして追加します。 この手法を使用すると、ほぼすべてのDiviデザイン機能（背景、ライトボックス、フィルター、アニメーション、スクロール効果など）を画像に追加できます。 次に、その素晴らしいデザインを、グーテンベルクで作成された将来の投稿に画像を追加するための便利な画像テンプレートとして使用できます。

始めましょう！

スニークピーク

再利用可能な画像レイアウトブロックを無料でダウンロード

このチュートリアルのレイアウトブロックを手に入れるには、まず下のボタンを使用してレイアウトブロックをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

ダウンロードを使用してこれらのレイアウトブロックをサイトにインポートする方法

これらの再利用可能なDivi画像レイアウトブロックをサイトにインポートするには、まず、ダウンロードファイルを解凍する必要があります。 そこに、サイトにインポートする必要がある3つのJSONファイルがあります。

デフォルトのエディター（Gutenberg）を使用して投稿を編集します。 ページの右上にある[その他のツールとオプション]メニューを開き、[すべての再利用可能なブロックを管理する]を選択します。

次に、[JSONからインポート]ボタンをクリックします。 ダウンロードフォルダからJSONファイルの1つを選択し、インポートボタンをクリックします。

このプロセスを繰り返して、3つのJSONファイルすべてをインポートします。

完了したら、グーテンベルク内に新しいブロックを追加します。 インポートされた再利用可能なレイアウトブロックは、[再利用可能]オプションの切り替えで見つけることができます。 投稿に追加したいものをクリックするだけです。

それでおしまい！

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しい投稿を作成し、デフォルトのエディター（Gutenberg）を使用して、いくつかのモックコンテンツ（タイトル、見出し、段落、注目の画像など）を追加します。 基本的に、Diviスタイルの画像レイアウトブロックを構築するためのテストポストが必要です。

その後、開始する準備が整いました。

パート1：キャプション再利用可能なDiviレイアウトブロックを使用した全幅画像の作成

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

まず、投稿にDivi LayoutBlockを追加します。

次に、「新しいレイアウトの作成」をクリックします。

Divi画像レイアウトの設計

レイアウトブロックエディタで、1列の行を追加してレイアウトの設計を開始します。

画像モジュール

行に画像モジュールを追加します。

次に、次のように設定を更新します。

• ライトボックスで開く：はい

これにより、クリックすると画像がライトボックスに表示されます。

• 画像オーバーレイ：オン
• オーバーレイアイコンの色：#ffffff
• ホバーオーバーレイカラー：rgba（120,47,130,0.57）

画像の周囲にスペースを作成するには、次のように行設定を更新します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：90％
• 最大幅：90％
• パディング：上5％、下5％

これにより、画像の周囲の間隔が5％になります。 これは、セクションに追加する背景のグラデーションを表示するスペースにもなります。

セクション設定を開き、次のように背景のグラデーションでデザインを更新します。

• グラデーションの背景左の色：＃782f82
• グラデーションの背景の正しい色：＃fe756b
• グラデーション方向：90度

画像をブログ投稿コンテンツコンテナを少し超えて拡張するために、次のようにセクションにカスタム幅を指定できます。

• 幅：110％
• 最大幅：100％
• マージン：残り-5％
• パディング：0px上、0px下

最後に、次のように内側のボックスシャドウを追加して、セクションにクリエイティブなタッチを加えます。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウの水平位置：5vw
• ボックスシャドウの垂直位置：5vw
• 影の色：rgba（255,255,255,0.7）

キャプションのない画像レイアウトが必要な場合は、ここで停止できますが、画像レイアウトにキャプションを追加するには、画像の下にテキストモジュールを追加します。

次に、キャプションテキストとして機能するフィラーコンテンツを追加します。

次に、次のテキスト設定を更新します。

• テキストフォント：Montserrat
• テキストフォントの太さ：半太字
• テキストテキストの色：#ffffff
• 幅：80％
• モジュールの配置：右
• マージン：5％トップ

終了したら、Ctrl + Sでレイアウトを保存するか、下部の設定バーを開いて[保存して終了]をクリックしてください。

再利用可能なブロックへの画像レイアウトの追加

再利用可能なブロックにレイアウトを追加するには、ブロックの上にある[その他のオプション]メニューをクリックし、[再利用可能なブロックに追加]を選択します。

再利用可能なブロックに名前を付けて、「保存」をクリックします。

これで、キャプションレイアウト付きの全幅画像が再利用可能なブロックに追加され、投稿を作成するときにブロックリストから利用できるようになります。

変更を保存するには、投稿を更新/保存することを忘れないでください。

パート2：キャプション再利用可能なDiviレイアウトブロックを使用して左の画像を作成する

これで、キャプションレイアウト付きの全幅画像が再利用可能なブロックに追加されました。そのブロックを使用して、キャプションレイアウト付きの左側の画像を作成できます。

再利用可能なブロックを通常のブロックに変換する

開始するには、全幅の画像レイアウトを含む再利用可能なブロックの上部にある[その他のオプション]メニューを開きます。 次に、「通常のブロックに変換」を選択します。

心配しないでください。これにより、作成したばかりのレイアウトブロックが再利用可能なブロックから削除されることはありません（ただし、そのためのオプションがあります）。 これにより、再利用可能なブロックが通常のブロックになり、単一のインスタンスのブロックを編集して使用できるようになります。

レイアウトの更新

ブロックが正常になったら、ブロックの上にある[レイアウトの編集]ボタンをクリックします。

レイアウトエディタで、セクション設定を開き、次のように幅を更新します。

• 幅：自動
• 最大幅：500px

レイアウトエディタ内で行う必要があるのはこれだけです。 必ずレイアウトを保存して終了してください。

ブロックを選択した状態で、メイン設定サイドバーを開き、ブロックタブを選択してブロック設定を表示します。 詳細トグルの下に、次のクラスを追加します。

• 追加のCSSクラス：alignleft

このクラスはWordPressにネイティブであり、ブロックを左側にフロートさせます。これにより、投稿内のコンテンツの左側にも画像がフロートします。

クラスが追加されたら、ブロックの[その他のオプション]メニューを開き、[再利用可能なブロックに追加]をクリックします。

再利用可能なブロックに名前を付け（つまり、「キャプション付きの左の画像」）、[保存]をクリックします。

これで、簡単にアクセスできるように、Left Image withCaptionレイアウトブロックが再利用可能なブロックのリストに追加されました。

パート3：「キャプション付きの正しい画像」の再利用可能なDiviレイアウトブロックの作成

これまでのところ、キャプションレイアウトブロックを含む全幅の画像と、キャプションレイアウトブロックを含む左の画像があります。 これで、キャプションレイアウトブロックを使用して適切な画像を追加できます。

再利用可能なブロックを通常のブロックに変換する

これを行うには、キャプションの再利用可能なブロックを含む左側の画像の[その他のオプション]メニューを開きます。 次に、「通常のブロックに変換」を選択します。

レイアウトの更新

ブロックが通常のレイアウトブロックになったら、クリックしてレイアウトを編集します。

次に、セクション設定を開き、左マージンを取り出します。

レイアウトエディタを保存して終了します。

次に、ブロックの追加のCSSクラスを次のように更新します。

• 追加のCSSクラス：alignright

クラスが追加されたら、レイアウトブロックを再利用可能なブロックに追加します。

そして、再利用可能なブロックに名前を付けて（つまり、「キャプション付きの右の画像」）、保存します。

次に、投稿のブロックの下にある青いプラスアイコンの1つをクリックして、新しいブロックを追加します。 次に、ブロックリストポップアップで、再利用可能トグルを開きます。 これで、3つの再利用可能な画像レイアウトブロックを使用する準備が整いました。

パート4：投稿での再利用可能な画像レイアウトブロックの使用。

画像レイアウトブロックを作成しましたが、これらは（私たちの目的のために）投稿に画像を追加するプロセスをジャンプスタートするためのテンプレートとしてのみ存在します。 したがって、これらのレイアウトブロックを使用して実際の画像を投稿に追加するたびに、画像とキャプションをレイアウトに追加する前に、まずそれを通常のブロックに変換する必要があります。

これがその方法です。

ステップ1：再利用可能なレイアウトブロックを追加する

再利用可能なDivi画像レイアウトブロックの1つを投稿に追加します。

ステップ2：通常のブロックに変換する

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

ステップ3：新しい画像とキャプションでレイアウトブロックを編集する

ブロックが規則的になったら、クリックしてレイアウトを編集します。

選択した画像でレイアウトを更新します。

次に、テキストモジュール内のキャプションテキストを更新します。

ステップ4：レイアウトブロックを保存する

終了したら、レイアウトエディタを保存して終了します。

この同じプロセスを続けて、他の2つの画像レイアウトを投稿に追加します。

最終結果

最終的な考え

Diviレイアウトブロックを使用するコツをつかむと、ブログの生活にとってどれほど価値があるかが明らかになります。 この投稿では、レイアウトブロックを使用して、グーテンベルクのブログ投稿にかなりクールなDiviスタイルの画像を追加する方法について説明しました。 秘訣は、最初にレイアウトを再利用可能なブロックとして保存することです。 次に、ブログ投稿に画像を追加する準備ができたら、再利用可能なブロックを通常のブロックに簡単に変換して、画像とキャプションを追加できます。

うまくいけば、これはあなたのブログ画像をまったく新しいレベルに引き上げるためのいくつかのインスピレーションを提供するでしょう。

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

乾杯！