【図で解説】WordPress「ブロックエディター」の使い方マニュアル！投稿・編集方法も！

WordPress（ワードプレス）とは、HTMLなどのWeb関連技術の知識が無くてもWebサイトやブログなどを作成できる、無料のソフトウェアです。

全世界で公開されているWebサイトのうち、約25％以上のサイトはWordPressを使用して作成されていると言われており、非常に人気の高いソフトウェアです。
特に「HTMLなどの知識がなくても記事を投稿できること」も利点であり、さらに「Webサイトの見た目を変える」「トップページに新着情報やニュースリリースを表示する」などのカスタマイズが可能なことも人気の理由として挙げられています。

今回は、WordPressでも頻繁に使用される「投稿機能」、ならびにWordPressで新しく導入された「ブロックエディター」について解説いたします。

※導入にあたっては、事前にサーバーやドメインの準備、サーバーへのWordPressのインストールなどが必要です。

WordPressで新しく記事を投稿するには？

記事を投稿する前に、最初に記事の投稿画面に移動してみましょう。
WordPressにログインすると、最初に以下のような画面が表示されていると思います。これが「管理画面」です。

この管理画面の左端にあるメニューから「投稿」→「新規追加」と選択してください。（この左端のメニューは、後述のブロックエディターの使用時以外、基本的にいつでもアクセスすることが可能です。）

すると、以下のような画面が表示されます。これが「ブロックエディター（Gutenberg）」です。 この画面が表示されれば準備完了です。

※上記はWordPressのバージョン5.9でWordPressのデフォルトテーマ「Twenty Twenty-Two」を設定している場合の画面です。適用中のバージョンやWordPressテーマによって、画面のデザインが異なる場合があります。

「ブロックエディター（Gutenberg）」とは、2018年12月に公開されたWordPressのバージョン5.0以降に導入されている、デフォルトで使用可能なエディタです。この画面から記事のタイトルや本文を入力したり、記事の本文の途中に画像を入れたり、記事の投稿日時などの設置をすることが簡単に出来るようになっております。

なお、先程の管理画面に戻る場合は、画面左上にあるWordPressのアイコンをクリックすると、管理画面に戻ることが出来ます。

「ブロックエディター」を使って記事を作成してみよう！

それでは、実際にブロックエディターを使って記事を投稿してみましょう。

記事のタイトル・本文を入力する

最初に記事のタイトルを入力します。
ブロックエディターでは「タイトルを追加」と薄い文字色で書かれたテキストをクリックすることで、タイトルを入力できるようになります。 同様に、本文を入力する場合は「ブロックを選択するには「/」を入力」と薄い文字色で書かれたテキストをクリックすることで、本文を入力できるようになります。

ブロックを追加する

では、見出しの追加や画像の挿入を行う場合はどのようにすれば良いでしょうか？

記事の本文には見出し、本文、画像などといった要素がありますが、ブロックエディターではそれらの要素を、それぞれ1つの「ブロック」して数え、複数のブロックで1つの記事全体を構成していきます。
記事の作成にあたっては、この「ブロック」を知ることが必須となります。

それでは実際にブロックを追加してみましょう。
まずは、ブロックエディターの画面の上部のツールバーに、青色で四角の形の「＋」ボタンがあるので、それをクリックしてみましょう。

すると、画面の左側にブロックの種類の一覧が表示されます。この中から任意のブロックの種類をクリックすることで、ブロックが追加されます。

例えば、ブロック一覧の中にある「見出し」をクリックすると、見出しの「ブロック」が追加されることになります。

同様に、「画像」を選択した場合は画像のブロックが追加されます。「アップロード」「メディアライブラリ」「URLから挿入」の3つのメニューが表示され、いずれかを選択することで画像を追加出来ます。

なお、ブロックを追加した後は左側メニューが非表示になるので、先程の「＋」ボタンから再度表示して、その都度新しいブロックを追加してください。

ブロックの種類変更や並び替えを行う

ブロックの追加が完了したあとも、既に追加したブロックに対して各種変更を行うことが出来ます。
まずは追加したブロックの中から、任意のブロックをクリックしてみましょう。

すると、選択したブロックの上に「ブロックメニュー」が表示されます。ブロックに対する各種変更はここで行うことが出来ます。
※上記は通常のテキストブロックを選択した場合のブロックメニューであり、選択した種類のブロックによってメニュー内容が変わることがあります。

例えば、ブロックメニューの一番左のメニューをクリックすると、ブロックの種類を変更することが出来ます。クリックすると、先程のブロック一覧のようなメニューが表示され、ブロックの種類の変更が行えます。

また、左から3番目にある上矢印・下矢印をクリックすると、ブロックの並び順を入れ替えることが可能です。

ブロックの複製や削除、再利用を行う

先程のブロックメニューの一番右にある三点リーダーをクリックすると、詳細設定のメニューが表示されます。ブロックの複製や削除などを行いたい場合は、ここから行うことが出来ます。

また、詳細メニュー内にある「再利用ブロックに追加」を選択すると、他の記事を作成する時にそのブロックを使用することが可能になります。
「再利用ブロックに追加」をクリックした後、「再利用ブロックを作成」のポップアップが表示されるため、ここでブロックの名前を入力し「保存」をクリックしてください。

その後、最初にブロックを追加した時と同じ上部ツールバーの「＋」ボタンをクリックし、表示されるメニュー内の「再利用可能」タブをクリックすると、先程保存したブロックが表示され、他の記事でも使用することが可能になります。

投稿の設定を行ってみよう！

さて、ひととおり記事の作成が完了したら、いよいよ投稿の準備です。
まずはブロックエディターの右上にある歯車のアイコンをクリックしましょう。

すると、画面の右側からツールバーが現れ、「投稿」タブの内容が表示されます。ここから記事の公開やカテゴリー、タグ、アイキャッチなど、記事全体の設定を行うことが出来ます。

※なお、このタイミングで任意のブロックをクリックすると、「ブロック」タブが表示され、ブロックごとの設定を行えるようになります。例えばテキストブロックの場合は「テキストサイズ」や「文字色」などといったような設定が可能です。

パーマリンクの設定を行う

「パーマリンク」とは、記事ごとに設定されるURLの末尾の部分のことを指します。
パーマリンクの設定を行う場合、右側のメニューバーから「パーマリンク」を選択し、この中にある「URLスラッグ」からパーマリンクを記入します（ただし、WordPressの設定によってはパーマリンクを編集できない場合があります）

この時、設定するパーマリンクは必ず「半角の英語表記」に変更するようにしましょう。
日本語のままパーマリンクを設定してしまうと、いわゆる「文字化け」が発生してしまいます。

【例：パーマリンクを「新しい記事タイトル」と日本語で設定した場合】
※WordPressの記事編集画面で設定したURL
https://○○○.net/新しい記事タイトル/
↓
※実際にブラウザに表示されるURL（文字化けが発生）
https://○○○.net/%E6%96%B0%E3%81%97%E3%81%84%E8%A8%98%E4%BA%8B%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB/

「文字化け」が発生してしまうと、これだけでページ全体が「信頼性のないページ」とみなされてしまうこともあり、ページのアクセス数にも悪い影響が及んでしまうため、非常に望ましくありません。 そのため、パーマリンクは必ず「半角の英語表記」に設定するようにしましょう。

カテゴリーとタグを設定する

カテゴリーとタグも、パーマリンクと同様、右側のツールバーのメニューから設定することが出来ます。
カテゴリーはサイト全体の記事の「大分類」、タグは記事そのものの「付箋」のような役割を持つため、記事を作成する際には必ず設定しておくようにしましょう。それぞれ設定しておくことで、複数の記事が整理・分類されるようになり、サイト全体が非常に見やすいものになります。

なお、カテゴリーは1つの記事につき1個だけ設定することが望ましいです。
タグについても、複数個設定しても特に問題ありませんが、あまり多すぎるとかえって記事の整理状況が煩雑化してしまう恐れがあるため、多くても3つまでに止めておくと良いでしょう。

アイキャッチ画像を設定する

アイキャッチとは、主に記事の冒頭や一覧画面などで表示される、サムネイル画像のことを指します。
アイキャッチ画像を設定しておくと、記事がどのような内容であるか、視覚的に把握しやすくなるため、カテゴリーやタグと同様に設定しておくことが望ましいです。
右側メニューバーの「アイキャッチ画像」内にある「アイキャッチ画像を設定」をクリックすると、以下のようなポップアップ画面が表示されます。

その中にある「ファイルをアップロード」タブ内からPC内の画像をアップロードするか、「メディアライブラリ」タブから過去にアップロードされた画像を選択し、「アイキャッチ画像を設定」をクリックすることで、アイキャッチの設定が可能になります。
この時、画像の内容の説明を「代替テキスト」の項目にテキストで入力しておくと、万一のトラブルで該当の画像が表示されなくなった場合にもテキストで内容が表示されるため、出来れば入力しておくことが望ましいです。

記事の作成を中断し、途中保存したい場合は？

記事の作成を途中で中断し、一時的に保存をしたい場合は、画面右上にある「下書き保存」をクリックします。操作ミスなど万一のトラブルなどで作成途中の記事が消えてしまった場合にも備え、記事の作成時はこまめに下書き保存をするようにしてください。

投稿内容をプレビューしてみよう！

パーマリンクやタグ・カテゴリー、アイキャッチの設定が一通り完了したらいよいよ公開作業に入りますが、公開前に記事全体の見映えがどのようになっているか、設定のミスが無いかなど、一通り確認しておく必要があります。これを「プレビュー」と言います。

「プレビュー」は以下の3ステップで行います。

1. 画面の右上にある「プレビュー」のボタンをクリックします。
2. 表示されるメニューの「デスクトップ」「タブレット」「モバイル」の中から、表示を確認したい媒体を選択します（選択されている媒体にチェックマークが付きます）。
3. 最後に「新しいタブでプレビュー」をクリックすると、プレビューが表示されます。

記事を公開してみよう！

プレビューを行って、記事の見た目などに問題が無ければ、いよいよ公開です。
画面右上にある「公開」ボタンをクリックしてください。

すると、下の画面のように「公開してもよいですか？」と表示されるので、もう一度「公開」をクリックすれば、記事が公開されるようになります。

なおこの時、公開ボタンの下に「公開状態：公開」「公開：今すぐ」と書かれた2つの項目がありますが、ここで予約投稿や記事の公開状態を設定することが可能です（編集画面での「ステータスと公開状態」でも設定することが出来ます）。

公開ボタンを押す前に、実際に「公開状態：公開」をクリックしてみましょう。
すると、その下に「公開」「非公開」「パスワード保護」の3つの選択肢が表示され、ここで記事の公開状態を選択することが出来ます（記事公開後も公開状態を変更することが可能です）。
ここで「非公開」を選択すると、記事は全体に公開されず、サイトの管理者と編集者にだけ表示されるようになります。また、「パスワード保護」を選択すると、任意のパスワードを知っている人にだけ記事を公開することが出来ます。

また、「公開：今すぐ」をクリックすると、その下にカレンダーのような設定画面が出てきます。
ここで特定の日時を選択・入力することで、指定した特定の日時に自動投稿をする設定（予約投稿）が出来るようになります。

過去に投稿した記事を編集するには？

さて、無事にWordPressで記事を投稿することが出来ましたが、もちろん過去に投稿した記事を編集したり削除したりすることも可能です。
記事の編集や削除をするには、先ほどの管理画面の左端にあるメニューから「投稿」→「投稿一覧」と選択してください。

すると、下書き保存中の記事も含め、これまでに作成した記事の一覧が表示されるようになります。

記事を編集する場合は、作成した記事一覧の任意のタイトルにマウスのカーソルを合わせると、個別のメニューが表示されます。そのメニューの中から「編集」を選んでクリックすると、先程のブロックエディターの画面に移動することができ、記事の再編集が可能になります。

同様に記事を削除したい場合は、メニューの中から「ゴミ箱へ移動」を選んでクリックしてください。

すると、その記事は投稿一覧の「ゴミ箱」タブへ移動されます。しかし、これだけでは記事が完全に削除されたことにはなりません。 記事を完全に削除するには「ゴミ箱」のタブをクリックして表示し、削除したい記事のタイトルにマウスのカーソルを合わせると表示されるメニューから、「完全に削除」をクリックすることで、その記事を完全に削除することが出来ます。

ブロックエディターが無い場合・表示されない場合は？

さて、ここまではWordPressにおける「ブロックエディター」の使い方を一通り説明致しましたが、もしもWordPressの新規投稿画面にアクセスした際に、「ブロックエディターが無い」「ブロックエディターを使いたいのに表示されない」などといった状況の場合はどのようにすればよいでしょうか？

WordPressをインストールしているのにブロックエディターが表示されない場合、管理画面から「投稿」＞「新規追加」へとクリックして移動すると、ブロックエディターの代わりに、以下の画面が表示されることがあります。

これはバージョン5.0以前のWordPressで使用されていた「クラシックエディター」と呼ばれる編集画面です。 バージョン5.0以降のWordPressでも「Classic Editor」と呼ばれるプラグインをWordPressにインストールすると使用することが出来ますが、今後「クラシックエディター」はサポート自体が終了する可能性があるため、現在は先述の「ブロックエディター」を使用することが推奨されております。

もしもWordPressでブロックエディターが表示されていない場合、まずはWordPressの管理画面の右下に表示されている「バージョン」を確認してください。
表示されているバージョンが5.0以前である場合はブロックエディターを使用することが出来ません。 その場合は、管理画面の左側のメニューにある「ダッシュボード」＞「更新」をクリックしてください。

すると上記のような、最新のバージョンのWordPressのインストールの案内が表示されていることがあります。「バージョン○○に更新」のボタンをクリックしてWordPressのバージョンを更新することで、ブロックエディターが使用できるようになります。

※既に公開済みの記事などがある場合は事前にバックアップを取ることをお勧めします。

また、WordPressのバージョン5.0以降を使用している場合でも、先程の「Classic Editor」のプラグインが入っているとブロックエディターが表示されないことがあります。このような場合は、管理画面から「設定」＞「投稿設定」をクリックしてください。

すると、上記の画面が表示されるため、「投稿設定」の項目の中にある「すべてのユーザーのデフォルトエディター」から「ブロックエディター」を選択し、一番下の「変更を保存」をクリックすると、ブロックエディターを使用することが出来るようになります。

WordPressで気軽に自社メディアを運営しよう

今回ご紹介したのは、Wordpressの基礎的な「記事投稿方法」「ブロックエディタの使い方」です。

自社でメディアを持ち、WEB上で情報発信と集客を行う企業が増えている今、WordpressはHTMLの知識がなくても簡単に記事を制作できるため、多くの企業に導入されています。

ただ、自社メディアを運営する上で一番重要なのは、発信するコンテンツの中身です。自社でどのようなコンテンツを発信することで集客につながるか、その点についてもじっくり考えてみられてはいかがでしょうか。

▼他、参考となる記事はこちら

消費者心理を突いた買いたくなるストーリー！食品ならではのLP制作とは