Elementorの使い方2『コンテンツタブとスタイルタブ、テキストエディター編』【初心者】

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

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

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

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

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

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

Elementorのテキストエディターウィジェットのコンテントタブ
テキストエディターウィジェット
Elementorの画像ウィジェットのコンテントタブ
画像ウィジェット

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

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

Elementorの画像ボックスのコンテンツタブ
画像ボックス

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

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

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

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

Elementor Pro用のダイナミックコンテンツアイコン

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

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

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

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

Elementorのテキストエディターウィジェットの詳細1

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

HTMLで直接編集する

ElementorのテキストウィジェットでHTML編集

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

先頭文字を大きく

Elementorのテキストエディターで最初の文字を大きくする

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

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

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

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

書体

Elementorのテキストエディターの書体

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

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

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

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

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

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

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

Elementorテキストエディターでサイズ変換

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

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

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

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

Elementorでテキストを斜めにする

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

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

Elementorテキストエディターで文字列に線をいれる

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

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

Elementorのテキストエディターの行の高さ

『字間』は文字同士の幅

Elementorのテキストエディターウィジェットの文字の間のスペース

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

Elementorのテキストエディターでテキストをカラムで縦に割る
Elementorのテキストエディターでカラムを縦に割る

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

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

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

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

コメントする

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

Scroll to Top