Elementor – コンテンツタブとスタイルタブ – テキストエディター編【初心者】

前回の記事で、ウィジェットのドラッグ&ドロップでページを作っていくと言うElementorの基本的な使い方を説明しまいした。

今回はElementorのウィジェットの編集画面にある、コンテンツタブとスタイルタブについてテキストエディターウィジェットを使って説明します。
この記事を読めば、ウィジェットの基本の理解が深まりますよ。

詳細タブに関しては別の記事で詳しく説明します。
なぜなら、詳細タブは全てのウィジェットで共通だからです。

コンテンツタブとスタイルタブは、ウィジェットによって異なる

まず一つ重要なのが、これらのタブはウィジェットによって異なると言うことです。

テキストウィジェットと画像ウィジェットのコンテントタブです。
全然違いますよね。

ですが時に似たものもあるんです。

画像ボックスというウィジェットですが、画像ウィジェットとかなり似てますよね。
このように似てるウィジェットも沢山あります。
なので使っていくうちに、新しいウィジェットでも使い方がわかってきます。

なので多く使われる、『テキストエディターウィジェット』と『画像ウィジェット』のコンテンツとスタイルタブの使い方を説明していきます。
この２つをマスターすればElementorの他のウィジェットも簡単に使えるようになります。

始める前に一つ説明しておくことがあります。

パンケーキアイコンはPRO用のダイナミックコンテンツ

所々でこのアイコンが出てきますが、これは『ダイナミックコンテンツ』と呼ばれ、動的にサイトや記事のタイトルやロゴ、更には特定のCSSのスタイルなどをロードして使える機能です。ここで例えばサイトのタイトルをロードしたとすると、後にサイトのタイトルをアップデートするとこのウィジェットでもアップデートされるわけです。
とても役に立つ機能です。

Elementor Pro用の機能なので通常盤では使えません。応用編で説明します。
今は無視してください。

テキストエディターのコンテンツタブ

ではまず、多分一番使われているであろうウィジェットのテキストエディターの説明をします。

テキストエディタはーこの大きいテキストボックスと、文字を太くするボタンなどのそれを編集するためのツールで構成されています。
上の画像の矢印の部分をクリックすると、テキスト編集用のツールがさらに表示されます。

HTMLで直接編集する

ビジュアルではなく『テキスト』を選択すると、ツールのリストが消え直接HTMLを入力できるようになります。
HTMLで編集したい時はこちらを選択しましょう。

先頭文字を大きく

この設定が一番したにありますが、これは多分日本語だと使わない機能です。
書いてあるまま、先頭文字が大きくなります。

テキストエディターのスタイルタブ

配置や文字色などのテキストエディタの基本的な部分の説明は省略します。

書体

テキストの書体の設定画面です。
書体のところのペンのアイコンをクリックすると表示されます。

• フォント
• サイズ
• 太さ
• 変換
• スタイル
• 装飾
• 行の高さ
• 字間

これらの設定が可能です。

Googleフォントを選択するとフォントファイルがロードされる

文字のフォントを変えたい時はこのように多くのフォントから選べますが、Googleと書いてある部分のからフォントを選択すると、フォントのファイルがロードされるのでサイトが遅くなる原因です。なので必要最低限のフォントを使いましょう。

『サイズ』のところは今のところはpxかemでOK

px, em, rem, vwはそれぞれ違いがあるのですが、その違いを説明するだけで一つの記事になってしまうので、別な記事で説明します。
今はpxかemを使って文字のサイズを変換しましょう。

『変換』はアルファベットだけの機能なので無視する

変換という項目がありますが、これは日本語では関係ない項目なので無視します。

『スタイル』で文字を斜めにする

スタイルで出来ることは、文字列を斜めにすることです。
イタリックも斜体もどちらも同じです。

『装飾』で下線、上線、取り消し線をいれる

これはそのままです。選択した線が入ります。

『行の高さ』は行間の大きさ

『字間』は文字同士の幅

文字列をカラム機能で縦に分ける

このように設定することによって、テキストを三つに分けることが可能です。
設定の部分を3ではなく別な数にすればテキストはその数の分だけ割けられます。

これでElementorのテキストエディターウィジェットのコンテンツタブとスタイルタブの概要はわかったのではないでしょうか。

次回は画像ウィジェットのコンテンツタブとスタイルタブについて説明します。

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