2021/09/02 (更新日: 2021/12/02)

【WordPress】ビジュアルエディタ・テキストエディタとは？違いや使い方を解説【クラシックエディタ】

※本ページにはプロモーションが含まれている場合があります。

こんな方におすすめです。

・WordPressのビジュアルエディターとテキストエディターって何？
・〇〇エディターが多すぎてよくわからない！
・ビジュアルエディターとテキストエディターの違いや使い分けを知りたい！
・使い方やさらに便利になるカスタマイズも知りたい！

本記事の内容

WordPressのビジュアルエディタとテキストエディタとは？
おすすめの使い分けと切り替え方法
ビジュアルエディタの使い方
テキストエディタの使い方
ビジュアルエディタ・テキストエディタをカスタマイズできる4つのプラグイン

本記事では、WordPressにおける

「ビジュアルエディタ」と「テキストエディタ」

の違いや使い分け方について詳しく解説します。

その前に、、、

・「ビジュアルエディタ」と「テキストエディタ」！？
・「クラシックエディタ」とか「ブロックエディタ」とかもなかった！？
・「なんとかエディタ」の種類が多くて何がなんだかわからない！！

という方も多いと思うので、

まずはWordPressのエディタの種類を解説して整理してから、「ビジュアルエディタ」と「テキストエディタ」の違いや使い分け・使い方について解説していきます。

以下の経歴と実績を持つなべたろ(@seonabe)が解説するよ♪

なべたろの実績

ライター100名以上の組織の法人を経営→株式譲渡
立ち上げから半年で月間1,000万PVを達成
1年で月間1200万PVを達成
年商約1億円を達成
法人向けコンサル1社あたり月額60~100万円
PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数

というわけで！

本記事を読むと、WordPrssの全てのエディタを整理しながら、ビジュアルエディタ・テキストエディタの違いや使い分けだけでなく、使い方やカスタマイズまでガッツリわかります。

この記事を読めばWordPressのエディタの理解は完璧！

＼　月間1300万PVのプロが解説　／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓

>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！

【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！ブログのSEO対策にも『抑えどころ』があります。検索順位1位を取りまくってブログを爆速で伸ばすためのSEOの基礎から『抑えどころ』まで約4万文字でプロが解説。読者にもGoogleにも評価されるSEO対策とブログ作りのノウハウがまる分かり。初心者から中級者まで学べるブログのSEO戦略の決定版。

WordPressのビジュアルエディタとテキストエディタとは？
ビジュアルエディタとテキストエディタの使い分けと切り替え方法
WordPressのビジュアルエディタの使い方
WordPressのテキストエディタの使い方
ビジュアルエディタ・テキストエディタをカスタマイズできるプラグイン
WordPressのビジュアルエディタとテキストエディタを使いこなそう！

WordPressのビジュアルエディタとテキストエディタとは？

WordPressのエディタは「クラシックエディタ」と「Gutenberg」の2種類

ビジュアルエディタとテキストエディタの前に、、、

そもそもWordPressのエディタには以下の2種類のエディタがあります。

Gutenberg(グーテンベルグ)
クラシックエディタ

え？ビジュアルエディタとテキストエディタは？？

順番に解説するから安心してね♪

これがGutenberg(グーテンベルグ)の画面です。

Gutenberg(グーテンベルグ)とは

2018年に登場した「WordPress5.0」以降のデフォルトのエディター。ブロック形式になっていることから「ブロックエディタ」とも呼ばれる。現在のWordPressのデフォルトは全てこのエディター。

これがクラシックエディタの画面です。

クラシックエディタとは

2018年以前、つまりGutenbergになる前のエディターのこと。「Classic Editor」というプラグインを使うことで、Gutenbergからクラシックエディタに切り替えることができる。

クラシックエディタやGutenbergの特徴や、プラグイン「Classic Editor」の導入方法については以下の記事で詳しく解説しています。
>> 【2021年】Classic Editorでクラシックエディターに戻す方法！Gutenbergとの違いとは？【WordPress】

クラシックエディタの中に「ビジュアルエディタ」と「テキストエディタ」がある

クラシックエディタとGutenbergの2種類があると書きましたが、

このクラシックエディタの中に「ビジュアルエディタ」と「テキストエディタ」の2つのエディタが入っています。

どういうこと？

「ビジュアルエディタ」と「テキストエディタ」の2つを合わせて「クラシックエディタ」と呼ぶんだ♪詳しく解説するね♪

クラシックエディタの画面を開くと、以下のようになります。

実はこれがビジュアルエディタの画面です。

そしてこのようにタブでエディタを切り替えると、

これがテキストエディタの画面です。

クラシックエディタでは、こんなふうにビジュアルエディタとテキストエディタの2つをうまく使い分けて記事を書いていくんだ♪

つまり整理すると以下ようになります。

Gutenberg

クラシックエディタ

ビジュアルエディタとテキストエディタはどうやって使っていけばいいの？

まずはそれぞれどんなエディタなのかを簡単に紹介するね♪

ビジュアルエディタ：ブログの見た目をイメージしやすい

まずはビジュアルエディタについて！

ビジュアルエディタはこのような画面になっており、ビジュアルという名前の通り、

実際のブログの画面をイメージしながら記事を書いたり文字装飾をすることができます。

例えば！

ビジュアルエディタの画面で、本文の一部を選択してから上の画像のボタンを押して、

色を選択すると、

ビジュアルエディタの画面上でもテキストの背景色が黄色に変わりました。

見た目がエディタ上でわかるから初心者でも使いやすい！

つまりビジュアルエディタは

エディタ上で文字装飾が確認できるのでわかりやすい
ブログ画面のレイアウトのイメージをしやすいのでわかりやすい

という感じです。

Microsoftの「Word」や「Googleドキュメント」みたいな感じ♪

memo

見た目がわかるのはGutenbergも同じですが、クラシックエディタの「ビジュアルエディタ」はとっても便利なカスタマイズができます。後ほど「エディタ・テキストエディタをカスタマイズできるプラグイン」の見出しで詳しく解説します。

テキストエディタ：HTMLコードで記事を書ける

次はテキストエディタ！

テキストエディタはこのような画面になっていて、HTMLタグで記事を書いていきます。

もちろん自分でタグを手入力する必要はなく、

テキストを選択してからボタンをクリックすることで、

ビジュアルエディタでの文字装飾と同じように、ボタンでタグを挿入することができます。

そうは言っても、

HTMLタグを理解していないとちんぷんかんぷん
ブログの見た目もイメージしづらい
画像すらHTMLタグ

というわけで結論、初心者はほぼ使わなくてもOKです。

ほぼ？

どうしてもテキストエディタを使わないといけない時もあるよ♪これから解説するね♪

⇡目次へ戻る

ビジュアルエディタとテキストエディタの使い分けと切り替え方法

使い分けの前に、エディタの切り替え方法だけ最初に抑えておこう！

エディタの切り替え方法

ビジュアルエディタとテキストエディタは、文字を入力する箇所の右上のこの部分のタブをクリックすることで簡単に切り替えることができます。

ビジュアルエディタの状態で「テキスト」をクリックすると、

テキストエディタに切り替わります。

逆に「ビジュアル」をクリックすると、

このようにビジュアルエディタに切り替わります。

簡単でわかりやすい！

それでは使い分けのポイントを紹介するよ♪

使い分け①基本的にはビジュアルエディタを使おう

まず、基本的にはビジュアルエディタをメインに使えばOKです。

記事を書く時も文字装飾をする時も含めて、9割以上は全てビジュアルエディタでOKです。

その理由は

文字装飾も見た目に反映されてわかりやすいから
HTMLタグや複雑なコードを理解しなくてもわかりやすいから

という理由です。

テキストエディタはこんなふうにコードが並んで初心者にはとってもわかりにくいですが、、、

ビジュアルエディタならとてもわかりやすいです。

memo

さらに、後ほど「エディタ・テキストエディタをカスタマイズできるプラグイン」で紹介するプラグインを使えば、ビジュアルエディタでワンクリックでテンプレートを呼び出したり、吹き出しやボックスのような装飾を呼び出すこともできます。

じゃあテキストエディタは一切使わなくて良いの？

ほんの少しだけ、テキストエディタが必要になる時があるよ！

使い分け②広告を貼ったりコードで埋め込むときはテキストエディタを使う

テキストエディタを使うべきタイミングはズバリ、以下のようにHTMLのコードを直接貼り付ける必要がある時です。

テキストエディタを使う必要がある場合

アドセンス広告やアフィリエイト広告のコードを貼り付ける
ツイートを埋め込む
YouTubeの動画をコードで埋め込む

などなど。

例えば以下のようにツイートを記事の中に埋め込んだり

／
ついに完成！🥳👏
＼
ブログ初心者のための
「SEO完全攻略ガイド」🥳🎉
✅必要な記事数が10分の1になる
✅今すぐできて効果的なSEO対策
✅初期から早く収益を出す戦略
40時間かけて作ったスライド資料61枚😆
スライド限定の特典🎁もご用意しています☺️
👇応募方法はリプから確認👇 pic.twitter.com/e9KhrNRHuR
— なべたろ🌞半年で1000万PV【SEO】 (@seonabe) January 9, 2021

以下の画像のようにアフィリエイト広告を埋め込みたい場合は、

実はこれらのツイートや広告は以下のような長いプログラムのコードで作成されており、コードをテキストエディタに直接貼り付ける必要があります。

(↑ツイートのコード)

(↑アフィリエイト広告のコード)

ビジュアルエディタで広告コードを貼り付けても、広告が表示されないから注意！

使い分けのまとめ

・記事を書いたり編集は基本的に全てビジュアルエディタを使えばOK
・広告やTwitterなどを埋め込む際はテキストエディタに切り替えてコードを貼り付ける

YouTubeやTwitterの埋め込みについては以下の記事で詳しく解説しています。
>> 【2021年】WordPressブログにYouTube動画を綺麗に埋め込む方法
 >> 【超簡単】WordPressにTwitterを埋め込む方法【ツイート・タイムライン】

使い分け③こんな人はテキストエディタがメインでもあり

使い分けの番外編ですが、

HTMLタグやそこに含まれるコードもある程度理解できる人は、テキストエディタをメインに使うのもおすすめです。

テキストエディタをメインにするとおすすめな理由

HTMLにclassなどを自由に追加したりして微調整できる
ビジュアルエディタでコピペをするとやや重いが、テキストエディタは動作がサクサク

なべたろはプログラミングをしていたのでテキストエディタをメインに使っているよ♪動作がサクサクなのがとっても快適！！

⇡目次へ戻る

WordPressのビジュアルエディタの使い方

ここからは、ビジュアルエディタとテキストエディタの使い方を順に解説します。

まずはビジュアルエディタから！

ビジュアルエディタについては、次の3つについて順番に解説します。

テキストの入力方法
画像の挿入方法
文字装飾のやり方

メインは「③の文字装飾のやり方」だよ♪①と②はさらっとだけ解説！

【Step1】テキストの入力方法

まずそもそもWebページは、画像や文章から見出しなど何から何まで

<p></p>

などのHTMLタグと呼ばれるもので構成されているのですが、

ビジュアルエディタではHTMLタグを一切使わなくても、ただ文章を入力するだけでOKです。

ビジュアルエディタで記事を作成する時には、自由にここに文章を書いていき、エディタの上のボタンを使って文字装飾していく、というのが基本です。

WordやGoogleドキュメントみたいな感覚でOK！！

【Step2】画像の挿入方法

画像を挿入するには、エディタの左上部分にある「メディアを追加」ボタンをクリックします。

WordPressに既にアップロード済みの画像から選択するか、あるいは新しく画像をアップロードして挿入することもできます。

【Step3】文字装飾のやり方

ここがビジュアルエディタの使い方のメインの解説！

①文字装飾ボタンの基本的な使い方

ビジュアルエディタで文字装飾をするには、エディタ上部の「ツールバー」と呼ばれる箇所にあるボタンを使って行います。

memo

デフォルトではボタンはもっと少ないですが、上記の画像ではTinyMCE Advancedでボタンを追加しています。
>> 【2021年最新】Advanced Editor Tools(旧：TinyMCE Advanced)の設定方法と使い方を画像で徹底解説【WordPressプラグイン】

例えば上記の箇所の色を変更したい場合は、

このように装飾をしたい部分を選択してから、装飾に使うボタンをクリックすればOKです。

するとこのように、文字装飾が適用されます。

とっても簡単！

ボタンはたくさんありますが、どのボタンも基本的には使い方は同じようなイメージです。

続けて具体例を3つ紹介するよ♪

例1：太字の使い方

太字にしたい場合は、太字にしたい箇所を選択してから「B」のボタンをクリックします。

ワンクリックで太字になります。

逆に太字を解除したい場合は、同じ箇所を選択してから再度「B」をクリックすればOKです。

ワンクリックで解除されます。

例2：見出しの使い方

見出しを使うには、見出しにするテキストを選択してから「段落」と書かれた箇所をクリックします。

いくつか項目が表示されるので、使いたい見出しをクリックします。

使いたい見出しをクリックしたら、このように見出しが適用されます。

プレビューを確認するとデザインも見出しになっています。

これで見出しは完成！

memo

見出しは「見出し1」から「見出し6」までありますが、基本的に「見出し2」から「見出し4」しか使いません。

見出しの使い方の基礎やSEOに強い見出しの作り方は以下の記事で詳しく解説しています。
>> SEOに強いWordPressの見出しの正しい付け方！読まれる見出しのポイントとは？

見出しのデザインは以下の記事で解説しています。
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】

例3：リストの使い方

次はリスト！

リスト(箇条書きのこと)を使うには、リストにしたい複数の行のテキストをまとめて選択してから、リストのアイコンをクリックします。

これでリストが完成です。

②文字装飾ボタン一覧

ビジュアルエディタのデフォルトの状態で使えるボタンとその効果は以下の表のとおりです。

アイコン	ボタン名	ボタンの効果
	段落	h2タグやh3タグなどの見出しを作成する
	太字	文字を太字にして目立たせる
	イタリック	テキストをイタリック体にする
	番号なしリスト	ul・liタグでの番号なしリストを作成
	番号付きリスト	ol・liタグでの番号付きリストを作成
	引用	引用であることを示すタグを挿入
	左寄せ	テキストを左寄せにする
	中央揃え	テキストを中央揃えにする
	右寄せ	テキストを右寄せにする(引用元などで使用)
	リンクの挿入/編集	リンクを挿入する
	「続きを読む」タグを挿入	「続きを読む」のリンクを挿入する
	ツールバー切り替え	ツールバー2行目以降のボタンの表示・非表示の切り替え
	取り消し線	テキストに取り消し線をつける
	横ライン	端から端までのラインを入れて区切る
	テキスト色	テキストの色を変更する
	テキストとしてペースト	コピーしたものの書式を無視して値のみ貼り付け
	書式設定をクリア	文字装飾などの書式を全てクリアする
	特殊文字	特殊文字を入力する
	インデントを減らす	段落のインデントを減らす
	インデントを増やす	段落のインデントを増やす
	元に戻す	操作を1つ戻す
	やり直す	操作を1つ進める(元に戻すの後に使用可能)

ボタンをさらに追加して、表や動画の埋め込みなどいろんなボタンを追加するにはTinyMCE Advancedがおすすめです。
>> 【2021年最新】Advanced Editor Tools(旧：TinyMCE Advanced)の設定方法と使い方を画像で徹底解説【WordPressプラグイン】

吹き出しやボックスなど様々な文字装飾をワンクリックで呼び出すにはAddQuicktagがおすすめです。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン

ビジュアルエディタをカスタマイズできるプラグインについては、後ほど「エディタ・テキストエディタをカスタマイズできるプラグイン」の見出しで詳しく紹介します。

⇡目次へ戻る

WordPressのテキストエディタの使い方

次はテキストエディタの使い方！

テキストエディタもビジュアルエディタと同じように、次の3つについて順番に解説します。

テキストの入力方法
画像の挿入方法
文字装飾のやり方

【Step1】テキストの入力方法

テキストエディタはこのように、HTMLタグで記事を書いていきます。

が！！

以下の2つのタグは使わなくてもOKです。

文章を書く時に使うタグであるpタグ
改行したい時に使うbrタグ

つまり、HTMLタグを使うのは、文字装飾・見出しの作成・画像などのコンテンツを入れたい時だけでOK！！

ただただ文章を書いて改行をするだけなら、普通に文章を入力すればOKです。

pタグとbrタグはいらないんだね♪

うん！でも他のタグは必要だから後で簡単に解説するよ♪

【Step2】画像の挿入方法

タグの使い方の前に画像の挿入方法ですが、

画像の挿入はビジュアルエディタと同じです。

「メディアを追加」をクリックして、ビジュアルエディタと同じように画像を挿入しましょう。

画像を挿入したら、勝手にimgタグに変換されるよ♪

【Step3】文字装飾のやり方

ここがメイン！！

HTMLタグで文字装飾をするには、行いたい装飾に合わせたHTMLタグを使う必要があります。

例えば！！

<h2>ここが見出しになります</h2>

このようにh2タグで囲うと見出しになります。

自分で入力しないといけないの？

ビジュアルエディタと同じように、テキストエディタでもボタン1つでタグを使うことができるよ♪

①タグのボタンの基本的な使い方

テキストエディタの上部には、このようにタグのボタンが並んでいます。

memo

デフォルトはもっと少ないですが、上記の画像ではAddQuicktagでボタンを追加しています。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン

タグを使うにはビジュアルエディタのボタンと同じように、タグで囲みたい箇所を選択してからボタンをクリックすればOKです。

このように、ワンクリックでタグで囲われます。

例1：太字の使い方

太字にするには、「b」のボタンを使います。

このように<strong></strong>タグで囲われます。

プレビューを確認すると、太文字になっています。

例2：見出しの使い方

見出しを作成するには、以下のタグで囲みます。

<h2></h2>

プレビューで確認すると、<h2>タグで囲んだ箇所が見出しになっています。

>> SEOに強いWordPressの見出しの正しい付け方！読まれる見出しのポイントとは？
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】

例3：リストの使い方

リストを作成するには、このように全体をulタグのボタンを使って囲ってから、

リストの中の項目を1行ずつ<li>タグで囲っていきます。

残りの2行も1つずつ<li>タグで囲います。

画像のように、リストの中身全てを<li>タグで囲めたら完了です。

プレビューを確認すると、ulタグとliタグで作られた箇所がリストになっています。

②代表的なタグ一覧

テキストエディタで使う代表的なタグは以下のとおりです。

ボタン	ボタンの効果	タグ
b	太字にして強調する	strongタグ
i	イタリック体にして強調する	emタグ
link	リンクを挿入する	aタグ
b-quote	引用にする	blockquoteタグ
del	取り消し線を適用する	delタグ
ins	追記であることを示す	insタグ
img	画像を挿入する	imgタグ
ul	番号なしリスト	ulタグ
ol	番号付きリスト	olタグ
li	リストの項目	liタグ
code	コードであることを示す	codeタグ
more	「続きを読む」リンクを挿入する	<!–more–>
タグを閉じる	タグを閉じる

見出しや吹き出しなどボタンをさらに追加してカスタマイズするにはAddQuicktagがおすすめです。
>> 【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン

⇡目次へ戻る

ビジュアルエディタ・テキストエディタをカスタマイズできるプラグイン

最後に、ビジュアルエディタやテキストエディタをカスタマイズして、

さらに効率よく時短で記事を書けて
さらにおしゃれなデザインの記事を作るために

とっても便利な4つのプラグインをご紹介します。

①AddQuicktag(共通)

1つ目はAddQuicktagです。

AddQuicktagはビジュアルエディタでもテキストエディタでも使えて、吹き出しやボックス・表など複雑な文字装飾やHTMLタグのボタンを自由に追加できるプラグインです。
例えば、このように装飾したい箇所を選択してからワンクリックで、、、

吹き出しのデザインも簡単に呼び出すことができます。