ウィジェットマニュアル「テキストエディター」
複数行のテキストを入れるのに適したウィジェットです。最近のアップデートでカラム機能が追加されてますます便利になりました。無料版とプロ版の違いや他のプラグインを組み合わせる事で、Elementorの更新作業が楽々になる方法もご紹介致します。
【コンテンツ】（無料版・PRO版共通）
①テキストエディター
文章をここで編集します。太文字にしたり、テキストカラーなどの変更も可能です。ですが、後ほどご説明します「スタイル」でも見た目を設定する事が出来、エディターでの設定と混乱する事もしばしば・・・なので、できる限りスタイルからの設定をおすすめします。
②（テキスト入力欄）
ビジュアルとテキストの２種類の方法で文章を作成出来ます。エディターはHTMLコードに慣れているかたにおすすめです。
③先頭の文字を大きく
読んで字の如し！先頭の文字が大きくなります。海外のブログやニュースサイトで良く見かけるデザインですね。
↓
【コンテンツ】（無料版・PRO版共通）
PRO① ダイナミック
テキストエディターだけではないのですが、PRO版では他のコンテンツデータを読み込める機能「ダイナミック」機能があります。（詳しくは下記の記事をご参照下さい。）
ざっくり説明すると、ダイナミックをクリックすると、どのデータを読み込むかを設定出来ます。
【スタイル】（無料版・PRO版共通）
①スタイル＞配置
ウィジェットの範囲に対し、右寄せ・真ん中寄せ・左寄せ・全幅から設定出来ます。細かい調整は後ほど出てきますパディングを活用するとこだわりの行合わせも可能かもしれません。
②スタイル＞文字色
カラーパレットで好き色の所を選択するか、または、#で始まるHTMLのカラーコードを入力する事で入力した文章の文字色を変更する事が出来ます。また、透明度もスライダーで設定する事が出来ます。
③スタイル＞書体
・フォント：フォントを選ぶ事が出来ます。無料版・PRO版ともに英数字フォントしか選択出来ません。自分の好きなフォントや日本語フォントを使う為にはPRO版のカスタムフォント機能が必要です）
・サイズ：文字のサイズを設定出来ます。
（スマホ、タブレットデザインによって設定を変えられます）
・太さ：文字の太さを選択出来ます。
（フォントによっては変化しない太さもあります）
・変換：アルファベットのみ有効みたいです。
・スタイル：文字を斜傾させたり、イタリックにしたい出来ます。
（フォントによっては変更しない場合もあり）
・装飾：下線や取り消し線などが設定出来ます。
・行の高さ：複数行の場合であれば行間を設定出来ます。
（１行の場合は余白が変化します）
・字間：文字の幅を調節出来ます。※何故か今は出来ません。
④スタイル＞カラム
Elementor自体のカラムと同じ言葉なので、区別するよう注意しましょう。この場合はテキストエディターウィジェット内の文章に対するカラムを意味します。
カラム設定（デフォルトの場合）
カラム設定（４カラム）
雑誌やニュースなどの文章中心のコンテンツの時はすっきりして読みやすくなるかも。ちなみに⑤のカラムの隙間は調節可能です！
⑤カラムの隙間
④で複数のカラムを設定した場合に調節可能になります。スライダでは最大200pxまで、手入力だと許される限り入ります。
【詳 細】（無料版・PRO版共通）
①詳細
マージン・パディング・Z-index・CSS ID・CSS クラスが設定出来ます。（CSS関連はここでは割愛させて頂きます）
＜そもそもマージンとパディングって何？＞
例えば、写真や文章（ウィジェット）に対し、赤い線画＝枠線を境とした外側の余白と内側の余白をそれぞれマージンとパディングと言います。
例えばマージンを上下左右に100px余白を設定しみると・・・
緑の部分（＝つまりはウィジェットの外側）が100px余白が出来ました。次にパディングを上下左右100px世世余白を設定してみると・・・
今度は黒の部分（＝つまりはウィジェット内側）が100px余白が出来ます。マージンとパディングはデザインに大きく影響しますので、慣れておく事をおすすめします。また、このマージンとパディングはスマートフォンデザイン、タブレットデザインと個々に設定が可能です。
＜Z-Indexの解説＞
ウィジェットなどの表示の優先順位を設定する項目です。
例えば、上の図の様に、Z-indexが１と２に設定された２つのウィジェットがあるとします。これをマージンなどで調整して重ねた場合どの様になるかみてみましょう。
Z-indexが大きい２のウィジェットが上に表示されました。０が一番下になり、設定数字の大きい順に手前に表示されます。ちなみに初期値は空欄となっており、この場合、下にあるウィジェットが上になるようです。サイト制作の上でレイヤー感は見栄えが良くなると思いますので、マージンやパディングと合わせて慣れておくと良いかもしれません！
②詳細＞Motion Effect（一部PRO版のみあり）
ウィジェット（テキストや画像）が表示される際にアニメーション（動き）を付ける事が出来ます。また、PRO版ではスクロールに合わせて動きをつけられる「Scrolling Effects」とポインタ（マウス）の動きに合わせて動きをつけられる「Mouse Effects」が設定出来ます。
下記はアニメーションを選択すると表示される項目です。
・アニメーションの継続時間：動きの時間を「遅い」「普通」「速い」の３段階で設定出来ます。
・アニメーションの遅延 (ms)：動きの開始時間を遅らせる事が出来ます。単位がms＝1000分の1秒で設定出来ます。ちなみに1000msは1秒なので、60000msは1分となります。さすがに1分はスルーされますね・・・（汗）
③背景
＜普通・ホバー＞
「普通」は画面に表示する際の背景に対し、「ホバー」はカーソルがそのウィジェット範囲に入った時（カーソルがのっている状態）の背景となり、それぞれ背景を設定する事が出来ます。例えば、ボタンなどで良く見かけるのですが、マウスをボタンに乗せると色が変わったりするやつを想像して下さい。
＜クラシック＞
単色カラーの背景、または画像を設定出来ます。
・色：カラーパレットまたはHTMLカラーコードなどを使用して色を設定出来ます。また、透明度もスライダーで調節する事が出来ます。
・画像：画像を背景に指定する事が出来ます。ただし、画像を設定した場合は、色の設定は無効となります。
・位置：（画像を選択すると設定出来る項目）どこを起点に背景を設置するかを指定出来ます。
・添付：「デフォルト」「スクロール」「固定」の３種から選べます。
※スクロール（視差効果）はそのままでは機能しないみたいです。
※固定はデスクトップ上でのみ動作します。
・繰り返し：背景画像を連続して表示するか、しないかを選択出来ます。
・サイズ：背景画像の全体が見える様に縮小して配置するか、拡大して背景対象範囲をカバーするかなど設定出来ます。
＜グラデーション＞
２色を使ったグラデーション背景を設定出来ます。
・色：１色目の色を設定出来ます。
・場所：１色目の範囲割合を設定します。
・２つ目の色：２色目の色を設定出来ます。
・場所：２色目の範囲割合を設定します。
・タイプ：「線状」と「放射状」を選択出来ます。
（線状の場合）境界線の角度が設定出来ます。
（放射状の場合）放射の中心点の位置を選択する事が出来ます。
④ボーダー
ウィジェットエリアに枠線を付ける事が出来ます。
＜普通・ホバー＞
カーソルがウィジェット範囲に入ると枠線のデザインを変える事が出来る「ホバー」（普通）通常表示時の枠線設定に対し、（ホバー）カーソルがウィジェット範囲に入った場合、枠線のデザインが変わります。
＜ボーダータイプ＞
枠線のタイプを選べます。二重線や破線などがあります。
※以下は、ボーダータイプを選択した時のみ項目が表示されます。
・幅：枠線の太さを上下左右の枠線ごとに設定する事が出来ます。
・色：枠線の色を設定出来ます。
・ボーダーの丸み：枠の角を上下左右ごとに丸くする事が出来ます。
＜ボックスシャドー＞
ウィジェット領域に対し、影を付ける事が出来ます。注意：テキストだけに影をつけたい場合は、スタイルのテキストシャドウで設定します。この場合は、ウィジェット範囲全体に影がつきます。
⑤Custom positioning（カスタムポジショニング）
神機能として本ブログでも紹介しておりますので、下記の記事も是非ご覧下さい。
一言で言えば・・・好きなアイテム（ウィジェット）を好きな場所に設置できる機能です。ビルダー系のプラグインや、WordPress以外の簡単ホームページ作成ツールでも見かけない機能です。この機能だけでもElementorを選ぶ価値はあります！
⑥レスポンシブ
ウィジェットを閲覧デバイス（デスクトップ、タブレット、モバイル）ごとに表示するか非表示にするかを設定出来ます。注意：編集モードの際には適用されません。確認する際はプレビューモードなどで確認しましょう。
ちなみに、上の設定の場合、モバイルでの閲覧時にのみ、このウィジェットが表示され、デスクトップやタブレットで見た場合は表示されません。
⑦カスタムCSS ※PRO版のみ
CSSコードを追加する事が出来ます。その際、詳細の５と６を使うと安易に適応範囲の指定が出来ます。
テキストエディターをより便利にしてくれるプラグイン
WordPressで記事などを書くかたにはど定番の「TinyMCE Advanced」です。デフォルトのWordPressのテキストエディターツールはシンプルでかゆいところに手が届かない感じです。このプラグインを使う事で、テキストの表現の幅が広がり、より豊かな文章作成が可能です！
また、Elementor上でも使えるので、おすすめです。
上の画像は、Elementorのテキストエディターの編集画面です。個人的にはテーブル（表）作成機能が最高っす！
まとめ
カラム機能の追加により、長文コンテンツはスッキリ見せる事が出来、閲覧ユーザーも読みやすくなると思います。
続々とウィジェットマニュアルを追加したいと思いますので、次回もお楽しみにしてくれたら嬉しいです！
