Elementor AIが登場!使い方を徹底解説!

ChatGPTをはじめ最近話題の生成系AIですが、ElementorにもElementor AIが実装されました!
Elementor AIの機能ではテキストの自動生成はもちろん、CSSも自動で生成してくれますよ!

この記事では実際にテキストやCSSを自動で生成する方法を紹介します。

※Elementor AIは、Elementor 3.13.0以上から利用できる機能です。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Elementor AIを起動

Elementor AIの機能を使用するには、利用条件に同意する必要があります。

まずは、Elementorの編集画面からテキストエディターのところにある『Write with AI』をクリックします。

Write with AIを選択しElementor AIを使う

次のような画面が表示されるのでチェックボックスにチェックを付け、『始めてみよう』ボタンをクリックして進みます。

チェックボックスにチェックを入れ、始めてみようボタンをクリックしElementor AIを始める

すると、プロンプト入力画面が表示され、無事Elementor AIが起動しました!

Elementor AIのWrite with AIのテキスト入力画面

テキストの自動生成方法

Elementor AIにテキストを自動生成してもらいましょう!

まずはプロンプト入力画面で、生成してもらいたいテキストの条件を指定し『Generate text』ボタンをクリックします。

条件に文字数を指定すると、その文字数で要約してくれるのでおすすめ!

Elementor AIのWrite with AIにテキストを入力しGenerate textボタンをクリック

先ほど指定した条件でElementor AIがテキストを自動生成してくれるので、内容を確認し『Use text』ボタンをクリックします。

Elementor AIにより自動でテキストが生成されたのでUse textボタンをクリック

すると、自動生成されたテキストがElementorの編集画面にも反映されました!

Elementor AIにより自動で生成されたテキストが反映

とっても簡単ですね!

生成されたテキストの長さを自動変換

先ほど自動生成されたテキストを、Elementor AIに長くさせたり短くさせる方法を紹介します。

まずは、テキストエディターの『Write with AI』をクリックします。

テキストエディターの『Write with AI』をクリック

プロンプトの入力画面が開き、先ほど自動生成したテキストが下の画像のように表示されます。
まずはテキストを長くするため『Make it longer』のボタンをクリックします。

※テキストの中に <br><br>1 など、HTMLのタグが表示されていますが気にしなくて大丈夫です。

テキストを長くするため『Make it longer』のボタンをクリック

数秒程で先ほどより長いテキストが自動で生成されました!さらに詳しく説明されていますね。

数秒程で先ほどより長いテキストが自動で生成されます

では続いて、Elementor AIに長くしてもらったテキストを今度は逆に短くまとめてもらいましょう。
やり方は簡単!『Make it shorter』のボタンをクリックするだけです。

Elementor AIに文章を短くしてもらうため『Make it shorter』のボタンをクリック

こちらもほんの数秒でテキストが短くまとまりました!

Elementor AIに文章を短くしてもらうため『Make it shorter』機能を使った結果

とっても簡単なので、みなさんも試してみてください!

文章のトーンを変える機能は日本語がサポートされていない

自動生成された文章をカジュアルな文やフォーマルな文にしたい場合も、Elementor AIが自動で変換してくれるのでその方法を紹介します。
ただし、この機能はまだ日本語がサポートされておりません。

プロンプト入力画面の下部に『Change tone』というところがあるのでそこをクリックします。

Elementor AIのプロンプト入力画面の下部に『Change tone』というところがあるのでそこをクリック

すると、『Formal』や『Friendly』などの選択枠が表示されます。
今回はカジュアルな文章にしてもらいたいので『Casual』を選択してみます。

Elementor AIにカジュアルな文章にしてもらいたいので『Casual』を選択

カジュアルに変換されましたが、英語表記になっていますね。

Elementor AIによってカジュアルに変換されましたが、英語表記になっています

この機能は、現時点でまだ日本語対応はしていません。

自動翻訳する方法

Elementor AIには言語を自動翻訳する機能も備えられていますので紹介します。

※自動翻訳はしてくれますが思った結果がでない場合もあるので、翻訳された内容は必ず確認してください。

まずは、『Change tone』の隣にある『Translate to』をクリックします。

Elementor AIには言語を自動翻訳する機能も備えられていますので紹介

たくさんの言語が表示されるので『Japanese』を選択します。

Elementor AIには言語を自動翻訳する機能でJapaneseを選択

そうすると、先ほど英語で表示されたテキストが日本語に翻訳されました。

Elementor AIには言語を自動翻訳する機能を使った結果

この機能を使う場合は、思っていたような日本語訳になっているか必ず確認してくださいね。

CSSの自動生成方法

今度は、条件を指定してElementor AIにCSSを生成させる方法を紹介します。

まず、テキストエディターの『高度な設定』をクリックします。

Elementor AIにCSSを生成させるため高度な設定を選択

次に、カスタムCSSの『Code with AI』を選択し、Elementor AIに生成してもらいたいCSSの条件を入力後『Generate code』をクリックします。

  1. カスタム CSSを選択
  2. Code with AIをクリック
  3. CSSの条件を指定
  4. Generate codeをクリック
高度な設定からカスタムCSSのCode with AIを選択し、テキストを入力後Generate codeボタンをクリック

先ほど指定した条件のCSSが、Elementor AIによって自動生成されました!
そのまま『挿入』ボタンをクリックしましょう。

入力したテキストからElementor AIが自動でCSSを生成してくれたので挿入ボタンをクリック

すると、カスタムCSSに先ほど自動生成されたCSSが反映されましたね!

Elementor AIにより自動で生成されたCSSが反映されテキストが90度に回転されています

ホバーしたときもテキストが90度回転されているのが確認できますね。すごく簡単です!

まとめ

本記事では、Webサイト制作を効率化する最新のAIツール「Elementor AI」についてご紹介しました。

テキストの自動生成だけでなくCSSも簡単に生成してくれるので、記述に自信がないユーザーにとって心強い機能ですね!
使い方は非常にシンプルなので、ぜひ試してください。

Elementor AIは記事だけでなく、画像も自動で生成してくれます。
しかも、簡単に色々な画像が作れるだけでなく、余白の自動生成やリサイズなども簡単にカスタマイズできます!

詳しくはElementorの画像生成AIの使い方の記事を見てください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通