ビジュアルエディタとテキストエディタの違いと切り替え方法
WordPressで記事を作成する時、本文の入力に使用されるのがエディタです。エディタではテキストを入力する以外にフォントや太字など書式も設定することができます。ここではWordPressで用意されているビジュアルエディタとテキストエディタについて簡単に使い方を解説すると同時に、2つのエディタを切り替える方法についても解説します。
ビジュアルエディタとは
新しい記事の作成画面で、画面中央に表示されているのが本文を入力する時に使用するエディタです。
ビジュアルエディタを使用する場合は、次のように画面上部に書式を設定するためのツールバー、その下に本文を入力するためのテキストエディタが表示されます。
ビジュアルエディタはいわゆるWYSIWYGエディタと呼ばれるもので、本文に設定した書式がそのままエディタ上で反映されます。例えば最初に次のようにテキストを入力してみます。
入力したテキストの一部を選択し、その後でツールバーに表示されている「B」のアイコンをクリックします。
選択していたテキストに「太字」の書式が設定されました。書式が設定されるとエディタ上でも「太字」で表示されます。
このように設定した書式が実際にどのように表示されるのかをエディタ上で確認しながら作業することができるのがビジュアルエディタです。
テキストエディタとは
テキストエディタを使用する場合は、次のように画面上部にHTMLのタグを設定するためのツールバー、その下に本文を入力するためのテキストエディタが表示されます。
テキストエディタでも書式を設定することができますが、書式はHTMLのタグを直接記載するかツールバー上のボタンをクリックしてタグを入力していきます。例えば最初に次のようなテキスト入力してみます。
入力したテキストの一部を選択し、その後でツールバーに表示されている「b」のアイコンをクリックします。
選択していたテキストに「太字」の書式が設定されました。ただビジュアルエディタと違い、書式が設定されてもHTMLのタグが表示されるだけで、記事を公開したあとで実際にどのように表示されるのかはエディタ上では確認できません。
テキストエディタではツールバー上のボタンにないものでも、直接HTMLタグを記述することが書式を設定できます。例えば次のように任意のタグを直接記述することができます。
ビジュアルエディたとテキストエディタを切り替えて使用する
ビジュアルエディタとテキストエディタで編集しているデータは同じなので、最初にビジュアルエディタで作成し始めて、途中でテキストエディタに切り替え、また戻すといった使い方ができます。エディタを切り替えるにはエディタの右上に表示されているタブをクリックして切り替えます。
「ビジュアル」タブをクリックするとビジュアルエディタ、「テキスト」タブをクリックするとテキストエディタに切り替わります。
では簡単な例でエディタを切り替えて使用する方法を試してみます。先ほどのサンプルと同じように最初にビジュアルエディタを使い、テキストを入力した後で一部のテキストを「太字」に設定します。
次にテキストエディタに切り替えます。エディタ右上に表示されている「テキスト」をクリックして下さい。
エディタがテキストエディタに切り替わります。テキストエディタに切り替わると、ビジュアルエディタで設定していた書式が、実際に使用されるHTMLタグを使って表示されます。
次にテキストエディタ上で一部のテキストに対してタグを直接記述します。
ビジュアルエディタに切り替えます。エディタ右上に表示されている「ビジュアル」をクリックして下さい。
テキストエディタで設定した書式がビジュアルエディタに切り替えることで実際にはどのように表示されるのか確認することができます。
このように2つのエディタはいつでも切り替えながら作業することができます。ビジュアルエディタは実際にどのように表示されるのか確認しながら作業できますし、テキストエディタの方はより細かな設定を直接記述することができます。2つのエディタをうまく使い分けながら記事を作成されて下さい。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。