WordPress 5.0以降では標準でGutenbergと呼ばれるエディタが搭載されました。しかし、Gutenbergは人によっては使いにくいと感じる人もいるようです。
そこで、この記事では旧エディタで編集できるように、Classic Editorをインストールする手順を案内します。
Gutenbergエディタとは何か
以下がGutenbergエディタです。ブロックとよばれる要素のかたまりを追加していくことで編集します。
![Gutenbergエディタ](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h45_45.png)
ブログのコンテンツの要素をブロックとして組み合わせ編集を行う必要があるため、文章を入力してから整形するのが好みの筆者は、現時点では自分の使い方には向いていないと感じました。
Classic Editorプラグインとは何か
Classic Editorプラグインとは旧エディタでの編集を可能にするWordPressプラグインです。
![Classic Editor](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_04.png)
Classic Editorプラグインのインストール方法
それではWordPressプラグインのClassic Editorをインストールしましょう。
WordPress管理画面左のメニューから「プラグイン」をクリックし、「新規追加」をクリックします。
![Classic Editorプラグインのインストール](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h10_38-1.png)
検索ボックスから「Classic Editor」と入力し、検索を実行します。検索結果にClassic Editorプラグインが表示されますので、「今すぐインストール」をクリックします。
![Classic Editorプラグインのインストール](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h11_19-1.png)
これで、Classic Editorプラグインのインストールが完了しました。
Classic Editorを使った記事投稿の方法
それでは実際にClassic Editorを使って簡単な記事投稿の方法を勉強していきましょう。
記事の新規追加
左のメニューから「投稿」をクリックし、「新規追加」をクリックします。
![新規投稿](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h11_55.png)
新規記事投稿画面が表示されました。
![新規記事投稿画面](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h12_08.png)
記事タイトルの追加
記事タイトルを入力します。
![記事タイトルの追加](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h12_53.png)
本文の入力
本文の入力欄に何か文字を入力してみます。これが記事の本文になります。
![本文の入力](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h13_33.png)
見出しの作成
入力欄に見出し1~6までテキストを入力します。
![見出しの入力](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h14_03.png)
ツールバーの段落ボタンをクリックし、続けて表示されたプルダウンから見出し1をクリックします。
![見出しの設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h14_21.png)
見出し1のテキストに見出し1の書体が設定されました。
![見出し1の設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h14_28.png)
同じように見出し2~6のテキストにも、それぞれ見出し2~6の見出し設定をしてみましょう。以下のようにそれぞれの見出しが設定されます。
![見出し2~6の設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h15_35.png)
プレビューによる確認
それではここまで編集したら、プレビューをクリックして実際の表示を確認してみましょう。
![プレビューをクリック](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h15_35-コピー.png)
以下のようにプレビューが確認できたら成功です。
![プレビュー確認](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h15_45.png)
文字を太字に変更
太字にしたい文字を入力します。
![太字にしたい文字の入力](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h16_24.png)
太字にしたい文字を選択肢、ツールバーから太字のボタンをクリックします。
文字が太字になることが確認できました。
![文字が太字になった](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_04-1.png)
ハイパーリンクの挿入
次にハイパーリンクを挿入してみましょう。ハイパーリンクとは他のウェブページへのリンクのことです。
ハイパーリンクを設定したい文字列を入力します。以下では、Yahoo Japan!と入力をします。
![ハイパーリンクの文字を入力](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_04-コピー-1.png)
Yahoo Japan!の文字を選択した状態でリンクの挿入アイコンをクリックします。
![ハイパーリンクの設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_57.png)
リンクのアドレスを入力し、歯車のアイコンをクリックします。
![リンクアドレスを設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_26.png)
表示されたリンクの挿入/編集画面からリンクを新しいタブで開くにチェックを入れます。これにチェックを入れておくと、リンクをクリックした時に、リンク先のページが新しいタブで開くようになります。
設定したら更新ボタンをクリックします。
![新しいタブで開く設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h17_41.png)
引用を挿入
他のページなどから引用したテキストを挿入してみましょう。引用する際は、引用元を示すなど、著作権について適切に扱うようにしてください。
Wikipediaから適当な文章を選択してコピーしてきます。
![引用したいテキストをコピーする](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h20_08.png)
コピーしたテキストをエディタに貼り付けます。
![エディタにテキストを貼り付け](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h20_51.png)
テキストが選択されている状態で引用ボタンをクリックします。
![引用の設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_04.png)
テキストが引用表示に変更されました。
![引用が設定された](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_09.png)
プレビューボタンを押して現在までの表示を確認してみましょう。
![プレビューをクリック](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_16.png)
リンク表示や引用表示が確認できました。
![引用のプレビュー](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_23.png)
リストの挿入
リストは箇条書きともいいます。複数の項目をまとめて一覧にする時に使います。
エディタ条に、リスト1、リスト2、リスト3と入力します。
![箇条書き用の文章の挿入](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_54.png)
入力したテキストを選択した状態で番号なしリストアイコンをクリックします。
![箇条書きの設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h21_59.png)
同様に番号付きリスト1、番号付きリスト2、番号付きリスト3と入力します。これらを選択した状態で番号付きリストアイコンをクリックします。
![箇条書きの設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h22_27.png)
番号なしリストと番号付きリストを作成することが出来ました。
![箇条書きが挿入された](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h22_38.png)
画像の挿入
ブログ記事内に画像を挿入する方法です。
メディア追加をクリックします。
![メディア追加ボタンをクリック](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h24_57.png)
もしメディアライブラリタブが選択されている状態の場合、ファイルをアップロードタブをクリックします。
![メディアを追加](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h25_06.png)
ファイルを選択ボタンを押すことでパソコンのフォルダを選択する事もできるのですが、すでに開いている画像フォルダからドラッグアンドドロップする方が効率が良いので、そちらの方法を紹介します。
画像ファイルの入っているフォルダで画像を選択し、WordPressにドラッグすると、WordPressのページのメッセージが、画面のファイルをドロップしてアップロード に変化します。
この状態で、ドロップすることで、画像ファイルをメディアライブラリに追加できます。
代替テキストに画像ファイルが表す説明を記載します。
![代替テキストの設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h28_41.png)
サクラの画像がエディタに追加されました。
![桜の画像が追加された](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h28_47.png)
YouTubeリンクの挿入
YouTubeの動画も簡単に挿入することが出来ます。
挿入したいYouTubeの動画のページを開き、共有ボタンをクリックします。
![YouTube動画で共有ボタンをクリックする](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h31_25.png)
リンクが表示されるので、コピーボタンをクリックします。
![動画のリンクのコピー](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_15h08_49.png)
エディター上で、先程のURLをクリップボードから貼り付けます。
![適当な位置で貼り付ける](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_15h09_38.png)
YouTubeの動画が貼り付けられました。
![YouTubeの動画が貼り付けられた](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_15h10_22.png)
アイキャッチ画像の設定
アイキャッチ画像とは聞き慣れないかもしれませんが、ブログのトップに表示される画像で、コンテンツの記事のサムネイルにもなります。その名の通り読み手の目を引くことを目的にした画像です。ブログ記事をひと目で表す画像にすると良いでしょう。
エディタ右下にあるアイキャッチ画像を設定リンクをクリックします。
![アイキャッチ画像を設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_15h22_51.png)
ファイルをアップロードタブをクリックします。
![ファイルをアップロードをクリック](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h38_36.png)
ファイルを選択ボタンをクリックします。
![ファイルをアップロード](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h39_56.png)
パソコンのフォルダからアイキャッチ画像に指定したい画像を選択し開くボタンをクリックします。
![ファイルを選択](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h40_09.png)
代替テキストを入力し、アイキャッチ画像を設定ボタンをクリックします。
![アイキャッチ画像に設定](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_10h41_05-1.png)
エディタ右下にアイキャッチ画像が設定されたことが確認できました。
![アイキャッチ画像が設定された](http://lifehack.world/wp-content/uploads/2020/05/2020-05-17_15h35_29.png)
プレビューでアイキャッチ画像が設定されていることを確認します。
まとめ
本記事を通して、Gutenbergエディタから、Classic Editorをインストールし、記事を書くための基本的な操作を学ぶことができました。Classic Editorを使うことで、より効率的な記事編集が可能です。ぜひ皆さんもClassic Editorを活用し、多くのブログを記事執筆にお役立てください。