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

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

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

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

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

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

T部長

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

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

ブロックエディタは、初めての人でもきれいな記事を書くことができますが、高機能すぎて操作しにくく、敬遠してしまいますよね・・・

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

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

それではどうぞ!

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

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

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

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

ブロックエディタの使い方はこの後説明します!

ブロックエディタで記事を公開するまで

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

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

とても重要なことなので、一番最初に書きます(笑)

せっかく書いたブログも、保存しないとすべて消えてしまいます。
「PCがフリーズしてしまい、書いていた文章が水の泡・・・」とならないように、こまめに下書き保存しましょう!

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

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

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

2.記事を作成する

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

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

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

2-1.段落を追加

段落は「Enterで改行していくだけ」で追加できます。
フォントサイズ」や「文字色」の変更は、右側メニューバーで行います。
補足
同じ段落で文章を書きたい場合は「Shift+Enter」、新しい段落に移りたい場合は「Enter」で改行します。

2-2.見出しを挿入

見出しにしたいテキストを入力して、ブロック変換で見出しにします。
補足
見出しは「見出し2」「見出し3」「見出し4」と、順番に付けていくように心掛けましょう。順番がおかしいとSEO的にも好ましくありませんし、読みづらいブログになってしまいます。

2.3.リストを挿入

リストにする項目を改行区切りで入力して、ブロック変換でリストにします。
リストは箇条書きだけでなく、番号付きのリストにもできます。
項目によって使い分けましょう!

2-4.画像を挿入

左上の「」アイコンをクリックし、「一般ブロック」から「画像」をクリックします。
画像ボックスを追加すると、3つのボタンが表示されます。
新たに画像をアップロードする場合は「アップロード」、既にアップロードしているファイルを利用する場合は「メディアライブラリ」をクリックします。
画像URLを直接指定したい場合は「URLから挿入」をクリックしてください。
画像をアップロードすると、エディタ上に画像が表示されます。
画像の位置や大きさの調整、Altテキスト(リンク切れなどで画像表示できない時の代替テキスト)の設定ができます。

3.投稿設定を行う

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

3-1.パーマリンク

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

右側メニューバー「パーマリンク」をクリックして、URLスラッグを英語表記に書き換えます
補足
パーマリンク設定は、下書き保存後に表示されます。メニューバーに表示がない場合は一度「下書き保存」をしましょう。

なお、大元のパーマリンク設定によってはパーマリンクが編集できないものもあります。
今回紹介した手順で変更できない場合は、以下の記事を確認してみてください!

【初心者向け】WordPressブログを書き始める前に済ませたい初期設定13個

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

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

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

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

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

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

メニュー「投稿」から「カテゴリー」を選択し、編集したいカテゴリーにカーソルをあてて、「クイック編集」をクリックします。
スラッグ」に英語のタグ名を入力して、「カテゴリーを更新」をクリックします。

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

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

右側メニューバー「アイキャッチ画像」を選択し、「アイキャッチ画像を設定」をクリックします。
メディアライブラリが表示されますので、「ファイルをアップロード」タブからアイキャッチ画像をアップロードしましょう。
アップロード後は、設定したいアイキャッチ画像にチェックが入っていることを確認して、「アイキャッチ画像を設定」をクリックします。

4.プレビュー

記事が完成したら、プレビューで出来栄えを確認しましょう。
エディタ上と実際のブログでは、レイアウトが違っていることがありますので、イメージ通りに仕上がっているか必ず確認してください!

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

5.記事を公開する

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

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

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

エディターの画面構成

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

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

文章は「執筆エリア」に書き、個々のブロック設定や公開に関する設定は「右側メニューバー」で行います。「ヘッダーメニューバー」ではブロックの追加や下書き保存などを行います。
補足
今回はWordPressの標準テーマを使用し、エディタの拡張プラグインは導入していません。
テーマやプラグインによっては項目やレイアウトが異なる場合があります。

ヘッダーメニューバー

ヘッダーメニューバーはブロックの追加や下書き保存など、ブロックや記事の状態に依存しない、共通で使われるボタンが並んでいます。
記事を書く際は「2」のブロック追加や、「8~10」の公開関連のボタンをよく使います。

右側メニューバー

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

文書タブ

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

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

ブロックタブでは、個々のブロックに関する設定を行います。
選択しているブロックや設定によって表示項目が変わりますのでご注意ください!

ブロックの基本操作

最後にブロックの基本操作を紹介します。
ブロックエディタだからこそ出来る、知っていると便利な機能ばかりです!

1.ブロックを追加

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

カテゴリー毎にブロックが分かれていますので、プルダウンしながら必要なブロックを探します。
利用したいブロックが見つかったら、クリックしてエディタにブロックを追加します。

2.ブロックの変換

ブロックメニューの段落アイコンをクリックして、変換したいブロックをクリックします。
入力内容を保持したまま、ブロックタイプの変換ができて良いですね!
補足
個々のブロックで変換できるブロックタイプが決められているため、一部変更できないものもあります。

3.ブロックの移動

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

4.ブロックの複製

ブロックメニューの詳細設定から「複製」をクリックします。
入力内容や装飾を維持したまま複製ができ、装飾を再利用するときに役立ちます。

5.ブロックの再利用

ブロックメニューの詳細設定から「再利用ブロックに追加」をクリックします。
再利用ブロックに名前を付けて、「保存」をクリックします。
たったこれだけで、他の記事でもブロックが呼び出せます!
登録したブロックを利用する際は、ブロック一覧画面の「再利用可能」から、登録したブロックを選択します。
いつも使用する定型文を登録したら、ライティングが捗ること間違いなしです!!

6.ブロックの削除

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

まとめ

今回は「ブロックエディタで記事を公開するまでの流れ」と、「エディターの画面構成」「ブロックの基本操作」を紹介しました。

ブロックエディタを使いこなすためには、「とりあえず触ってみて、ブロックの使い方を覚える」ことが一番の近道です!
投稿を下書きにしておけば公開されませんので、練習用に1記事作ってみて、その中で色々なブロックの追加・変換を試してみるのが良いかと思います。

ブロックエディタは慣れるまでは「使いにくい」と思ってしまいますが、一度覚えてしまえばサクサクブログが書けちゃいます。

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

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

ブログの始め方を知りたい!実際に始めたい方へ

キャンペーン開催中

ボクが中の人を務める国内シェアNo1レンタルサーバー「エックスサーバー」では、
2020年7月3日~9月3日までドメイン永久無料】【初期費用3000円→0円】になる超お得なキャンペーンを開催中です。

過去最大級にお得なキャンペーン内容なので、ぜひこの機会にご利用をご検討ください!

期間中のお申込ならサーバー料金だけで独自ドメインのWordPressブログが作れます。

サービスお申し込み、キャンペーンの詳細は、以下のリンクからご確認ください。

⇒ドメイン永久無料&初期設定費用0円キャンペーン

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

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

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

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

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

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

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