WordPressビジュアルエディタの使い方と機能を徹底解説

WordPressで記事を書こうとしたとき、「HTMLなんて分からないのに、どうやってブログを書けばいいんだろう」と不安に感じたことはありませんか。

実はWordPressには、Microsoft Wordのような感覚で文章を書けるビジュアルエディタという機能が搭載されています。個人的にWordPressに携わってきた中で感じているのは、この機能の存在を正しく理解しているかどうかで、記事作成の効率が大きく変わるということです。

ただし、WordPress 5.0以降はエディタの仕組みが大きく変わりました。「ビジュアルエディタ」という言葉が指す範囲も広がっており、クラシックエディタとブロックエディター（Gutenberg）の違いを把握していないと、情報が混乱しやすい状況です。

この記事では、WordPressのビジュアルエディタについて、基本的な仕組みから実践的な使い方、さらには現在主流のブロックエディターとの関係まで、体系的に解説していきます。

WordPressビジュアルエディタとは何か

WordPressのビジュアルエディタとは、HTMLコードを書かずに、実際の表示に近い見た目で記事を編集できるWYSIWYGエディタのことです。

WYSIWYGとは「What You See Is What You Get」の略で、日本語にすると「見たままが得られる」という意味になります。つまり、編集画面で太字にした文字は、公開後もそのまま太字で表示されるということです。

この仕組みの裏側では、TinyMCEというオープンソースのJavaScriptライブラリが動いています。TinyMCEが、ユーザーのボタン操作を自動的にHTMLコードへ変換してくれるため、コードを意識することなく記事が書けるわけです。

身近なもので例えると、Microsoft WordやGoogleドキュメントの編集画面とほぼ同じ感覚です。ツールバーのボタンをクリックするだけで、文字の装飾やレイアウトの調整ができます。

ビジュアルエディタとテキストエディタの違い

WordPressのクラシックエディタには、ビジュアルモードとテキストモードという2つの編集モードが用意されています。

編集中にビジュアルモードとテキストモードを自由に切り替えられるのが大きな特徴です。たとえば、基本的な文章構成はビジュアルモードで行い、細かいHTMLの調整だけテキストモードに切り替えるという使い方ができます。

経験上、この2つのモードを状況に応じて使い分けることで、記事作成の効率が格段に上がります。

ビジュアルエディタの主要機能を徹底解説

ビジュアルエディタには、記事作成に必要な機能がひと通り揃っています。ここでは主要な機能をカテゴリごとに整理して紹介します。

テキスト装飾と書式設定

もっとも基本的な機能が、テキストの装飾です。ツールバーのボタンをクリックするだけで、以下のような書式設定が可能です。

太字（Bold）は、強調したい単語やフレーズに使います。斜体（Italic）は、英語の固有名詞や引用に便利です。打ち消し線（Strikethrough）は、訂正や変更を視覚的に示すときに活用できます。

さらに、フォントカラーの変更や文字サイズの調整も、コードを書くことなく実行できます。

操作を間違えた場合も心配いりません。元に戻す（Undo）とやり直し（Redo）機能が搭載されているので、安心して試行錯誤できます。

見出しの作成と階層管理

SEOの観点からも非常に重要なのが、見出し（Heading）の設定です。

ビジュアルエディタでは、ドロップダウンメニューからH2〜H6までの見出しレベルを選択できます。見出しの階層を正しく設定することで、検索エンジンが記事の構造を理解しやすくなり、読者にとっても内容の流れが把握しやすくなります。

画像とメディアの挿入

ビジュアルエディタのもう一つの大きな利点は、画像の挿入と管理が視覚的に行えることです。

ツールバーの「メディアを追加」ボタンから、画像のアップロードやメディアライブラリからの選択が可能です。挿入後は、画像のサイズ変更、配置（左寄せ・中央・右寄せ）、キャプションの追加、さらには画像の差し替えまで、すべてビジュアルエディタ上で完結します。

テキストの回り込み設定を使えば、雑誌のようなレイアウトも簡単に実現できます。

リンクと引用の管理

リンクの挿入も、URLをコピーしてボタンをクリックするだけです。リンクテキストの選択、URL入力、新しいタブで開くかどうかの設定まで、すべてがビジュアル的に操作できます。

引用（Blockquote）機能を使えば、他のサイトや書籍からの引用文を視覚的に区別して表示することもできます。水平線（区切り線）の挿入も、ボタン一つで完了します。

クラシックエディタとブロックエディターの関係

「WordPressのビジュアルエディタ」を理解するうえで避けて通れないのが、クラシックエディタとブロックエディター（Gutenberg）の関係です。

WordPress 5.0で何が変わったのか

2018年12月にリリースされたWordPress 5.0で、デフォルトのエディタがブロックエディター（Gutenberg）に変更されました。

それまでのクラシックエディタは、一つの大きなテキストエリアにビジュアルモードとテキストモードを切り替えて使う仕組みでした。一方、ブロックエディターは、コンテンツを「ブロック」という単位で管理する新しいアプローチを採用しています。

ブロックエディターもビジュアル編集の一種

重要なポイントとして、ブロックエディターも「ビジュアル編集」の考え方を継承しています。

むしろ、ブロック単位でコンテンツを管理することで、より直感的なレイアウト調整が可能になったと言えます。段落ブロック、画像ブロック、見出しブロックなど、それぞれのコンテンツ要素が独立したブロックとして扱われるため、並べ替えや個別の設定変更が容易です。

HTMLやCSSの知識がなくてもレイアウト調整ができるという、ビジュアルエディタの根本的な思想は、ブロックエディターにもしっかり受け継がれています。

Classic Editorプラグインという選択肢

「以前のビジュアルエディタの方が使いやすかった」という方も少なくありません。

その場合は、WordPress公式のClassic Editorプラグインをインストールすることで、従来のビジュアルエディタ＋テキストエディタの環境に戻すことができます。

ただし、これまでの取り組みで感じているのは、長期的にはブロックエディターに慣れておく方が有利だということです。WordPress本体の開発方針がブロックエディター中心に進んでいるため、新しいテーマやプラグインもブロックエディターを前提に設計されることが増えています。

ビジュアルエディタを使いこなすための実践テクニック

ここからは、ビジュアルエディタ（クラシック・ブロック両方）をより効果的に活用するためのテクニックを紹介します。

editor-style.cssで編集画面の見た目を実際の表示に近づける

ビジュアルエディタでよくある悩みが、「編集画面の見た目と、実際に公開したときの見た目が違う」という問題です。

これを解決するのがeditor-style.cssです。テーマのfunctions.phpに以下のような記述を追加し、専用のCSSファイルを読み込ませることで、編集画面のスタイルを実際の表示に近づけることができます。

editor-style.cssを適切に設定すれば、ビジュアルエディタ上でほぼ完成形を確認しながら記事を書けるようになります。これにより、プレビューボタンを何度もクリックする手間が大幅に減ります。

ビジュアルモードとテキストモードの効率的な切り替え

クラシックエディタを使っている場合、2つのモードを戦略的に使い分けることが重要です。

この流れを習慣化することで、見た目の美しさとコードの正確性を両立できます。

Wordからのコピー＆ペーストを活用する

意外と知られていない便利な機能が、Microsoft Wordからのコピー＆ペーストに対応していることです。

Wordで下書きした文章をそのままビジュアルエディタに貼り付けると、太字や見出しなどの基本的な書式がある程度引き継がれます。オフラインで下書きを作成し、あとからWordPressに移す作業フローにも対応できるわけです。

ただし、Wordの複雑な書式（特殊なフォントや表組みなど）は正しく変換されないことがあるため、貼り付け後にテキストモードで不要なコードが入っていないか確認することをお勧めします。

テーマやプラグインによる機能拡張

ビジュアルエディタの機能は、テーマやプラグインによって拡張できます。

多くのWordPressテーマでは、独自のクイックタグ（ボタンや装飾ボックスなど）がビジュアルエディタに追加されます。たとえば、WordPressテーマSWELLのような人気テーマでは、記事装飾用のブロックやスタイルが豊富に用意されています。

また、TinyMCE Advancedなどのプラグインを使えば、ツールバーのボタンを追加・整理して、自分好みの編集環境を構築することも可能です。

ビジュアルエディタのメリットとデメリット

ビジュアルエディタは非常に便利な機能ですが、万能ではありません。メリットとデメリットの両方を理解しておくことが大切です。

ビジュアルエディタの5つのメリット

1. HTMLの知識が不要

もっとも大きなメリットです。コードを一切書かなくても、見出し・太字・画像挿入・リンク設定といった基本的な記事作成がすべて完結します。WordPressを始めたばかりの方にとって、これは非常に心強い機能です。

2. 直感的な操作性

ツールバーのアイコンはWordやGoogleドキュメントと似た配置になっているため、オフィスソフトの経験があれば、ほぼ迷わず操作できます。

3. リアルタイムのビジュアルフィードバック

書式変更の結果がその場で反映されるため、完成形をイメージしながら記事を書けます。

4. Wordからのコピー＆ペースト対応

既存のWord文書をWordPressに移行する作業が効率化されます。

5. テーマ・プラグインによる拡張性

基本機能に加えて、テーマやプラグインで独自のボタンや装飾機能を追加できます。

知っておくべき3つのデメリット

1. 自動整形による意図しないコード変換

ビジュアルモードでは、WordPressが自動的にHTMLコードを整形することがあります。テキストモードで書いたカスタムHTMLが、ビジュアルモードに切り替えた際に変更されてしまうケースがあるため注意が必要です。

2. 編集画面と実際の表示のズレ

editor-style.cssを設定していない場合、編集画面の見た目と公開後の見た目にかなりの差が生じることがあります。

3. 複雑なレイアウトには限界がある

カラムレイアウトや高度なデザインを実現するには、やはりHTMLやCSSの知識が必要になる場面があります。すべてのケースに適用できるわけではありませんが、基本的な記事作成には十分な機能が揃っています。

目的別のエディタ選び方ガイド

「結局、どのエディタを使えばいいの？」という疑問に対して、目的別の選び方を整理しました。

これからWordPressを始める方であれば、まずはブロックエディターのビジュアル編集に慣れることをお勧めします。ブロックエディターは、クラシックエディタのビジュアルモードの思想を受け継ぎながら、より柔軟なレイアウト機能を提供しています。

一方で、長年クラシックエディタを使ってきた方が無理に移行する必要はありません。Classic Editorプラグインは現在も公式にサポートされており、慣れた環境で効率よく記事を書くことも十分に合理的な選択です。

WordPressのカスタマイズに興味がある方は、ビジュアルエディタの基本操作に慣れた段階で、テキストモードやカスタムHTMLブロックにも少しずつ触れてみると、表現の幅が大きく広がります。

よくある質問（FAQ）

ビジュアルエディタとブロックエディターは同じものですか

厳密には異なります。ビジュアルエディタは主にクラシックエディタ内のWYSIWYG編集モードを指し、TinyMCEをベースとしています。ブロックエディター（Gutenberg）はWordPress 5.0以降の新しいエディタで、ブロック単位でコンテンツを管理する仕組みです。ただし、どちらも「コードを書かずにビジュアル的に編集する」という思想は共通しています。

ビジュアルエディタが表示されない場合はどうすればいいですか

WordPressの管理画面で「ユーザー」→「プロフィール」を開き、「ビジュアルリッチエディターを使用しない」にチェックが入っていないか確認してください。チェックが入っている場合は外して保存します。それでも解決しない場合は、ブラウザのキャッシュクリアやプラグインの競合を確認してみてください。

ビジュアルエディタで書いた記事のHTMLが崩れることがありますが対処法はありますか

ビジュアルモードとテキストモードを頻繁に切り替えると、自動整形によってHTMLが意図しない形に変換されることがあります。対処法としては、カスタムHTMLはテキストモードで最後にまとめて追加する、またはブロックエディターの「カスタムHTML」ブロックを使うことで、自動整形の影響を受けにくくなります。

スマートフォンからでもビジュアルエディタは使えますか

使えますが、画面サイズの制約からツールバーの操作がやや難しくなることがあります。簡単な文章の修正や更新であれば問題ありませんが、本格的な記事作成はパソコンで行う方が効率的です。WordPress公式のモバイルアプリを併用するのも一つの方法です。

ビジュアルエディタの機能を増やすおすすめのプラグインはありますか

クラシックエディタ環境であればTinyMCE Advanced（現Advanced Editor Tools）が定番です。テーブル作成やフォントサイズ変更など、標準にはないボタンを追加できます。ブロックエディター環境では、テーマ付属の装飾機能を活用するのが最も安定した方法です。人気のWordPressテーマの多くは、独自のブロックや装飾スタイルを提供しています。

まとめ

WordPressのビジュアルエディタは、HTMLの知識がなくても直感的に記事を作成できる、WordPress最大の強みの一つです。

クラシックエディタのビジュアルモードであれ、現在のブロックエディターであれ、「見たまま編集できる」という根本的な価値は変わりません。大切なのは、自分の作業スタイルや目的に合ったエディタ環境を選び、その機能を使いこなすことです。

まずはビジュアルエディタの基本機能に慣れることから始めてみてください。そのうえで、editor-style.cssの設定やモードの使い分けなど、一つずつテクニックを身につけていけば、記事作成の効率と品質は着実に向上していくはずです。