WordPressビジュアルエディタの使い方|見出し・装飾の基本

趣味

※本記事にはアフィリエイト広告(PR)を含みます。

WordPressで記事を書こうとしたとき、HTMLタグの知識がなくて見出しや装飾の付け方がわからず、操作画面を前に手が止まってしまうことはありませんか。

結論からいえば、ビジュアルエディタを使えば、Wordのような感覚で見出しや太字、リストなどの装飾を簡単に設定できます。

ただし、テキストエディタやブロックエディタとは操作方法が異なるため、どの編集画面を使っているのかを最初に確認しておく必要があります。

この記事では、ビジュアルエディタの基本的な画面構成から、見出しや装飾の設定方法、表示されないときの対処法、便利なプラグインまでを順を追って紹介します。

WordPressを使い始めたばかりの方も、装飾の付け方に迷っている方も、自分に合った編集方法を見つけやすくなるでしょう。

ツールバーの使い方と見出しの階層ルールを押さえることで、HTML知識がなくても整った記事を作成できるようになります。

この記事でわかること

  • ビジュアルエディタの画面構成と基本操作の流れ
  • ツールバーを使った太字・色・配置などの装飾方法
  • H2・H3の階層を守った見出しの設定手順
  • ビジュアルエディタが表示されないときの確認ポイント

今、人気の商品を楽天ランキングで見てみる>><PR>

  1. WordPressのビジュアルエディタとは?HTMLを書かずに見た目のまま編集できる機能
    1. 入力した文字がそのまま公開画面に近い形で表示される
    2. Wordのような操作感でHTML知識がなくても記事を書ける
    3. 現在はクラシックエディタの一部として提供されている
  2. ビジュアルエディタ・テキストエディタ・ブロックエディタは編集方法が根本的に違う
    1. テキストエディタはHTMLタグを直接書いて細かく調整できる
    2. ブロックエディタは段落や画像をブロック単位で組み立てる
    3. 初心者はビジュアルエディタ、細部調整はテキストエディタと使い分ける
  3. ビジュアルエディタの画面はタイトル・本文・ツールバー・右側設定の4つで構成される
    1. タイトル欄と本文欄の役割を最初に把握する
    2. ツールバーの2段目は「ツールバー切り替え」ボタンで表示する
    3. 右側の公開・カテゴリー・アイキャッチ設定も合わせて確認する
  4. ツールバーのボタンを覚えれば装飾作業はほぼ完結する
    1. 太字・斜体・打ち消し線で文中の強調を使い分ける
    2. 左寄せ・中央寄せ・右寄せで文章や画像の配置を整える
    3. 文字色・引用・水平線で記事にメリハリをつける
    4. 書式クリアで貼り付け時の余計な装飾を取り除く
  5. 見出しは段落プルダウンからH2→H3の順に階層を守って設定する
    1. 記事タイトルはH1なので本文はH2から始める
    2. H2の内容を分解した説明にH3を割り当てる
    3. 見出しだけ読んで内容がわかる文言にする
  6. リスト・リンク・画像・動画・表は本文中にワンクリックで挿入できる
    1. 箇条書きと番号付きリストは順序の有無で選ぶ
    2. テキストリンクは範囲選択後にリンク挿入ボタンで設定する
    3. 画像は「メディアを追加」からサイズと配置を指定する
    4. YouTube動画はURLの貼り付けだけで埋め込める
  7. WordやGoogleドキュメントの原稿はテキスト形式で貼り付けると崩れない
    1. 書式ごとコピーすると不要なHTMLが混入する
    2. 貼り付け後は書式クリアで装飾をリセットする
    3. 見出しや装飾はWordPress側で付け直すのが安全
  8. ビジュアルエディタが表示されないときはユーザー設定とプラグインを疑う
    1. プロフィール画面の「ビジュアルエディターを使用しない」のチェックを外す
    2. テーマやプラグインの競合を停止して切り分ける
    3. ブラウザのキャッシュ削除や別ブラウザでの表示も試す
  9. ブロックエディタ環境でビジュアルエディタを使うにはクラシックエディタを有効化する
    1. Classic Editorプラグインで従来の編集画面に戻せる
    2. 投稿ごとにクラシックブロックを挿入して使う方法もある
    3. サポート期限を踏まえて長期的な移行も検討しておく
  10. プラグインを追加すればビジュアルエディタの機能はさらに広げられる
    1. Advanced Editor Tools(旧TinyMCE Advanced)
    2. TinyMCE Advanced
    3. Snow Monkey Editor
    4. AddQuicktag
  11. 表現力や読みやすさを高める専用プラグインで記事の完成度を上げる
    1. Word Balloon
    2. Easy Table of Contents
  12. まとめ

WordPressのビジュアルエディタとは?HTMLを書かずに見た目のまま編集できる機能

見出し画像1

WordPressのビジュアルエディタは、HTMLタグを直接書かずに、見たままの状態で記事を作成できる編集機能です。
文字を太くしたり見出しを付けたりする作業を、専門的なコードの知識がなくても直感的な操作で行えます。
ブログを書き始めたばかりの人にとって、最初に触れる編集画面として位置づけられています。

入力した文字がそのまま公開画面に近い形で表示される

ビジュアルエディタの大きな特徴は、入力した文字がほぼ公開画面と同じ見た目で表示されることです。
文字を太字にすればその場で太く表示され、色を変えればすぐに色が反映されます。
実際にサイトへ公開する前に、仕上がりのイメージを画面上で確認しながら作業できるのは心強いポイントです。

一方で、テーマ(サイトの見た目を決めるデザインテンプレート)によっては、編集画面と実際の公開ページで文字サイズや余白が微妙に異なる場合があります。
これは編集画面用のスタイルと、公開時に使われるスタイルが完全に一致しないケースがあるためです。
仕上がりに不安がある場合は、下書き保存をしてからプレビュー画面で確認する習慣をつけると安心です。

このように、見た目を確認しながら進められる点は、記事作成のハードルを下げる工夫のひとつといえます。
特に文章量が多い記事では、装飾のバランスを都度チェックできるメリットが大きく感じられます。

Wordのような操作感でHTML知識がなくても記事を書ける

ビジュアルエディタは、Wordやドキュメント作成ツールに慣れている人であれば、比較的スムーズに操作できる作りになっています。
文字を選択してボタンを押すだけで太字や斜体にできるなど、文書作成ソフトに近い感覚で扱える点が特徴です。

そのため、タグの意味や記述ルールを覚える必要がなく、パソコン操作に慣れている人であれば比較的スムーズに使いこなせます。
見出しを付ける、リストを作る、画像を挿入するといった基本的な作業も、ツールバーのボタンを押すだけで完結します。

ただし、便利な反面、装飾を重ねすぎると意図しないレイアウト崩れにつながることがあります。
コピー元の書式が混ざったまま貼り付けると、フォントや余白が不自然になる場合がありますため、貼り付け後の見た目は確認するようにしましょう。

現在はクラシックエディタの一部として提供されている

もともとビジュアルエディタは、WordPressの標準的な編集画面として長く使われてきました。
しかし現在の主要なバージョンでは、ブロックエディタと呼ばれる新しい編集方式が標準となっており、ビジュアルエディタは「クラシックエディタ」という仕組みの中で提供される形になっています。

クラシックエディタは元々の編集画面をそのまま利用できるようにしたもので、ビジュアルエディタとテキストエディタという2つの表示モードを切り替えながら使う構成になっています。
以前からWordPressを使っていた人にとっては、見慣れた画面のまま作業を続けられる点が利点です。

下記に、現在の位置づけを簡単に整理します。

用語 役割
クラシックエディタ 従来型の編集画面をまとめて提供する仕組み
ビジュアルエディタ 見た目のまま編集できる表示モード
テキストエディタ HTMLタグを直接編集できる表示モード

クラシックエディタの利用には、環境によって設定やプラグインの導入が必要になる場合があります。
導入方法や今後の見通しについては、後述の内容もあわせて確認しておくと役立ちます。

ビジュアルエディタ・テキストエディタ・ブロックエディタは編集方法が根本的に違う

WordPressで記事を書く方法には複数の種類があり、それぞれ操作の仕組みが異なります
見た目を確認しながら文字を打ち込むビジュアルエディタに対して、HTMLタグを直接扱うテキストエディタや、パーツを組み合わせるブロックエディタでは、画面の作りも考え方も別物です。
この違いを理解しておくと、記事作成中に「思った通りに表示されない」と戸惑う場面を減らせます。

テキストエディタはHTMLタグを直接書いて細かく調整できる

テキストエディタは、文章にHTMLタグを直接入力することで、細部の調整ができる編集画面です。
見た目は表示されず、コードがそのまま並ぶ形式のため、タグの意味を理解している人向けの機能といえます。

たとえば、ビジュアルエディタのボタン操作だけでは対応しきれない細かい余白調整や、特定のクラス名を指定した装飾などは、テキストエディタでコードを書き加えることで実現できる場合があります。
見出しタグや段落タグがどのように組まれているかを確認する用途としても役立ちます。

一方で、タグの閉じ忘れや入力ミスがあると、表示が崩れたり装飾が反映されなかったりすることがあります。
閉じタグを書き忘れると、その後の文章全体に影響が出ることがありますため、編集後はプレビューで確認する習慣をつけておくと安心です。

HTMLの知識がまったくない状態でいきなり使うと修正箇所を見つけにくいこともあるので、まずは簡単なタグから少しずつ試していく進め方が現実的です。

ブロックエディタは段落や画像をブロック単位で組み立てる

ブロックエディタは、文章や画像、リストなどの要素を「ブロック」という単位で一つずつ積み重ねていく編集方法です。
段落なら段落ブロック、画像なら画像ブロックというように、パーツごとに扱いが分かれている点が特徴です。

この仕組みにより、段落の順番を入れ替えたり、途中に画像ブロックを差し込んだりする作業がしやすくなっています。
ビジュアルエディタが一枚の原稿用紙に文字を書き込んでいくイメージだとすれば、ブロックエディタはブロックを並べてページを組み立てていくイメージに近いといえます。

ただし、ブロックごとに設定項目が用意されているため、最初は操作画面に慣れるまで少し時間がかかることもあります。
ビジュアルエディタの操作感に慣れている人ほど、ブロックという考え方に戸惑いやすい傾向があります。

現在のWordPressでは標準の編集画面としてブロックエディタが採用されているため、ビジュアルエディタを使いたい場合は別途設定が必要になる場合がある点も押さえておきたいところです。

初心者はビジュアルエディタ、細部調整はテキストエディタと使い分ける

3つの編集方法にはそれぞれ向き不向きがあるため、目的に応じて使い分けることで、スムーズに作業を進められます。
特に、これから記事作成を始める人にとっては、見たままの状態で編集できるビジュアルエディタが取り組みやすい選択肢です。

反対に、装飾を細かく整えたい場面や、コードの意味を確認しながら修正したい場面では、テキストエディタに切り替える方法が向いています。
両者を行き来しながら作業できる点は、クラシックエディタ系の画面ならではの利点です。

それぞれの特徴をまとめると、次のようになります。

編集方法 操作のイメージ 向いている場面
ビジュアルエディタ 見た目のまま入力・装飾する HTMLの知識がなく気軽に書きたいとき
テキストエディタ HTMLタグを直接記述する 細部の表示を細かく調整したいとき
ブロックエディタ 要素をブロック単位で組み立てる パーツを入れ替えながら構成したいとき

使い分けの目安として、基本的にはビジュアルエディタで書き進め、表示に問題がある箇所だけテキストエディタで確認するという流れが扱いやすい方法です。
すべてをコードで管理しようとせず、必要な部分だけ手を加える姿勢が、無理なく続けるコツといえます。

ビジュアルエディタの画面はタイトル・本文・ツールバー・右側設定の4つで構成される

見出し画像2

投稿画面を開いたときに戸惑わないためには、画面が4つのエリアに分かれていることを把握しておくと、操作がわかりやすくなります
タイトル欄、本文欄、ツールバー、そして右側の設定エリアです。
それぞれの役割を先に理解しておくと、実際に記事を書き始めたときの操作がスムーズになります。

タイトル欄と本文欄の役割を最初に把握する

投稿画面の一番上にあるのがタイトル欄で、その下に広がっている大きな枠が本文欄です。
タイトル欄には記事の見出しとなる文言を入力し、本文欄には実際の記事内容を書き進めていきます。
この2つは見た目もはっきり分かれているため、迷うことはあまりありません。

ただし、タイトル欄に入力した文字は自動的に大きな見出し(h1相当)として扱われる仕組みになっています。
そのため、本文欄側で改めて同じような大見出しを作る必要はなく、本文はタイトルより下の見出しから組み立てていくという考え方を持っておくとよいでしょう。

また、本文欄は入力した文字がそのまま画面上に反映されていく作りになっているため、書きながら仕上がりのイメージをつかみやすいのも特徴です。
文章量が増えてくると欄の高さは自動で伸びていくため、あらかじめ枠のサイズを気にする必要はありません。

ツールバーの2段目は「ツールバー切り替え」ボタンで表示する

本文欄のすぐ上に並んでいるアイコン群がツールバーです。
太字や見出し設定など基本的な装飾ボタンが並んでいますが、実はこのツールバーには1段目と2段目があり、初期状態では1段目しか表示されていません。

2段目を表示させるには、ツールバーの右端にある「ツールバー切り替え」というボタンをクリックします。
これをクリックすることで、文字色や表の挿入、書式クリアなど、より細かい装飾機能を持つボタンが下段に現れる仕組みです。

この切り替えボタンの存在に気づかず、2段目のボタンが見つからないと感じる人も多いです
装飾の幅を広げたいときは、まずツールバーの右端を確認してみてください。

1段目と2段目にどのようなボタンがあるかをおおまかに整理すると、次のようになります。

  • 1段目:段落プルダウン、太字、斜体、箇条書き、番号付きリスト、引用、左寄せ・中央寄せ・右寄せ、リンク挿入、続きを読む挿入
  • 2段目:文字色、書式クリア、特殊文字、インデント調整、打ち消し線、水平線、元に戻す・やり直し、キーボードショートカット

右側の公開・カテゴリー・アイキャッチ設定も合わせて確認する

本文の装飾に気を取られがちですが、画面右側にあるエリアも記事作成には欠かせません。
ここには公開に関する設定、カテゴリーやタグの選択、アイキャッチ画像の設定といった項目がまとまっています。

公開エリアでは下書き保存や公開状態の切り替え、公開日時の指定などができるようになっています。
記事を書き終えたつもりでも、この設定を確認しないまま画面を離れてしまうと、意図しない状態のまま残ってしまう場合があるため注意が必要です。

カテゴリーやタグは、記事をサイト内でどのように分類するかを決める項目です。
あらかじめ用意されているカテゴリーから選ぶだけでなく、新しいカテゴリーをその場で追加できる作りになっているため、記事の内容に合わせて柔軟に設定できます。

アイキャッチ画像は、記事一覧やSNSでのシェア時に表示される代表画像を設定する項目です。
設定を忘れると画像なしの状態で公開されてしまうこともあるため、本文を書き終えたあとの最終チェック項目として覚えておくとよいでしょう。

ツールバーのボタンを覚えれば装飾作業はほぼ完結する

ビジュアルエディタの装飾作業は、ツールバーに並ぶボタンの役割を覚えることで、基本的な装飾作業がこなせるようになります。
難しいHTMLタグを覚える必要はなく、ボタンをクリックする、または選択した文字に対してボタンを押すという操作の繰り返しです。
ここでは代表的なボタンの使い分けについて、具体的に見ていきます。

太字・斜体・打ち消し線で文中の強調を使い分ける

文中の強調表現としてよく使われるのが、太字・斜体・打ち消し線の3つです。
太字は伝えたい部分を目立たせたいときに使い、記事の中でも重要な部分を目立たせたい箇所に向いています。
斜体は補足や引用のニュアンスを添えたいときに使われることが多く、打ち消し線は訂正した内容や以前の情報を残しつつ変更を示したいときに役立ちます。

使い方は共通していて、装飾したい文字をドラッグで選択してから、ツールバーの該当ボタンをクリックするだけです。
選択範囲を間違えると余計な部分まで装飾されてしまうため、選択の際は文字の始まりと終わりを確認しておくと安心です。

ただし、太字を多用しすぎると、どこが本当に重要なのかがかえって伝わりにくくなってしまいます。
1つの段落で太字を過度に使用すると、重要な箇所が目立たなくなるため、本当に伝えたい部分だけに絞って使うのがコツです。

左寄せ・中央寄せ・右寄せで文章や画像の配置を整える

文章や画像の配置を整えるボタンも、ツールバーの基本機能の一つです。
左寄せは本文の標準的な配置として使われ、中央寄せは見出し的な短い文章や画像を目立たせたいときに向いています。
右寄せは日付や署名など、限られた場面で使われることが多い配置です。

配置を変更したい段落や画像をクリックしてカーソルを合わせてから、ツールバーの寄せボタンを押すだけで反映されます。
文字列全体を選択する必要はなく、対象の段落内にカーソルがあれば操作できる点も覚えておくと作業がスムーズになります。

画像の配置を調整する際は、パソコンとスマートフォンでの見え方が異なる場合がある点にも注意が必要です。
中央寄せにした画像がスマートフォン画面では大きく表示されすぎてしまうこともあるため、公開前にプレビュー画面で確認しておくと安心です。

文字色・引用・水平線で記事にメリハリをつける

文字色の変更、引用、水平線の3つは、記事全体にメリハリをつけるための装飾です。
文字色は注意点や補足を色分けして示したいときに使われますが、色を使いすぎると記事全体がにぎやかになりすぎてしまうため、使う色の種類を限定するとまとまりのある印象になります。

引用機能は、他の文章やコメントを紹介する際に使うと、地の文との違いが視覚的にわかりやすくなります。
引用したい文章を選択してから引用ボタンを押すと、自動的にインデントや背景色がついた表示に変わる仕組みです。

水平線は、話題の区切りを示したいときに便利な装飾です。
長い記事になるほど、水平線を適度に入れることで読者が区切りをつけながら読み進めやすくなります。
以下に、それぞれの装飾が向いている場面を簡単にまとめます。

装飾機能 向いている場面
文字色 注意点や補足を目立たせたいとき
引用 他の文章やコメントを紹介するとき
水平線 話題の区切りを示したいとき

書式クリアで貼り付け時の余計な装飾を取り除く

WordやWebページの文章をそのままコピーして貼り付けると、意図しない文字色やフォントの装飾が一緒に混入してしまうことがあります。
そんなときに役立つのが書式クリアのボタンで、選択した範囲の装飾をまとめてリセットできる機能です。

使い方は簡単で、余計な装飾がついてしまった文章を選択し、書式クリアボタンをクリックするだけです。
段落ごと選択してから実行すれば、太字や文字色、フォントサイズの指定などがまとめて解除されます。

貼り付け直後に見た目が整っているように見えても、裏側では不要な装飾情報が残っているケースがあります。
公開後に表示が崩れる原因になることもあるため、外部の文章を貼り付けた際は、念のため書式クリアをかけておく習慣をつけておくとよいでしょう。

  • コピー元の文字色やフォント指定が残っていないか確認する
  • 段落単位で選択してから書式クリアを実行する
  • クリア後は見出しや強調を改めて設定し直す

見出しは段落プルダウンからH2→H3の順に階層を守って設定する

見出し画像3

見出しを設定するときは、段落プルダウンからH2、H3という順番で階層を守って選ぶことが大切です。
順番を守らずに見出しを付けてしまうと、読者にとって読みにくいだけでなく、記事の構造自体がわかりにくくなってしまいます。
ここでは、階層を守るための具体的な考え方を整理していきます。

記事タイトルはH1なので本文はH2から始める

WordPressの記事では、記事タイトルの部分がすでにH1として扱われる仕組みになっています。
そのため、本文中で使う一番大きな見出しはH2からスタートするのが基本の考え方です。
ツールバーの段落プルダウンを開くと「見出し1」から「見出し6」まで選べるようになっていますが、本文では「見出し1」は選ばずに「見出し2」から使い始めます。

ここでよくある失敗が、本文中の大きな見出しにも「見出し1」を選んでしまうケースです。
1つの記事に見出し1が複数存在すると、記事全体の構造がわかりにくくなることがあります
見出しを設定する前に、プルダウンの表示を一度確認しておく習慣をつけておくと安心です。

H2は、記事の中で大きな話題の区切りごとに設定するイメージで使います。
たとえば「準備するもの」「手順」「注意点」のように、内容が切り替わるタイミングでH2を挿入すると、読者も話の流れをつかみやすくなります。

H2の内容を分解した説明にH3を割り当てる

H3は、H2で立てた大きな話題を、さらに細かい要素に分けて説明したいときに使う見出しです。
H2だけで説明を続けてしまうと文章が長くなりすぎて、どこが要点なのかわかりにくくなってしまいます。
そこでH2の中身をいくつかの視点に分解し、それぞれにH3を付けていく流れが基本になります。

具体的なイメージをつかみやすいように、見出しの階層関係を表にまとめてみました。

見出しレベル 役割 使用場面の例
H1 記事タイトル WordPressが自動で割り当てる部分
H2 本文の大きな区切り 話題が切り替わるタイミング
H3 H2の内容を細分化 手順の各ステップや具体例の説明

この表のように、H2とH3の関係を意識することで、見出し構成が整理しやすくなります
H3の下にさらに細かい説明を加えたい場合はH4を使うこともできますが、ブログ記事程度の分量であれば、H2とH3の組み合わせだけで十分にまとまることが多いです。

また、1つのH2の下にH3が1つしかない構成は、あまりバランスがよいとはいえません。
分解する意味がなくなってしまうため、H3を設けるときは2つ以上に分かれる内容かどうかを一度確認してみるとよいでしょう。

見出しだけ読んで内容がわかる文言にする

見出しの文言を考えるときは、見出しだけを読んでも、内容が伝わる表現にすることが大切です
ブログ記事は本文をすべて読まず、見出しだけをざっと眺めて必要な部分を探す読み方をする人も少なくありません。
そのため、見出しが漠然とした表現になっていると、読者が求めている情報にたどり着きにくくなってしまいます。

たとえば「ポイント」や「注意点」といった単語だけの見出しよりも、「見出し設定でよくある失敗と直し方」のように、具体的な内容を含めた文言にすると伝わりやすくなります。
何についてのポイントなのか、どんな注意点なのかを見出しの中に盛り込むイメージです。

見出しを考える際には、その見出しの下にどんな段落を書くつもりなのかを先にメモしておくと、内容とずれのない文言をつけやすくなります。
本文を書き終えたあとに見出しだけを読み返し、内容と食い違っていないかを確認する作業も忘れずに行いたいところです。

階層と文言の両方を意識して見出しを整えることで、読者にとっても検索エンジンにとっても内容が伝わりやすい記事構成に近づいていきます。

リスト・リンク・画像・動画・表は本文中にワンクリックで挿入できる

ビジュアルエディタでは、リスト・リンク・画像・動画・表といったパーツを、ツールバーのボタンから本文へ挿入できます。
HTMLタグを覚えなくても、ボタンを押すだけで形になるのが大きな利点です。
ここでは、それぞれの挿入方法と使い分けのコツを見ていきます。

箇条書きと番号付きリストは順序の有無で選ぶ

リストには大きく分けて、黒丸などの記号を使う「箇条書きリスト」と、数字が振られる「番号付きリスト」の2種類があります。
ツールバーのリストボタンを押すだけで挿入でき、あとは項目ごとに改行して文字を入力していきます。

使い分けの基準は、項目に順序があるかどうかが基準です。
手順やランキングのように順番が意味を持つ内容は番号付きリスト、順不同で並べても差し支えない内容は箇条書きリストが向いています。

  • 箇条書きリスト:必要な持ち物、注意点の一覧など順序を問わない項目
  • 番号付きリスト:作業手順、ランキング形式など順番に意味がある項目

どちらも文章で長々と説明するより視覚的にまとまり、読者が内容を把握しやすくなります。
特に手順を紹介する記事では、番号付きリストを使うことで迷いなく作業を進めてもらいやすくなります。

テキストリンクは範囲選択後にリンク挿入ボタンで設定する

文中の言葉にリンクを付けたいときは、まずリンクにしたい文字列をドラッグして選択します。
その状態でツールバーのリンク挿入ボタンを押すと、リンク先のURLを入力する小さな窓が表示される仕組みです。

URLを入力して確定すれば、選択していた文字がそのままリンクとして機能するようになります。
別のページへのリンクだけでなく、同じ記事内の別の場所へ移動させたい場合にも同様の操作で設定できます。

範囲選択をせずにリンクボタンを押すと、予期しない場所にリンクが作られることがありますため注意が必要です。
設定後は一度プレビュー画面で、リンクが正しい文字列に付いているか確認しておくと安心です。

画像は「メディアを追加」からサイズと配置を指定する

画像を挿入する際は、本文欄の上部や近くに用意されている「メディアを追加」ボタンを使います。
ボタンを押すと、パソコン内の画像を新しくアップロードするか、すでにアップロード済みの画像から選ぶかを選択できる画面が開きます。

画像を選んだあとは、表示サイズや配置(左寄せ・中央寄せ・右寄せなど)をその場で指定してから本文に挿入します。
文章の途中に画像を差し込みたい場合は、あらかじめカーソルを挿入したい位置に置いてから操作するとスムーズです。

画像の下に説明文(キャプション)を添えたいときは、挿入時の設定画面にある入力欄を使うと、画像に沿った小さな文章を自動で配置できます。
画像のサイズを統一することも、読みやすい記事づくりの工夫のひとつです。

YouTube動画はURLの貼り付けだけで埋め込める

動画を紹介したい場合、埋め込み用のコードを調べる必要はありません。
動画を挿入したい行にYouTubeのURLをそのまま貼り付けるだけで、自動的に動画プレーヤーとして表示される仕組みになっています。

この機能はオートエンベッドと呼ばれる仕組みで動いており、対応しているURLであれば特別な操作をしなくても反映されます。
URLの前後に余計な文字が入っていると正しく認識されないことがあるため、貼り付けたあとは公開前のプレビューで表示を確かめておくと良いでしょう。

表を挿入したい場合は、テーマやプラグインによって専用のボタンが用意されていることもあります。
用意されていない場合は、テキストエディタ側でHTMLの表タグを直接記述する方法もあり、比較や一覧をまとめたいときに役立ちます。

挿入したい要素 使うボタン・操作 向いている場面
箇条書き・番号付きリスト ツールバーのリストボタン 項目の整理、手順の紹介
テキストリンク 範囲選択後にリンクボタン 関連ページへの案内
画像 メディアを追加ボタン 写真や図解の挿入
動画 URLの貼り付け YouTube動画の紹介

WordやGoogleドキュメントの原稿はテキスト形式で貼り付けると崩れない

見出し画像4

WordやGoogleドキュメントで作った原稿をビジュアルエディタに貼り付けるときは、テキスト形式で貼り付けることで、表示崩れを防ぐことができます。
ワープロソフトの文書には見た目を整えるための情報が数多く含まれており、これがビジュアルエディタ側の表示と干渉してしまうことがあるためです。
原稿作成の時点で少し意識するだけで、公開後の手直しの手間をぐっと減らせます。

書式ごとコピーすると不要なHTMLが混入する

WordやGoogleドキュメントの文章をそのままコピーして貼り付けると、文字の色やフォント、行間などの情報が目に見えない形で一緒に入り込みます。
これらはブラウザ上では気づきにくいものの、裏側では細かなHTMLタグとして本文に埋め込まれてしまうのです。

その結果、記事全体のデザインを整えているはずのテーマの設定と、貼り付けた部分だけ雰囲気が違って見えることがあります。
特に見出しの大きさや行間が場所によってバラバラになる現象は、こうした混入したHTMLが原因になっているケースが目立ちます。

ワープロソフトの見た目をそのまま反映させようとすると、記事全体のレイアウトが乱れることがありますので注意が必要です。
原稿はあくまで文章の中身を作る場所と割り切り、装飾はWordPress側で行うという意識を持つと安心です。

特に長文の原稿や、文字装飾を多用した文書を扱うときほど、この混入は起こりやすくなります。
仕事でWordを使い慣れている人ほど、貼り付け後の見た目のズレに戸惑いやすい傾向があります。

貼り付け後は書式クリアで装飾をリセットする

原稿を貼り付けたあとに見た目の乱れに気づいたときは、ツールバーの書式クリアボタンを使うと余計な装飾をまとめて取り除けます。
文章を選択してボタンを押すだけの操作なので、HTMLの知識がなくても扱いやすい機能です。

すでに触れた通り書式クリアは装飾作業の基本ツールのひとつですが、貼り付け作業との組み合わせでその役割がより重要になります。
貼り付け後に書式クリアをかけておく習慣をつけておくと、見た目のトラブルを減らせます。

ただし書式クリアをかけても、貼り付け元のソフトによっては装飾が完全に消えないことがあります。
そのような場合は、いったんテキストエディタ側の表示を確認し、残っている不要なタグがないか目視でチェックしておくと安心です。

公開前のプレビュー画面で全体の見た目を確認する習慣も合わせて持っておくと、修正すべき箇所を早い段階で見つけやすくなります。

見出しや装飾はWordPress側で付け直すのが安全

原稿の中でWordやGoogleドキュメントの機能を使って見出しや太字を設定していた場合でも、その装飾情報はビジュアルエディタにうまく反映されないことがあります。
表示上は見出しのように見えても、実際にはHTML上の見出しタグになっていないというケースも少なくありません。

こうしたずれを避けるためには、原稿の段階では文章の区切りやポイントだけをメモ書き程度に残しておき、実際の見出し設定や強調はWordPress側の段落プルダウンやツールバーで行うという流れがおすすめです。
装飾をすべてWordPress側で設定すると決めておくと、作業の手順が明確になります。

次の表に、原稿作成時と貼り付け後で役割をどう分けるとよいかをまとめます。

作業段階 担当する作業
WordやGoogleドキュメント 文章構成の下書き、内容の整理
ビジュアルエディタ 見出し設定、太字や色などの装飾

この役割分担を意識しておくと、原稿作成と記事の仕上げ作業がそれぞれシンプルになり、貼り付け後の修正作業にかかる時間も短縮しやすくなります。

ビジュアルエディタが表示されないときはユーザー設定とプラグインを疑う

ビジュアルエディタの画面が急に表示されなくなったときは、ユーザー設定またはプラグインの競合が原因になっていることが多いです。
編集画面がテキストエディタしか表示されない、ツールバーのボタンが反応しないといった症状は、システム側の不具合よりも設定の見落としで起きるケースがよくあります。
慌てて再インストールする前に、まずは順番に原因を切り分けていくことが大切です。

プロフィール画面の「ビジュアルエディターを使用しない」のチェックを外す

最初に確認したいのが、WordPress管理画面の「ユーザー」から開けるプロフィール設定です。
ここには「ビジュアルエディターを使用しない」という項目があり、このチェックが入っていると本文欄が常にテキストエディタの表示になってしまいます。

この設定は自分で意図的にオンにした記憶がなくても、複数人でサイトを管理している場合や、以前の作業でうっかり触ってしまった場合に有効になっていることがあります。
特に他の担当者から引き継いだアカウントを使うときは、このチェック欄の確認だけで解決することもあります

確認する手順としては、管理画面左メニューの「ユーザー」から「あなたのプロフィール」を開き、画面の上部に表示される「ビジュアルエディター」の項目を探します。
チェックボックスが入っていたら外し、画面下部の更新ボタンを押せば設定が反映されます。

設定変更後は投稿一覧から編集画面を開き直し、本文欄がビジュアルエディタとして表示されているかを確認しておくと安心です。

テーマやプラグインの競合を停止して切り分ける

プロフィール設定に問題がない場合は、使用しているテーマやプラグインとの競合を疑う段階に進みます。
特にエディタ関連の機能を拡張するプラグインを複数導入していると、互いの処理がぶつかり合って表示が崩れることがあります。

切り分けの基本的な方法は、プラグインを一つずつ停止しながら症状が改善するかを確認する作業です。
すべてのプラグインを一度に停止して問題が解消すれば、いずれかのプラグインが原因だとわかりますので、そこから一つずつ有効化して犯人を探っていきます。

テーマが原因になっているケースでは、デフォルトのテーマに一時的に切り替えて確認する方法が有効です。
作業前にはバックアップを取っておく必要があります。切り分けの途中で別の不具合が生じる可能性があるためです

競合確認の際は、公開中のサイトではなくテスト環境や複製したサイトで行うと、訪問者への影響を避けながら落ち着いて作業できます。

ブラウザのキャッシュ削除や別ブラウザでの表示も試す

設定やプラグインを確認しても改善しない場合は、使っているブラウザ側の問題も視野に入れてみましょう。
ブラウザに残ったキャッシュが古い状態のまま表示されていると、管理画面を更新しても見た目が変わらないことがあります。

キャッシュの削除手順はブラウザによって異なりますが、多くの場合は設定メニューから「閲覧履歴データの削除」といった項目を選び、キャッシュされた画像とファイルの項目にチェックを入れて削除する流れです。
削除後はブラウザを再起動してから管理画面に再度ログインし、表示を確認します。

別のブラウザで同じ管理画面を開いてみるのも簡単で有効な確認方法です。
普段使っているブラウザでは症状が出ても、別のブラウザでは正常に表示される場合、原因はブラウザ側の拡張機能や設定にある可能性が高いといえます。

下の表に、症状別のチェックポイントを簡単にまとめます。

症状 確認する場所
常にテキストエディタが表示される プロフィール画面のチェック設定
特定の操作でエラーが出る プラグインやテーマの競合
更新しても表示が変わらない ブラウザのキャッシュや別ブラウザでの確認

これらを一つずつ試していけば、多くの表示トラブルは原因を突き止めやすくなります。
それでも改善しない場合は、契約しているサーバー会社やテーマの提供元に問い合わせてみるのも一つの方法です。

ブロックエディタ環境でビジュアルエディタを使うにはクラシックエディタを有効化する

見出し画像5

WordPressの標準エディタがブロックエディタに変わった環境でも、従来のビジュアルエディタの画面に戻すことができます。
専用のプラグインを使う方法や、投稿の中に部分的に組み込む方法など、状況に応じて選べる手段がいくつか用意されています。
ここでは代表的なやり方と、今後を見据えた考え方について説明します。

Classic Editorプラグインで従来の編集画面に戻せる

もっとも手軽な方法として挙げられるのが、Classic Editorというプラグインの利用です。
これを有効化すると、投稿や固定ページの編集画面がブロック単位のものから、見慣れたタイトル欄・本文欄・ツールバーの構成に切り替わります。
長年WordPressを使ってきた方にとっては、操作に迷うことなくそのまま作業を続けられる点が大きな利点です。

導入の手順自体はシンプルで、プラグインの新規追加画面から検索してインストールし、有効化するだけで反映されます。
設定画面では、サイト全体をクラシックエディタに統一するか、投稿ごとに切り替えられるようにするかを選べる場合もあります。
複数人でサイトを運用している場合は、サイト全体で統一しておくと操作方法の混乱が少なくなります

ただし、プラグインを追加すればするほどサイトの動作に影響が出やすくなる点には注意が必要です。
他のプラグインとの組み合わせによっては、まれに表示が乱れることもあるため、導入後は一通りの操作を試して問題がないか確認しておくと安心です。

投稿ごとにクラシックブロックを挿入して使う方法もある

サイト全体をクラシックエディタに戻すのではなく、必要な投稿だけビジュアルエディタの感覚で編集したい場合は、ブロックエディタの中に「クラシック」ブロックを挿入する方法もあります。
ブロックを追加する画面で「クラシック」と検索すると見つけられることが多く、そのブロックの中に文章を入力すれば、従来のツールバーを使った装飾が可能になります。

この方法のメリットは、他の部分は最新のブロックエディタの機能を活かしつつ、一部分だけ従来の操作感を使えることです。
たとえば、表や画像はブロックエディタの機能で組み立てて、文章のかたまりだけクラシックブロックで書くといった使い分けもできます。

一方で、クラシックブロックの中はビジュアルエディタと同じ操作性ですが、ブロックの外側の要素とはやや性質が異なるため、レイアウトによっては見た目の調整が必要になることもあります。
ページ全体の統一感を保ちたい場合は、使う場所を絞っておくと扱いやすくなります。

サポート期限を踏まえて長期的な移行も検討しておく

Classic Editorプラグインは便利な選択肢ですが、提供期間には限りがあることが公式に案内されています。
サポートが終了すれば、更新されないプラグインを使用し続けることになり、不具合が生じる可能性があります
目先の使いやすさだけでなく、今後の運用も見据えて検討しておくことが大切です。

下の表に、二つの方法の特徴を簡単にまとめます。

方法 向いている場面 注意点
Classic Editorプラグイン サイト全体を従来の操作感に統一したい場合 サポート期限があるため長期利用は要検討
クラシックブロックの挿入 一部の投稿・文章だけ従来の操作感を使いたい場合 レイアウトの調整が必要になることがある

今すぐにブロックエディタへ完全移行する必要はありませんが、新しい編集画面への移行を視野に入れておくと、後々の対応がスムーズになります
以下のような点を意識しておくと、切り替えのタイミングで慌てずに済みます。

  • 使用しているプラグインの更新状況を定期的に確認する
  • ブロックエディタの基本操作を少しずつ試しておく
  • サイト運用を引き継ぐ可能性がある場合は編集方法を共有しておく

操作に慣れた画面を使い続けたい気持ちは自然なことですが、サイトを長く安定して運用するためには、無理のない範囲で新しい環境にも触れておくことが役立ちます。

プラグインを追加すればビジュアルエディタの機能はさらに広げられる

標準のビジュアルエディタでも基本的な装飾は一通りこなせますが、プラグインを活用することで、編集機能をさらに広げることができます。
ボタンの種類を増やしたり、表の作成を簡単にしたりと、用途に応じた選択肢が用意されています。
ここでは代表的な4つのプラグインを紹介します。

プラグイン名 主な特徴
Advanced Editor Tools(旧TinyMCE Advanced) ツールバーのボタンを自由にカスタマイズできるエディタ拡張プラグイン
TinyMCE Advanced 表(テーブル)の作成などビジュアルエディタの機能を拡張するプラグイン(現在はAdvanced Editor Toolsに名称変更)
Snow Monkey Editor エディタ機能を拡張するプラグインとして紹介されている
AddQuicktag メニューバーに独自の編集ボタンを追加できるプラグイン

Advanced Editor Tools(旧TinyMCE Advanced)

Advanced Editor Toolsは、ツールバーのボタンを自分で選択して配置を変更できるエディタ拡張プラグインです。
標準のツールバーでは物足りないと感じる場面で、必要な機能だけを追加できるのが魅力です。
以前は「TinyMCE Advanced」という名前で提供されており、現在はAdvanced Editor Toolsに名称変更されています。

設定画面ではドラッグ操作でボタンの配置を変更できるようになっており、普段よく使う装飾ボタンを上段にまとめておくと作業効率が上がります。
逆にほとんど使わない機能を非表示にすれば、画面がすっきりして誤操作も減らせます。

導入や設定を行う際は、現在使用しているWordPressのバージョンやテーマとの相性を確認しておくと安心です。
プラグインの詳細な機能や対応状況については、公式サイトや配布ページでの確認が役立ちます。

「TinyMCE Advanced」を検索して探す

「Advanced Editor Tools(旧TinyMCE Advanced)」を検索して探す

TinyMCE Advanced

TinyMCE Advanced(現在のAdvanced Editor Tools)は、ビジュアルエディタに表の挿入機能を追加することで知られるプラグインです。
標準のビジュアルエディタには表を挿入するボタンが用意されていないため、記事内で比較表や一覧表を使いたい場合に重宝します。

操作の流れとしては、プラグインを有効化した後にツールバーへ表関連のボタンが追加され、そこから行数や列数を指定して表を作成する形になります。
文章だけでは伝わりにくい情報を整理して見せたいときに向いている機能です。

ただし作成した表がテーマによって見た目が変わることがありますので、公開前にプレビューで確認しておくことが大切です。
表のセル幅や文字量によってはレイアウトの調整が必要になる場合もあります。

Snow Monkey Editor

Snow Monkey Editorは、ビジュアルエディタの機能を拡張するプラグインの一つとして紹介されています。
装飾のバリエーションを増やしたい場合に候補となる選択肢です。

他のエディタ拡張プラグインと同様に、導入することでツールバーの表示内容や使える装飾の幅が変わってきます。
どの機能がどこまで使えるかは提供元によって異なるため、導入を検討する際は公式サイトでの確認が欠かせません。

複数のエディタ拡張プラグインを同時に有効化すると、ボタンの表示が重複したり競合が起きたりすることがあります。
導入する際は一つずつ試しながら、自分の運用スタイルに合うものを見極めていく進め方が無理のない方法です。

「Snow Monkey Editor」を検索して探す

AddQuicktag

AddQuicktagは、ビジュアルエディタのメニューバーにカスタム編集ボタンを追加できるプラグインです。
よく使うHTMLタグや定型文をボタン化しておくことで、毎回同じ操作を繰り返す手間を省けます。

例えば、特定のスタイルを付けたボックスや注意書きの枠など、記事の中で繰り返し使う装飾がある場合に登録しておくと便利です。
ボタンをクリックするだけで挿入できるため、HTMLタグを都度入力する必要がなくなります。

設定はやや専門的な内容を含むため、最初は基本的なタグの登録から試してみると扱いやすいでしょう。
カスタマイズの幅が広いぶん、設定内容によっては意図しない表示になることもあるので、登録後は実際の投稿画面で動作を確認しておく流れが安心です。

「AddQuicktag」を検索して探す

表現力や読みやすさを高める専用プラグインで記事の完成度を上げる

見出し画像6

記事の見た目や読みやすさに特化したプラグインを取り入れると、ビジュアルエディタでできる表現の幅がぐっと広がります
装飾ボタンを増やすタイプのプラグインとは違い、こちらは「会話風の吹き出し」や「目次の自動生成」など、特定の役割に特化しているのが特徴です。
ここでは代表的な2つのプラグインを紹介します。

プラグイン名 主な役割 向いている場面
Word Balloon 会話形式の吹き出しを挿入 解説記事やQ&A形式の記事
Easy Table of Contents 目次を自動生成 長文記事や構成が複雑な記事

Word Balloon

Word Balloonは、記事の中にキャラクター付きの吹き出しを挿入できるプラグインとして紹介されています。
人物のアイコンとセリフを組み合わせることで、まるで会話が進んでいるような形で説明を展開できるのが特徴です。
文章だけでは伝わりにくいニュアンスも、吹き出しにすると読み手に届きやすくなります。

例えば、初心者向けの解説記事で「ここが分かりにくいところなんです」といった補足を吹き出しで挟むと、読み手は疑問を持ちながら読み進められます。
淡々とした説明文が続くページに変化をつけたいときにも役立つ工夫です。

ただし、吹き出しを使いすぎると本文がにぎやかになりすぎて、肝心の情報が目立たなくなることがあるため注意が必要です。
ここぞという場面に絞って使うと、記事全体のバランスが保ちやすくなります。

設定できる項目や表示できるアイコンの種類は変更されることがあるため、実際に使う際は公式サイトや配布ページで最新の情報を確認しておくと安心です。

楽天市場で「Word Balloon」を見る

Easy Table of Contents

Easy Table of Contentsは、見出しタグをもとに目次を自動で作成してくれるプラグインとして紹介されています。
見出しタグをもとに目次が自動的に作成されるため、手作業でリンクを設定する必要がありません。

長い記事ほど、読者は最初に目次で全体像を確認してから必要な部分だけ読みたいと感じるものです。
目次があることで記事の見通しが良くなり、読みたい箇所へすぐに移動できるようになります。
これは特に、H2やH3を階層的に使い分けている記事との相性が良い機能です。

表示位置や見た目のスタイルなど、細かい設定項目が用意されている点も特徴の一つです。
最初はデフォルトの設定のまま試してみて、記事の雰囲気に合わせて少しずつ調整していく進め方が扱いやすいでしょう。

目次の自動生成は便利な反面、見出しの付け方が整理されていないと目次自体が読みにくくなってしまいます。
見出しの階層構造を整えておくことが、目次を有効活用するための土台になります。
導入や設定方法の詳細は、公式サイトのページで確認しておくと確実です。

楽天市場で「Easy Table of Contents」を見る

まとめ

この記事のポイントをまとめます。

  • ビジュアルエディタは、HTML知識がなくてもWordのような感覚で記事を書ける編集画面である
  • ビジュアルエディタ・テキストエディタ・ブロックエディタは編集方法が異なるため、目的に応じて使い分けるとよい
  • 画面はタイトル欄・本文欄・ツールバー・右側設定の4つで構成されている
  • ツールバーのボタンを覚えると、太字や配置調整などの装飾作業がひととおりこなせる
  • 見出しはH2からH3へと階層を守って設定すると、内容が伝わりやすい記事になる
  • リスト・リンク・画像・動画・表は、本文中から手軽に挿入できる
  • WordやGoogleドキュメントの原稿は、テキスト形式で貼り付けると崩れにくい
  • ビジュアルエディタが表示されないときは、ユーザー設定やプラグインの競合を確認するとよい
  • プラグインを活用すると、ビジュアルエディタの機能や表現の幅をさらに広げられる場合がある

ビジュアルエディタは、専門的な知識がなくても直感的に記事を作成できる心強い機能として知られています。
見た目を確認しながら文章を整えられるので、初めてWordPressに触れる方でも取り組みやすいのではないでしょうか。

見出しの階層やツールバーの使い方など、基本の操作を一つひとつ押さえていくことで、記事全体の読みやすさは着実に整っていきます。
慣れないうちは難しく感じても、少しずつ触れていくうちに自然と手が動くようになっていくものです。

もし途中でエディタが表示されなかったり、思うように装飾できなかったりする場合は、設定の見直しやプラグインの活用でも解決できることがあります。
焦らず一つずつ確認していけば、きっと解決の糸口が見つかるはずです。

この記事で紹介した基本の操作を参考にしながら、まずは気軽に投稿画面を開いてみてください。
実際に触れてみることが、ビジュアルエディタに慣れていくいちばんの近道になるでしょう。

タイトルとURLをコピーしました