Gutenberg および Kadence ブロック用の AI 画像ジェネレーター!

人工知能 (AI) を使用して、Gutenberg としても知られる WordPress ブロック エディターで画像を生成する AI Image Lab が簡単になり、AI Image Lab 1.0.3 アップデートとより統合されました。これにより、 AI を作成するために作成された Gutenberg ブロックが導入されます。画像生成はコンテンツ作成プロセスのシームレスな部分です。 AI 画像ブロックは、ユーザーが別のウィンドウやメディア ライブラリのオーバーレイを使用して外部で最適な画像を選択するのではなく、 WordPress ページまたは他のコンテンツ内に直接投稿するために AI が生成した幅広いカスタム画像を迅速に生成できるように設計されています。周囲の要素のコンテキスト。 完璧な画像が見つかって選択されると、 AI 画像ブロックは、追加のスタイルとレイアウトのオプションを提供する多数のコア Gutenberg ブロックまたは Kadence ブロックの 1 つに簡単に変換できます。

簡単なチュートリアル

Gutenberg の AI 画像ブロックで何ができるかを示すには、例を使用するより良い方法はありません。 Kadence Blocks プラグインのブロックを使用しますが、コア Gutenberg ブロックを使用する場合もプロセスは同じです。

この例では、架空の不動産会社の基本的なホームページ レイアウトを作成します。 ページ構造には、テキスト オーバーレイを備えたトップ バナーと、その後に画像とテキストを含む 2 列の行が含まれます。

バナーを作成するには、まずページの上部にAI 画像ブロックを挿入します。 ツールバーから、配置設定を「全幅」に変更します。 ブロック設定サイドバーで、アスペクト比を「カスタム サイズ」に変更し、幅 2048 (現在の最大値) と高さ 600 を入力します。 (これは、AI Image Lab Pro を使用していることを前提としています。無料版は768です。）

次に、ブロック内に表示されているテキストボックスに、画像の説明的なプロンプトテキストを入力します。 「近所」という一言だけを試してみましょう。 次に、[画像の生成] ボタンをクリックし、ブロックに画像が設定されるのを待ちます。 画像の幅が非常に広いため、プレビュー画像は HD モードの最終画像よりも低い解像度でレンダリングされるため、多少ぼやける可能性があります。

AI 画像ブロック ツールバーの矢印を使用して、プレビュー画像間を移動できるようになりました。 一連のプレビュー画像の終わりに近づくと、新しいセットが自動的に生成されるため、多数のプレビュー画像を素早く閲覧している場合は、多少の遅延が発生する可能性があります。 いつでも、ブロック ツールバーの編集ボタンをクリックしてプロンプト テキストを変更できます。 ブロック設定サイドバーで変更を加えると、新しい画像セットの生成もトリガーされます。 使用したい画像が見つかったら、ツールバーのチェックマーク アイコンをクリックします。これにより、フル解像度の画像がサイトにダウンロードされ、ブロック内に表示される低解像度のプレビューが置き換えられます。 高解像度を選択したため、このプロセスには少し時間がかかる場合があります。

この例で使用している画像は次のとおりです。

この画像にテキストをオーバーレイし、その他のスタイル変更も加えたいため、AI 画像ブロックをニーズにより適した別のブロックに変換する必要があります。 この場合、Kadence Blocks の Row Layout ブロックを使用します。 ブロック ツールバーの左端にある AI Image アイコンをクリックし、「Transform To」の下の Row Layout を選択するだけです (Kadence Blocks プラグインがアクティブであると仮定します)。 プロンプトが表示されたら、行に単一列のレイアウトを選択します。

この時点で、行レイアウト ブロックの配置を全幅にリセットする必要がある場合があります。 また、上部と下部のパディングを 3XL に設定し、ブロック設定サイドバーの [スタイル] タブにある [背景オーバーレイ設定] に切り替えて、不透明度 60% の黒いオーバーレイを有効にして、画像間のコントラストを高めます。テキストと背景画像。 次に、行に「Text (Adv)」ブロックを挿入し、テキストの色を白、配置を中央、HTML タグを「H1」、行の高さを 2 に設定します。次に、テキストを追加します。非常に基本的な例として、次のような結果が得られます。

バナーの下の 2 列の行には、今度は 2 列のレイアウトで別の Row Layout ブロックを挿入します。 各列にAI 画像ブロックを挿入し、各ブロックのアスペクト比を「3:2 (横)」に設定します (この例では、ピクセル寸法をデフォルトのままにしていますが、運用環境では調整する必要があるかもしれません)生成される画像ファイルのサイズも小さくなります)。 左側の列には画像プロンプト テキスト「アパートの建物」を使用し、右側の列には単に「家」を使用します。 以下は、アップロードして AI 画像ブロックを変換する前の画像プレビューです。

次に、各 AI 画像ブロックのツールバーにあるチェックマーク ボタンをクリックして画像をアップロードします。アップロードが完了したら、ツールバーの左側にある AI 画像ブロック アイコンをクリックして、各画像を情報に変換するオプションを選択します。 Kadence Blocksのボックスブロック。 テキストを追加すると、ページは次のようになります。

結論

AI Image Lab プラグインは、WordPress メディア ライブラリおよびメディア ピッカーとの統合のおかげで、最初のベータ リリース以来、Gutenberg とほぼ互換性がありますが、AI Image ブロックは、ユーザーが作成、プレビュー、 AI で生成された画像を、使用されるコンテキスト内で直接アップロードできるため、周囲のコンテンツとうまく調和する画像を選択し、適切なアスペクト比を見つけて、完成品を視覚化することが容易になります。 Kadence Blocks プラグインとの互換性 (オプション) が組み込まれているAI Image Lab は、Gutenberg コンテンツ クリエイターが素晴らしいブロックベースのビジュアルを作成できるように設計された強力なツールです。

AI Image Lab は無料で使用できますが、24 時間ごとにサイトにアップロードできる画像の数、それらの画像の解像度などにいくつかの制限があります。高品質の画像を作成するためのさらに強力な機能については、 AIイメージラボプロプラン！