WordPressプラグインであるBeaver Builder（ビーバービルダー）は難しいコードや知識を必要とせず
ドラッグアンドドロップで直感的にサイト制作を行うことが出来ます。

サイトを制作するにあたって、「テキストエディター」モジュールはとても多く使われるモジュールです。

今回は「テキストエディター」モジュールの編集方法について、分かりやすく解説していきたいと思います。

※本記事は既に編集画面を開いた状態からの説明ととなっております。
　Beaver Builder編集画面の開き方についてはこちらの記事よりご参照ください。

Beaver Builder（ビーバービルダー）の基本操作について分かりやすく解説


テキスト編集 – 完成状態

1.実際に、編集操作を行い、掲載画像のようなテキストに仕上げていくのでそこまでの過程について
　説明していきます。


テキストの編集方法

1.まずは、固定ページよりビーバービルダー編集画面を開き、掲載動画のようにテキストエディタモジュールを
　ドラックアンドドロップで入れ込んでいきます。

※ビーバービルダーの編集画面の開き方についてはこちらをご覧ください

Beaver Builder（ビーバービルダー）の基本操作について分かりやすく解説



2.ドラックアンドドロップすると画像のようなウィンドウが表示されるかと思います。
　このテキストエディタのウィンドウから文字を入力していくことでサイトに反映することが出来ます。

　キャンセルボタンをクリックすることでこれまでの編集を取り消すことができます。
　文字の入力、テキストのデザインを保存したい場合は、保存ボタンをクリックしてください。



【テキストのスタイル編集 – フォント】

1.テキストの色の変更、大きさなどを変えるにはウィンドウのスタイルタブを「スタイル」に変更します。



2.参考までに文字を赤色に変更してみたいと思います。
　カラーピッカーのつまみを動かすことでスムーズに色を変えられることが出来ます。



3.テキストの大きさを変更するには「サイズ」の欄から数字を指定して変更します。
　画像のように一覧から各単位を選ぶことが出来ますが、基本、px（ピクセル）を選択してください。



4.テキストのフォントを変更するには「Family」部分クリックすることで、一覧表示より
　選択することが出来ます。
　今回は「Zen Maru Gothic」を選択します。



5.テキストの太さを変更するには「Weight」部分クリックすることで、一覧表示より
　選択することが出来ます。
　今回は「Ultra-Bold」を選択します。



6.テキストの行間を変更するには「行間」の欄から数字を指定して変更します。
　画像のように一覧から各単位を選ぶことが出来ますが、基本、px（ピクセル）を選択してください。



7.テキストの配置を変更するには「配置」の欄から指定して変更します。
　今回は「中央配置」を選択します。



【テキストのスタイル編集 – Style & Spacing】

1.テキストのスペースを変更するには「スペース」の欄から数字を指定して変更します。



2.テキストに装飾を加える場合には「Decoration」の欄から適切な指定をして変更します。
　今回は「Underline（下線）」を指定します。



3.今回は設定をしませんが、「Transform」、「Variant」といった英文に対してスタイルを変更できる
　設定項目があります。



【テキストのスタイル編集 – テキスト影】

テキストに影効果を加える場合には「テキスト影」より適切な指定をして変更します。
今回は影の色を黒、X軸（横の位）、Y軸（縦の位置）、Blur（ぼかし）をそれぞれ５に指定します。

ここまでの作業で完成状態と同じテキストデザインが出来上がったので、これまでの作業を残す為に
「保存」ボタンをクリックしてください。



【完成形】

ここまでの作業で最初に掲載していた画像のようなテキストスタイルが完成したと思います。
スタイルの幅は、まだまだあるのでご自身でも触って確認してみてください。

※最終的にサイトを保存する時は、「終了」ボタンからの「Publish」、「下書きを保存」ボタンを
　押すことを忘れずに行なってください。


まとめ

ビーバービルダーを使用したテキストの編集方法についてこのコラムでは説明してきました。

次回コラムにてビーバービルダーを使用した画像の編集方法について解説していきます。