この記事では、WordPressの投稿・記事編集に利用する、クラシックエディターの操作方法について説明しています。
クラシックエディターとブロックエディターの事前知識はこちらの動画から
クラシックエディターの操作説明はこちら
もくじ
WordPressで記事を入稿(投稿)
記事を書くには「投稿画面」へ移動
ワードプレスの管理画面にログインすると、下の画像のように「ダッシュボード」の画面になりますので、赤枠内の「投稿」にマウスを乗せて表示された「新規追加」をクリックし「投稿ページ(記事投稿)」に移動します。
![WordPressブロックエディターの使い方1](https://solabotschool.com/wp-content/uploads/2021/07/c4a3c2c2f1303bdf4836fe8dfeae7823-1024x461.png)
タイトルを書く
投稿ページに移動すると、下の画像のような画面が表示されるので、赤枠内にタイトルを書いていきます。
![WordPressブロックエディターの使い方2](https://solabotschool.com/wp-content/uploads/2021/07/b3608fa96201e7d402ed0e8eab75c58c-1024x463.jpg)
グーグル検索したときに全表示させるのは35文字内におさえる必要がありますので、チェックしておきましょう。
見出し(h2~h4)を作る
タイトルの下にある白い枠内に本文を記載していきます。
![WordPressブロックエディターの使い方3](https://solabotschool.com/wp-content/uploads/2021/07/3c2a4d3f8b0f46e396ba265773398c50-1024x463.jpg)
見出しを作るときは、まず見出しとなる文字を用意します。
![WordPressブロックエディターの使い方4](https://solabotschool.com/wp-content/uploads/2021/07/c69998767662a47f21d607236c68a1e5-1024x463.jpg)
入力した文章のどこかにカーソルがあると、そのカーソルがあるブロックの装飾を行うためのツールバーが文章上部に表示されます。
![WordPressブロックエディターの使い方5](https://solabotschool.com/wp-content/uploads/2021/07/81e04acb87686c9e2f2d4bc22e43987c-1024x463.jpg)
装飾用のツールバーから一番左のボタンをクリックすると、文章を他のブロックに変換するメニューが表示されます。
その中から、「見出し」をクリックすると、文章が見出しに変換されます。
![WordPressブロックエディターの使い方6](https://solabotschool.com/wp-content/uploads/2021/07/f91fa536893e5ee8078d9d47253d8551-1024x463.jpg)
初期状態では、見出しの種類がH2の状態になっています。
![WordPressブロックエディターの使い方7](https://solabotschool.com/wp-content/uploads/2021/07/363a5e49efbfc3f4080eb5ac4f5115b5-1024x463.jpg)
- 【見出し1】・・・タイトル用(本文中には使用しません)
- 【見出し2】・・・中見出し(いわゆる見出し)に使用
- 【見出し3~6】・・・小見出しに使用
「見出し1」は記事タイトルのみに使用する決まりがあるので、本文入力時に使用してはいけません。
記事タイトルは自動的に「見出し1」が設定されるので何もする必要はありません。
その為、記事の執筆は「見出し2」以降の見出しをつけてください。
見出しのレベルを変更したい場合は、ツールバーから「H2」と表示された部分をクリックします。
![WordPressブロックエディターの使い方8](https://solabotschool.com/wp-content/uploads/2021/07/245733ea4b24772d9ae23d32a0f5a79b-1024x463.jpg)
さらに表示されたメニューから、使いたい見出しレベルを選択することができます。
![WordPressブロックエディターの使い方9](https://solabotschool.com/wp-content/uploads/2021/07/667ead79b29de6bdf08f4401e2f22b9a-1024x463.jpg)
見出しを作成したら、次に、見出しの内容となる文章を入力していきます。
本文入力欄は1つひとつの「ブロック」(かたまり)単位で構成していきます。
先ほどは、見出しという1つのブロックを作成した事となります。
![WordPressブロックエディターの使い方10](https://solabotschool.com/wp-content/uploads/2021/07/b2580ff1c6956054cf028d6e2e30068d-1024x463.jpg)
見出し用のブロックや、文章用の段落にするブロック、画像のためのブロックなど、用途ごとにブロックを作って記事を作成していきます。
使い方は、「エンターキー」を押して、とにかくブロックを増やし、そのブロックを何に使うか後で指定する方法と、「+(プラスマーク)」から、何のブロックを増やすか指定する方法の2種類となります。
![WordPressブロックエディターの使い方11](https://solabotschool.com/wp-content/uploads/2021/07/a41f81984cf099a1e31974bb4674ffe2-1024x463.jpg)
「エンターキー」が先でも「+(プラスマーク)」でも、どちらにしても、「+(プラスマーク)」でブロックの種類を決めるメニューが表示されます。
![WordPressブロックエディターの使い方12](https://solabotschool.com/wp-content/uploads/2021/07/3b555dca99d5f6fcf2d15e713bc4cca2-1024x463.jpg)
使いたいブロックの種類を選んで使用してください。
見出しの内容となる文章を入力していくには、ブロックを「段落」にして入力します。
![WordPressブロックエディターの使い方13](https://solabotschool.com/wp-content/uploads/2021/07/39f4e92f808be7d2cd62dfa27270a2cb-1024x463.jpg)
※エンターキーでブロックを作成した場合、強制的に段落のブロックとなります。
見出しが再度必要になったら同様の手順で作成します。
本文作成のポイント
先に見出しを用意します。
まず、見出しに必要な文字を入力しておきます。
![WordPressブロックエディターの使い方14](https://solabotschool.com/wp-content/uploads/2021/07/c2eb127ecdc97bc72a1807df4a02ef35-1024x463.jpg)
それぞれを、見出しに変換します。
![WordPressブロックエディターの使い方15](https://solabotschool.com/wp-content/uploads/2021/07/70ac6330c8b2361e3f210920af4017b0-1-1024x458.jpg)
用意した文字を全て見出しに変換します。
![WordPressブロックエディターの使い方16](https://solabotschool.com/wp-content/uploads/2021/07/23a807c9515565eb5b5272f2398a2e6f-1024x463.jpg)
見出しを用意したら、それに合うように文章を入力していきます。
まずは、文章用のブロックを追加したいので、見出しと見出しの間に表示される「+(プラスマーク)」をクリックします。
![WordPressブロックエディターの使い方17](https://solabotschool.com/wp-content/uploads/2021/07/5d184771ac2f7baed9d1fa5e172be153-1024x463.jpg)
ブロックの種類が選択できるメニューが表示されるので、「段落」を選択します。
![WordPressブロックエディターの使い方18](https://solabotschool.com/wp-content/uploads/2021/07/b4ff44b2547f6ddbf859a7286947674b-1024x463.jpg)
新しく増えた行に文章を入力してください。
文章を改行したい場合は、「Shiftキー」を押しながら「エンターキー」を押します。
エンターキーのみだと、新しい文章のブロックを作成することができます。
![WordPressブロックエディターの使い方19](https://solabotschool.com/wp-content/uploads/2021/07/b7f5f969ce8be052cc6f7f15269763fa-1024x463.jpg)
同様にして他の文章も見出しに合わせて入力していきましょう。
記事に画像を入れる
記事内に画像を貼り付けていきましょう。画像を挿入する場合は、挿入したい場所にブロックを増やしていきます。
まずは、画像を挿入したい行の中央にカーソルを移動すると、「+(プラスマーク)」が表示されるので、クリックします。
![WordPressブロックエディターの使い方20](https://solabotschool.com/wp-content/uploads/2021/07/4b8d34ee9906d4a91b60c7d9bda01255-1024x463.jpg)
表示されたブロックの種類選択メニューから「画像」を選択します。
![WordPressブロックエディターの使い方21](https://solabotschool.com/wp-content/uploads/2021/07/98d5b2220c97d887fba7ebf0cd0bf3c6-1024x463.jpg)
すると、指定した場所に、画像用のブロックが増えるので、「アップロード」をクリックします。
![WordPressブロックエディターの使い方22](https://solabotschool.com/wp-content/uploads/2021/07/ec58c7e5e9f410295b7ca94ddbe7aeed-1024x463.jpg)
次に、パソコン内部の画像が選択できるようになるので、必要な画像をクリックして選択し、そのまま、「開く」ボタンをクリックします。
![WordPressブロックエディターの使い方23](https://solabotschool.com/wp-content/uploads/2021/07/7b35ce92998c0797c4f9efdda50e0293-1024x463.jpg)
画像を選択して開くと、先ほど用意した画像ブロックに画像が表示されます。
![WordPressブロックエディターの使い方24](https://solabotschool.com/wp-content/uploads/2021/07/8e4f75c2f0cbb1a4fd259e09eac97099-1024x463.jpg)
さらに、画像をクリックして選択中は、画像上部に画像編集用のツールバーが表示されます。
![WordPressブロックエディターの使い方25](https://solabotschool.com/wp-content/uploads/2021/07/b81c4e72c1bc8b014dd002a22d0200c6-1024x463.jpg)
ツールバーにある「左寄せ」などを行うことで、画像を任意の方向に寄せることができます。
![WordPressブロックエディターの使い方26](https://solabotschool.com/wp-content/uploads/2021/07/86c00fcb25edf5806b74d32d3813b558-1024x463.jpg)
下の画像では、左寄せにした際の状態で、画像が左に、文章が右に回りこむように配置されます。
![WordPressブロックエディターの使い方27](https://solabotschool.com/wp-content/uploads/2021/07/ca67188286c2098361d7b586c40002e3-1024x463.jpg)
あくまでも、記事編集画面のイメージなので、実際のWEBページ上の表示とは多少異なる場合があります。
その為、実際の状態を見るには、記事編集画面の右上にある「プレビュー」をクリックします。
![WordPressブロックエディターの使い方28](https://solabotschool.com/wp-content/uploads/2021/07/b8b39e428f348a1bbd25193c5b161888-1024x461.jpg)
次に、プレビューしたいデバイスサイズを選択するためのメニューが表示されるので、見たい画面サイズを選択して「新しいタブでプレビュー」をクリックします。
![WordPressブロックエディターの使い方29](https://solabotschool.com/wp-content/uploads/2021/07/2370ab793d8bc518abc92679e28a38c1-1024x460.jpg)
すると、新しいタブで実際のWEBページでの表示を見ることができるので、確認して編集画面に戻ってください。
下の画像が、実際のWEBページでの表示で、記事編集画面と表示できる幅などが違うことから、多少の誤差が発生しています。
![WordPressブロックエディターの使い方30](https://solabotschool.com/wp-content/uploads/2021/07/9223171703900b461f6aa4dc15dee5ec-1024x460.jpg)
プレビューページが完成後のイメージになるので、配置などはプレビューから確認しましょう。
再度編集する際はタブを記事編集画面に切り替えてください。
「中央揃え」だと、画像の横に文章は表示されず、下のようになります。
![WordPressブロックエディターの使い方31](https://solabotschool.com/wp-content/uploads/2021/07/de5ebdcce37e193bd100199ad18c290a-1024x460.jpg)
さらに、「右寄せ」の場合は、画像が右に寄って、文章が左に回りこむ形になります。
![WordPressブロックエディターの使い方32](https://solabotschool.com/wp-content/uploads/2021/07/d2941d80de46f33db1781d84e5e4009b-1024x460.jpg)
画像には「代替テキスト」を追加することができます。
代替テキストは該当する画像をクリックして選択した状態で、画面右の「代替テキスト」欄に入力します。
![WordPressブロックエディターの使い方33](https://solabotschool.com/wp-content/uploads/2021/07/84a6d215d9705d567b8a8315545d31a7-1024x463.jpg)
「代替テキスト」は画像がうまく表示されなかったときに代わりにコメントが表示されるものです。
検索結果の順位に有利に働くものになるので、「見出しと同じ文章」か「画像の意味がわかる文章」を簡単に書き入れましょう。
カテゴリー選定
タイトル → 見出し → 記事 → 画像挿入の順に書いたら、記事の「カテゴリー」を決めます。
カテゴリーを設定するには、画面右側のメニューを「ブロック」から「文書」に切り替える必要があります。
![WordPressブロックエディターの使い方34](https://solabotschool.com/wp-content/uploads/2021/07/e2a62757834a927b62ca287c3c263556-1024x460.jpg)
右側のメニューを「文書」タブに切り替えたら、その中から「カテゴリー」をクリックして、記事に合うカテゴリーを1つ選択してください。
![WordPressブロックエディターの使い方35](https://solabotschool.com/wp-content/uploads/2021/07/b5e41bf9b3fe82b5bd005be3f237eb13-1024x460.jpg)
「カテゴリー」はあらかじめクライアントが複数用意しているはずなのでチェックを入れればOKです。
アイキャッチ画像を決める
アイキャッチ画像とは、ブログの記事冒頭や記事一覧ページに配置されているサムネイル画像です。
![WordPressブロックエディターの使い方36](https://solabotschool.com/wp-content/uploads/2021/07/86fce96e64ff52cae8cebafa31498d5c-1-1024x577.jpg)
設定するには、画面右側のメニューが「文書」タブの状態で、その中にある「アイキャッチ」をクリックします。
![WordPressブロックエディターの使い方37](https://solabotschool.com/wp-content/uploads/2021/07/5db926298f8fab774303ce6773fd7820-1024x460.jpg)
さらに、「アイキャッチ画像を設定」をクリックします。
![WordPressブロックエディターの使い方38](https://solabotschool.com/wp-content/uploads/2021/07/48fe1c7d27b80e1d67253751ac4349d0-1024x460.jpg)
すると、WordPress内の画像保管庫である「メディアライブラリ」が表示されます。
画像をアップロードするには、画面左上の「ファイルをアップロード」に切り替えます。
![WordPressブロックエディターの使い方39](https://solabotschool.com/wp-content/uploads/2021/07/10ff759d425c139eee5dd39428268fea-1024x460.jpg)
次に、画面中央にある「ファイルを選択」をクリックします。
![WordPressブロックエディターの使い方40](https://solabotschool.com/wp-content/uploads/2021/07/2d0c0853052bb9594260ed981a34c41d-1024x460.jpg)
アイキャッチにしたい画像を選択して、「開く」をクリックします。
![WordPressブロックエディターの使い方41](https://solabotschool.com/wp-content/uploads/2021/07/acec5a1f1dc7e921ca807067f19970b9-1024x460.jpg)
すると、選択した画像が、メディアライブラリに追加されます。
![WordPressブロックエディターの使い方42](https://solabotschool.com/wp-content/uploads/2021/07/1b0d9ec50b4bd2d890c5017bc02071bb-1024x460.jpg)
画像挿入時と同じように、代替テキストを入力したら、画面右下の「アイキャッチ画像を設定」をクリックします。
![WordPressブロックエディターの使い方43](https://solabotschool.com/wp-content/uploads/2021/07/738bca3ba614cb4b9466f608abe39393-1024x460.jpg)
アイキャッチ画像が設定されると、記事編集画面右下に設定した画像が表示されます。
![WordPressブロックエディターの使い方44](https://solabotschool.com/wp-content/uploads/2021/07/65cd95941b821e1ec4fff10fa8cf18af-1024x460.jpg)
プレビューで記事をチェックする
記事ができたらプレビューでチェックしてみましょう。
記事編集画面右上の「プレビュー」をクリックします。
![WordPressブロックエディターの使い方45](https://solabotschool.com/wp-content/uploads/2021/07/762d03d4811ecca1320e2489a1ceea21-1024x460.jpg)
次に、プレビューしたいデバイスサイズを選択するためのメニューが表示されるので、見たい画面サイズを選択して「新しいタブでプレビュー」をクリックします。
![WordPressブロックエディターの使い方46](https://solabotschool.com/wp-content/uploads/2021/07/88bd42ffd15a23254d4b217b567c5a8d-1024x460.jpg)
公開はプレビューなどでしっかり確認できるまで押さないように注意しましょう。
プレビューすると、新しいタブで実際のWEBページ上の表示を確認することができます。
![WordPressブロックエディターの使い方47](https://solabotschool.com/wp-content/uploads/2021/07/2288021717ec441bd81fcd9c32b635dc-1024x460.jpg)
手直しが必要であれば編集画面のタブに戻って編集します。
下書き保存する
記事ができたら編集画面の右上にある「下書き保存」をクリックします。
※「公開」をクリックするとWEB上に記事が公開されてしまうので注意してください!
![WordPressブロックエディターの使い方48](https://solabotschool.com/wp-content/uploads/2021/07/fe0bd651c7335380fe4204601a559e47-1024x460.jpg)
記事の公開
記事を編集し、プレビューなどで最終確認までできたら記事を公開しましょう。
公開した段階で、その記事は全世界で閲覧可能となります。
しっかりと中身の確認を行ってから公開しましょう。