国内シェアNo1サービスの「中の人」がブログ運営に役立つ情報をわかりやすくお届け!

【図解あり】WordPressブロックエディタ(Gutenberg)の使い方

【2022年5月26日更新】ブロックエディタのおすすめ機能を3つ追加しました。

この記事のレベル
初心者
(4.0)
重要度
(4.5)
難しさ
(1.5)

こんにちは、T部長です!

WordPress(ワードプレス)のエディタはバージョンが上がるたびに進化し続け、最近ではブロックエディタ(Gutenberg)と呼ばれるエディタに生まれ変わりました。

今回の記事では、ブロックエディタを用いて記事を公開するまでの流れと、ブロックの基本操作について紹介します。

T部長

この記事は下記のような人におすすめ!

  • ブロックエディタの使い方がわからない
  • ブロックエディタをもっと便利に使いたい

ブロックエディタは、はじめての人でもきれいな記事を書けます。しかし、高機能すぎて操作しにくく、敬遠してしまいますよね……。

そこで今回、記事公開までの流れを紹介しながら、エディタの使い方やブロック基本操作をお伝えしていきます。

この記事を読んで、ブロックエディタの使い方を覚えましょう!

それではどうぞ!

ブロックエディタ(Gutenberg)とは?

ブロックエディタ(Gutenberg)とは、WordPress5.0から標準搭載となったエディタのことで、文章や画像などをブロックという単位で管理します。

ブロックエディタ

ブロックエディタの大きな特徴としては、文章や画像の位置調整やレイアウトの変更が、HTMLやCSSの知識がなくても簡単に行えるという点です。

また、定型文などを再利用できるブロックも追加されたため、より効率的にライティングが行えるようになっています。

ブロックエディタとクラシックエディタどっちがおすすめ?

WordPressにはブロックエディタだけではなく、WordPress5.0より前に採用されていた「クラシックエディタ」というものがあります。

クラシックエディタ

こちらがクラシックエディタ

ブロックエディタ

こちらがブロックエディタ

プラグインというWordPressの拡張機能を使えばクラシックエディタでの運用も可能になりますが、これからブログを始められる方もすでに始められている方もブロックエディタがおすすめです。

理由は、2022年末をもってWordPress側でのクラシックエディタのサポートが終了予定だから。以下の公式リンクからも正式に発表されています。

もともとは2021年12月でサポート終了予定でしたが、クラシックエディタユーザーは今でも多く、WordPress側でのサポートの対応をされたようです。

今後、クラシックエディタを使えなくなる可能性があるため、今のうちにブロックエディタに慣れておくことをおすすめします。

T部長

ボクはしばらくクラシックエディタで運用していましたが、ブロックエディタに慣れてからは執筆速度が感覚1.5倍くらい早くなりました!

ブロックエディタで記事を公開するまでの6ステップ

まずは難しいことは考えずに、エディタを用いて記事作成と各種設定を行い、公開するまでやってみましょう!

記事が公開されるまでの手順は、つぎのステップで完了します。

1.(超重要)下書き保存をお忘れなく!

とても重要なことなので、最初にお伝えします。

せっかく書いたブログも、保存しないとすべて消えてしまいます。

「PCがフリーズしてしまい、書いていた文章が水の泡……」とならないように、こまめに下書き保存しましょう!

手順は簡単!ヘッダーメニューの「下書きを保存」をクリックするだけです!

下書き保存

T部長

保存を忘れて、せっかく書いた記事を書き直ししたことが何十回とありました(泣)やる気が飛んでいくので本当に気をつけましょう。

2.記事タイトルを入力する

タイトルを追加」をクリックし、記事タイトルを入力します。

記事タイトルを入力する

3.記事を作成する

ここからはブロックを使いながら、記事を作成していきます。

(はじめに)ブロックのメニューバーについて

ブロックによって多少の違いはあるものの、メニューバーでいろいろな操作ができます。記事を書く際は「3」と「5」をよく使います。

.記事を作成する

3-1.段落を追加

段落は「Enterで改行していくだけ」で追加できます。
フォントサイズ」や「文字色」の変更は、右側メニューバーで行います。

ポイント

同じ段落で文章を書きたい場合は「Shift+Enter」、新しい段落に移りたい場合は「Enter」で改行します。

3-2.見出しを挿入

見出しにしたいテキストを入力して、ブロック変換で見出しにします。

また段落の文頭に、見出しの数値に応じた「#」を入力することで、すばやく見出しを呼び出すこともできます。

見出しを挿入
見出しを呼び出すショートカット
  • # (#のうしろには半角スペースを入力)
    →見出し1
  • ##
    →見出し2
  • ###
    →見出し3
  • ####
    →見出し4
    ……

ボクも普段「#」を使って見出しを呼び出していますが、慣れてくるとこちらの方が時短になります。

ぜひ一度試してみてください。

ポイント
見出しは「見出し2」「見出し3」「見出し4」と、順番に付けていくように心掛けましょう。順番がおかしいとSEO的にも好ましくありませんし、読みにくいブログになってしまいます。

3-3.リストを挿入

リストにする項目を改行区切りで入力して、ブロック変換でリストにします。

.リストを挿入

リストは箇条書きだけでなく、番号付きのリストにもできます。項目によって使い分けましょう!

3-4.画像を挿入

左上の「」アイコンをクリックし、「一般ブロック」から「画像」をクリックします。

「一般ブロック」から「画像」をクリック

画像ボックスを追加すると、3つのボタンが表示されます。

新たに画像をアップロードする場合は「アップロード」、すでにアップロードしているファイルを利用する場合は「メディアライブラリ」をクリックします。画像URLを直接指定したい場合は「URLから挿入」をクリックしてください。

画像ボックスを追加すると、3つのボタンが表示されます。

画像をアップロードすると、エディタ上に画像が表示されます。

画像の位置や大きさの調整、Altテキスト(リンク切れなどで画像表示できない時の代替テキスト)の設定ができます。

エディタ上に画像が表示される

4.投稿設定を行う

記事ができたら、公開に向けた準備や設定を行います。

4-1.パーマリンク

パーマリンクとは、ブログ記事ごとに設定されるURLのことです。デフォルトでは記事タイトル(日本語)が設定されているので、これを英語表記に修正しましょう。

右側メニューバー「パーマリンク」をクリックして、URLスラッグを英語表記に書き換えます

パーマリンク

英語表記にしないと、日本語URLの場合以下のように文字化けしてしまい、まるで信頼性のないページのように見えてしまいます。

ポイント
パーマリンク設定は、下書き保存後に表示されます。メニューバーに表示がない場合は一度「下書き保存」をしましょう。

なお、大元のパーマリンク設定によってはパーマリンクが編集できないものもあります。

今回紹介した手順で変更できない場合は、以下の記事を確認してみてください!

【必須!】WordPressブログ開設後にやるべき初期設定13個

4-2.カテゴリー/タグ

カテゴリーやタグは、関連記事をひとまとまりにするためのもの。「カテゴリーはフォルダ」「タグはふせん」と例えられることが多いです。

一般的に1記事につき「カテゴリーは1つ」、「タグは複数OK」と言われています。

右側メニューバー「カテゴリ」または「タグ」をクリックして、カテゴリやタグを設定します。

カテゴリー/タグ
ポイント

新規カテゴリーを追加」や「タグを新規追加」した場合、URLの一部分となるスラッグが日本語になりますので、以下の手順で設定を行いましょう!

今回はカテゴリーを例に挙げますが、タグも同じ手順で修正できます。

メニュー「投稿」から「カテゴリー」を選択し、編集したいカテゴリーにカーソルをあてて、「クイック編集」をクリックします。

クイック編集

スラッグ」に英語のタグ名を入力して、「カテゴリーを更新」をクリックします。

「スラッグ」に英語のタグ名を入力して、「カテゴリーを更新」をクリック

タグの必要性や使い方は、次の記事でも詳しく解説しています。

ブログにタグは必要?タグの目的とSEO効果、注意点を徹底解説!

4-3.アイキャッチ画像

アイキャッチとは、記事の一覧画面などで表示される画像のことです。読者の興味を引くだけでなく、ブログ自体が華やかになりますので必ず設定しましょう。

右側メニューバー「アイキャッチ画像」を選択し、「アイキャッチ画像を設定」をクリックします。

アイキャッチ画像を設定

メディアライブラリが表示されますので、「ファイルをアップロード」タブからアイキャッチ画像をアップロードしましょう。

アップロード後は、設定したいアイキャッチ画像にチェックが入っていることを確認して、「アイキャッチ画像を設定」をクリックします。

「ファイルをアップロード」タブからアイキャッチ画像をアップロード

5.プレビュー

記事が完成したら、プレビューで出来栄えを確認しましょう。

エディタ上と実際のブログでは、レイアウトが違っていることがありますので、イメージ通りに仕上がっているか必ず確認してください!

プレビューは、ヘッダーメニューの「プレビュー」ボタンをクリックします。

プレビュー

6.記事を公開する

お疲れさまでした!これで投稿前の作業は完了です!
最後に記事を公開しましょう。

ヘッダーメニューの「公開する」をクリックしたら、記事が全世界に公開されます。

記事を公開する

いろいろと手順があって大変だと思いますが、慣れるとサクサク操作できちゃいますよ!!

エディターの画面構成

ここまで公開までの流れを紹介してきましたが、機能やボタンをもう少し詳しく見ていきましょう。

まず、エディタは大きく分けて3つのエリアに分かれています。

文章は「執筆エリア」に書き、個々のブロック設定や公開に関する設定は「右側メニューバー」で行います。「ヘッダーメニューバー」ではブロックの追加や下書き保存などを行います。

エディターの画面構成
ポイント
今回はWordPressの標準テーマを使用し、エディタの拡張プラグインは導入していません。テーマやプラグインによっては項目やレイアウトが異なる場合もあります。

ヘッダーメニューバー

ヘッダーメニューバーはブロックの追加や下書き保存など、ブロックや記事の状態に依存しない、共通で使われるボタンが並んでいます。

記事を書く際は「2」のブロック追加や、「8~10」の公開関連のボタンをよく使います。

 ヘッダーメニューバー

右側メニューバー

右側のメニューバーは個々のブロックに関する設定や、投稿公開に関する設定を行います。

文書タブ

文章タブでは投稿公開に関する設定を行います。基本的に「7」以降は設定不要です!

文書タブ

ブロックタブ(段落ブロック)

ブロックタブでは、個々のブロックに関する設定を行います。

選択しているブロックや設定によって表示項目が変わりますのでご注意ください!

 ブロックタブ(段落ブロック)

ブロックの基本操作6つ

最後にブロックの基本操作を紹介します。基本操作は次の6つです。

ブロックエディタだからこそ出来る、知っていると便利な機能ばかりです!

1.ブロックを追加

ブロックを追加

左上の「」アイコンをクリックして、ブロック一覧を表示します。

カテゴリーごとにブロックが分かれていますので、プルダウンしながら必要なブロックを探します。

利用したいブロックが見つかったら、クリックしてエディタにブロックを追加します。

2.ブロックの変換

ブロックの変換

ブロックメニューの段落アイコンをクリックして、変換したいブロックをクリックします。入力内容を保持したまま、ブロックタイプの変換ができて良いですね!

ポイント
個々のブロックで変換できるブロックタイプが決められているため、一部変更できないものもあります。

3.ブロックの移動

ブロックの移動

ブロックを選択し、左側に表示される移動カーソルを操作で位置変更できます。
記事を推敲する際重宝します!

4.ブロックの複製

ブロックの複製

ブロックメニューの詳細設定から「複製」をクリックします。

入力内容や装飾を維持したまま複製ができ、装飾を再利用するときに役立ちます。

5.ブロックの再利用

ブロックの再利用

ブロックメニューの詳細設定から「再利用ブロックに追加」をクリックします。

再利用ブロックに名前を付けて、「保存」をクリックします。
たったこれだけで、他の記事でもブロックが呼び出せます!

登録したブロックを利用する際は、ブロック一覧画面の「再利用可能」から、登録したブロックを選択します。

いつも使用する定型文を登録したら、ライティングが捗ること間違いなしです!!

6.ブロックの削除

ブロックの削除

ブロックメニューの詳細設定から、「ブロックを削除」をクリックするだけで削除できます。執筆の邪魔になるので、不要なブロックは削除しましょう!

その他ブロックエディタの機能3つ

ここまでブロックエディタの基本的な使い方を紹介してきましたが、ブロックエディタのさらに便利な機能を3つ紹介します。

その他のブロックエディタおすすめ機能

1.テーブルを挿入

ブロックエディタには「テーブル」という機能が備わっており、エクセルで作成したような表を記事内に埋め込めます。

手順は次のとおりです。

ブロックエディタより「+」をクリックします
ブロックエディタより<+>をクリックします
検索窓に「テーブル」と入力し、「テーブル」をクリックします
検索窓に「テーブル」と入力し、「テーブル」をクリックします
カラム数(列数)と行数を入力します

今回はカラム数を4、行数を4としました。

カラム数(列数)と行数を入力します。
テキストを入力します

表の大枠は完成しましたので、次に好きなテキストを入力していきます。

テキストを入力します

こちらでテーブルの入力は完了です。

テーブルの使い方は次の記事でも詳しく解説していますので、あわせてご覧ください。

WordPressにテーブル表を挿入する方法を解説|おすすめプラグインも紹介!

2.カラムを挿入

カラムとは、1つの段落に対して、列をどれだけ増やすかの設定のこと。

カラムを使えば次の画像のように、1つの行に対して「テキスト」と「画像」の2つを並べることが可能です。

2カラムで表示した場合

2カラム

手順は次のとおりです。

ブロックエディタより「+」を入力し、検索バーに「カラム」と入力後、「カラムアイコン」を選択
ブロックエディタより「+」を入力し、検索バーに「カラム」と入力後、「カラムアイコン」を選択
カラムの割合を選ぶ

今回はわかりやすいように 50/50を選んでいます。

カラムの割合を選ぶ
2つのブロックが表示されるので、片側には「段落」を、もう片側には「画像」を挿入する
2つのブロックが表示されるので、片側には「段落」を、もう片側には「画像」を挿入する

こちらでカラムブロックの挿入が完了しました。

他にも画像を2枚横並びにしたり、テキストのみを横並びにすることも可能です。

アイデア次第で、さまざまなカスタマイズが可能になります。

3.動画(YouTube)を埋め込む

ブロックエディタでは、動画(YouTube)も簡単に埋め込めます。

方法はいろいろありますが、今回は一番シンプルな動画の貼り付け方を解説します。

手順は次のとおりです。

掲載したい動画をYouTubeから探します
掲載したい動画をYouTubeから探します
共有をタップします
共有をタップします
「コピー」をクリックし、URLをクリップボードにコピーします
「コピー」をクリックし、URLをクリップボードにコピーします
動画のサムネイルが表示されていれば掲載完了です
動画のサムネイルが表示されていれば掲載完了です

動画を埋め込めば、動きのある映像でわかりやすく読者に情報を伝えられます。

ブログに慣れてきたらテキストや画像だけでなく、動画で見せることもチャレンジしてみてください!

次の記事では動画の埋め込み方を詳細に解説しています。

WordPressに動画・YouTubeを埋め込む方法を解説!おすすめプラグインも紹介

まとめ

今回はブロックエディタの使い方を初心者向けに解説しました。

ポイントをおさらいしますと次の3つです。

ブロックエディタを使いこなすためには、「とりあえず触ってみて、ブロックの使い方を覚える」ことが一番の近道です!

投稿を下書きにしておけば公開されませんので、練習用に1記事作ってみて、その中でいろいろなブロックの追加・変換を試してみるのがよいかと思います。

この記事を参考に、ブロックエディタの使い方をマスターして、ストレス無くブログを書きましょう!

以上、最後まで読んでいただきありがとうございました!

キャンペーン開催中

国内シェアNo.1レンタルサーバー「エックスサーバー」では2022年7月21日18時まで、
初期費用0円&月額料金20%OFFキャンペーンを開催中です!

今なら初期費用0円+月額792円~お得にWordPressブログが始められます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

ぜひこのお得な機会にWordPressブログをご検討ください!

当メディア「初心者のためのブログ始め方講座」では、
初心者の方に分かりやすく簡単にブログを始められる方法を紹介しています!

WordPressに使用される国内シェアNo.1サービス「エックスサーバー」の中の人が確実で信頼性の高い情報をお届けしています!

ブログをこれから始める方はこちらの完全ガイドをぜひご覧ください!

【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

また、初心者の方向けにWordPressでのブログ立ち上げがたった10分できる方法も紹介しています!

【初心者でも安心】たった10分で出来るWordPressブログの始め方

ブログの始め方・立ち上げに関する、ご質問・ご相談はボクのツイッターDM( @tbcho_xsv )までお気軽にどうぞ!