【WPの超キホン】Classic Editorを使った投稿・装飾方法

現在の「ブロックエディター」という編集画面がデフォルトになったのは、2018年末にリリースされたWordPress(ワードプレス)5.0から。比較的最近のため、それ以前の仕様に慣れているライターが多いこともあり、最新の「ブロックエディター」は少し使いにくいという評判が未だにあります。

そんな人のために開発されたのが「Classic Editor」というプラグイン。これを導入することで従来の編集画面に戻すことができます。

現在の「ブロックエディター」がしっくりこない…と感じている初心者ライターさんにとっても、Wordで文章を書くように扱える従来のエディターの方が使い勝手がいいかもしれません。

「Classic Editor」を使用した投稿方法

プラグインのインストールが完了したら、「有効化」をしましょう。
プラグインインストール画面


プラグインのインストール方法はこちらの記事を参考にしてください。

WordPressの使い方を調べていると、よく目にするのが「プラグイン」という言葉。 この記事では...


そして左の「投稿」タブ「新規追加」を選択すると、以下のように画面が切り替わります。
新規追加

タイトルを追加する

タイトルは記事の顔となるためとても重要です。一番上の枠に入力しましょう。
タイトル

本文を書く・装飾する

本文欄は、以下の2つの編集モードから1つを選んで書き進めていきます。

  • ビジュアルエディター
  • テキストエディター


ビジュアルエディターとテキストエディターの違いについては、後述します。

今回は初心者でも直感的に編集しやすいビジュアルエディターで、本文を入力していきます。

【見出しをつける】

見出しとは

見出しは、各章ごとのタイトルのようなものです。

記事に見出しを付けることは、とても重要です。記事全体が整い見やすくなるだけでなく、検索順位を上げて多くの人に読んでもらうためにも必要な工夫の一つです。

見出し1は、記事全体の大見出しとなる部分です。「タイトル」は記事がどんな内容なのかを検索エンジンが読み取る際に重要であるのに対して、「見出し1」は主にページを開いた読み手に対してどんな記事なのかをより具体的に伝えるものです。

見出し2から見出し6は、各章の要点をまとめたタイトルのようなものですが、以下のように包含関係にある必要があります。
包含関係の図

以下が実際に文章で表した際の具体例です。
見出しの例

見出しのつけ方

本文入力欄左上の白枠をクリックしましょう。
本文入力欄左上の白枠

見出しの種類が現れるので、入力したい見出しを選択しましょう。
見出しの種類が表示される

選択されていることを確認し、文字を入力しましょう。
見出しが選択された状態で文字を入力

【リストを追加する】

リストとは

リストとは、箇条書きのことです。

例えば、以下のようなレシピサイトであれば、準備する材料等を箇条書きにすると見やすいです。
リスト例

リスト追加の仕方

リストには、黒マルで表す箇条書き(左)と、番号付きの箇条書(右)があります。
黒マルで表す箇条書き(左)と、番号付きの箇条書(右)

黒マルのリストボタンが選択された状態で文字を入力すると、箇条書きができます。
黒マルのリストボタン

次に、番号付きリストが選択された状態で文字を入力してみましょう。
編集画面では番号が見えない場合があります。
番号付きリスト

プレビュー画面で確認をすると、しっかり番号付きの箇条書きで表現されています。
プレビュー画面で確認

【文字を太字にする】

ツールバー上のBの文字を選択しましょう。
Bの文字を選択

文字を入力すると、太字になります。
普通文字と太字の比較

【文字を斜体(イタリック体)にする】

Iの文字を選択しましょう。
Iの文字を選択

文字を入力すると斜体(イタリック体)になります。
普通文字とイタリック体の比較

【文字に色を付ける】

ツールバー上のAの文字を選択しましょう。Aの下線が文字の色を表しています。
Aの文字を選択

好きな色を選びましょう。
カラーパネル

文字を入力すると、色が付いた文字が反映されます。
色付き文字と普通文字の比較

公開する(下書き保存・プレビュー)

ページ右上に「下書きとして保存」「プレビュー」「公開」というボタンがあります。

ある程度記事が完成したら、「下書きとして保存」をしておきましょう。記事は一時保存されますが、まだ公開はされません。

「プレビュー」のボタンを押すと、公開後に記事がどのように表示されるかを見ることができます。編集画面上では、レイアウトの崩れや誤字など意外と見落としがちな部分が多いため、必ず公開前にプレビュー画面で確認しましょう。

不備がないことが確認できたら、「公開」を押して正式に記事を公開しましょう。
「下書きとして保存」「プレビュー」「公開」

【プラス】もっと記事を充実させたいあなたに

以上では、超キホンの投稿方法をご紹介しました。

「もっと記事を豊かにしたい」「もう少し見やすいページにしたい」と考えている方は、以下の記事を参考にされてください。

【記事内に画像を追加したい方】

WordPressの記事をより見やすくするために欠かせないのが、画像の挿入です。こちらの記事では、記...

【記事にアイキャッチを設定したい方】

https://pulpfingers.com/681

【記事が増えてきたのでカテゴリー分けをしたい方】

この記事では、WordPressの編集画面別のカテゴリー設定方法を、初心者さんにもわかりやすく説明し...

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

ここではビジュアルエディターとテキストエディターの違いを説明していきます。
編集画面の切り替えは、本文入力欄の右上のタブで行います。
ビジュアルエディターとテキストエディターの切り替え

ビジュアルエディター

ビジュアルエディターでは、直接レイアウトを見て確認しながら書き進めていくことができます。Word感覚で書けるので、誰にでも分かりやすい編集方法です。

装飾方法などは、前章の【2】本文を書く・装飾するにて詳述しています。

向いているサイト

  • ブログ(他のブログから移行した人)
  • 凝った装飾を必要としないサイト

メリット

  • HTMLやCSSの知識が必要ない
  • 完成イメージを把握しながら書き進められる

デメリット

  • HTMLやCSSを使用しないため表現に限りがある

テキストエディター

テキストエディターでは、HTMLコードを使って記事を作成していきます。

頻繁に使うタグが上部に用意されていますが、これらのタグがどういう意味を持つのか分からなければ使いづらいです。

これらのタグの他にも種類があるため、それを覚えたり、この仕様に慣れたりするのは時間を要するでしょう。
テキストエディター画面
しかしその分レイアウトの幅が広いため、以後サイトをよりよくしていきたいと考えている方は、テキストエディターでの編集方法に徐々に慣れていくことをおすすめします。

向いているサイト

  • アフィリエイトサイト
  • コンテンツ型サイト

メリット

  • 知識があればどんな表現もできる
  • 検索順位を上げやすいレイアウトなどがカスタマイズしやすい

デメリット

  • HTMLやCSSの知識が必要
  • タグの記載ミスがあった場合に見つけるのに時間がかかる