ブログのつくり方

WordPress新エディター「Gutenberg」の使い方

更新日:

WordPressが5.0系にバージョンアップしてから、エディターの仕様が大きく変わりました。

プラグインを使えば、今までと同じクラシックエディターで投稿を作成することもできますが、ずっとクラシックエディターで作業をする訳にはいきませんし、早めに慣れて新しいエディターで作業をするように切り替えていきたいところです。

とは言え、まだ慣れずに「新しいエディターは使いづらい」「使い方がよく分からない」と感じている人も多いのではないでしょうか。

そこで、ここでは新しいエディターでどのような操作をして投稿を作成するのか、「Gutenberg」の基本的な使い方について説明します。

「 Gutenberg 」の基本的な使い方

それでは、以下に「Gutenberg」で投稿を作成する時の基本的な使い方について説明します。

 

タイトルとパーマリンクを設定する方法

はじめに、投稿の作成に必要な「タイトルとパーマリンクを設定する方法」から解説します。

まず、投稿のタイトルとパーマリンクを設定する大まかな流れは以下のとおりです。

タイトルの入力方法

  1. 「新規投稿の追加」画面を表示する
  2. 画面中央にある「自動下書き」と書かれた部分にカーソルを置く
  3. 「自動下書き」という文字を削除して、タイトルを入力する

パーマリンクの設定方法

  1. 新規投稿の追加画面で、右上にある「下書きとして保存」をクリックし、投稿を一度保存した状態にする
  2. タイトルの編集欄にカーソルを置く
  3. ②の操作をすると、タイトルの上にパーマリンクが表示されるので、「編集」ボタンをクリックして任意のパーマリンクに編集する

次に、上記の手順を具体的に説明します。

まず、「新規投稿の追加」画面を開くと以下の画像のような画面になります。

新規投稿作成画面でタイトルを入力する時の画面

そして、投稿の編集画面の上のほうに表示されている「自動下書き」というところにカーソルを置くと、タイトルの編集ができるようになります。

この「自動下書き」という文字を削除して、代わりに記事のタイトルを入力すればタイトルの設定が完了です。

次に、パーマリンクの設定ですが、パーマリンクは一度投稿を「下書き保存」の状態にすると設定できるようになります。

なので、画面右上にある「下書きとして保存」という文字をクリックして一旦投稿を保存した後、タイトル部分にもう一度カーソルを当てます。

すると、以下の画像のような状態になります。

投稿の編集画面からパーマリンクを編集する時の画面

そうしたら、「編集」ボタンをクリックすると文字を入力できる状態になるので、パーマリンクを入力し「保存」をクリックすれば、パーマリンクの設定が完了です。

また、上記の方法以外にも、エディターの右側にある「ブロック設定」の「文書」タブにある「パーマリンク」からもパーマリンクを設定することが可能です。

 

ブロックを追加する方法

次に、「ブロックを追加する方法」です。

「Gutenberg」は、「見出し」「画像」「Classic Paragraph」など、記事を構成するそれぞれの項目を「ブロック」として組み合わせながら投稿を作成できるようになっています。

なので、投稿を作成・編集するには、ブロックの追加という作業を行います。

ではどのようにするのかと言うと、大まかな手順は以下のとおりです。

ブロックの追加手順

  1. 画面左上にある「ブロックの追加」(「+」マーク)をクリック
  2. 「よく使うもの」というウィンドウが表示されたら、その中から使用したいブロックをクリックして追加する

次に、上記の手順について、画像を使って具体的に画面の操作について説明します。

まずは、以下の画像にあるように、投稿画面左上の「+」マークのアイコンをクリックします。

ブロックの追加をする時に表示される要素の一覧

そうすると、上の画像にあるように、よく使うブロックの要素が表示されます。

ここから必要なものをクリックして選択すると、投稿画面にブロックを追加していくことができます。

 

ブロックを削除する

次に、「一度追加したブロックを削除する方法」です。

間違えて必要のないブロックを追加してしまったり、投稿の作成途中で不要になったブロックがあったりした場合には、以下の手順で削除することができます。

ブロックの削除手順

  1. 削除したいブロックにカーソルを置いて、そのブロックを選択した状態にする
  2. 画面上にある「詳細設定」(縦の三点リーダーのマークをしたアイコン)をクリック
  3. ②の操作で表示されたメニューにある「ブロックを削除」をクリックしてブロックを削除する

上記の手順について、画像を交えて詳しく説明します。

まず削除したいブロックにカーソルを置くと、以下の画像のように縦の三点リーダーのマークをしたアイコンが表示されます。

ブロックを削除する時の操作画面

その表示されたメニューの一番下に「ブロックを削除」というメニューがあるので、その部分をクリックすれば、ブロックの削除が完了です。

(削除する時に確認メッセージは表示されません)

 

画像を挿入する方法

次に、「投稿に画像を挿入する方法」です。

投稿に画像を入れることは多いですが、その場合は以下の手順で画像を挿入することができます。

ブロックの削除手順

  1. 投稿画面左上にある「ブロックの追加」をクリックし、「画像」を選択する
  2. ①の操作で追加された画像ブロックの中にある「メディアライブラリ」ボタンをクリック
  3. 「メディアの選択またはアップロード」画面から、追加したい画像を選び(もしくはアップロードして選択し)、右下の「選択」ボタンをクリックする

次に、画像の挿入手順について詳しく説明します。

まずはじめに、上述した「ブロックの追加方法」で説明した手順で「画像」のブロックを追加します。

すると、下の画像のような画面になるので、「メディアライブラリ」をクリックします。

「画像」ブロックを追加した時に表示される画面

そうすると、「メデイアの選択またはアップロード」という画面が表示されるので、「メディアライブラリ」タブからその画像を選択して、右下の「選択」ボタンをクリックします。

メディアの選択またはアップロード画面

もし、まだアップロードしていない画像を使用したい場合は、「ファイルをアップロード」タブを選択して、画像をアップロードしてから選択すればOKです。

ちなみに、挿入した画像を選択した状態にしていれば、サイドメニューに表示される「画像設定」で、ALT属性(代替テキスト)の入力やサイズの設定などを行うことが可能です。

サイドメニューに表示される画像設定画面

また、画像の位置を調整したい場合には、画面上部のアイコンをクリックするだけで簡単に行えます。

画像の位置を揃えるためのアイコン表示

位置を揃えたい画像を選択した状態にすると、上の画像のように位置を揃えるためのアイコンが表示されるので、「左寄せ」「中央揃え」「右寄せ」の中から希望のものをクリックすれば位置を揃えることが可能です。

画像ブロックは、画像を直接エディターにドラッグ・アンド・ドロップすることでも追加することができます。新しい画像をアップロードして投稿に挿入したい場合には、ドラッグ・アンド・ドロップすると簡単です。

こちらの記事も併せてどうぞ

WordPress「Gutenberg」の便利な使い方

WordPress5.0からエディターが「Gutenberg」になり、ブロックを組み合わせて直観的な操作で投稿を作成できるようになりました。 とは言え、以前からWordPressを使っている人には、「 ...

続きを見る

 

文字数や見出しの数などを確認する

次に、「投稿の文字数や使用している見出し・段落・ブロックの数を確認する」方法です。

投稿を作成する時には、全体の文字数はけっこう重要になってくるので、文字数を確認する方法は知っておきたいところです。

ではどうやって確認するのかですが、投稿の文字数は、「Gutenberg」では「見出し・段落・ブロックの数・文書の概要」と一緒に、以下の手順で確認することができます。

文字数や見出しなどの数を確認する手順

  1. 投稿画面左上にある「コンテンツ構造」(「i」マークのアイコン)をクリック
  2. アイコンの下に表示されたウィンドウから、文字数・見出し・段落・ブロックの数・文書の概要を確認する

具体的に文字数はどんな状態で表示されるかと言うと、以下の画像のような感じです。

投稿の文字数・見出し・段落・ブロック・文書の概要を表示した時の画面

「i」マークのアイコンをクリックして表示されるウィンドウの中から、「語」と書かれた部分で文字数の確認、その右側の部分で「見出し・段落・ブロックの数」を確認できます。

また、その下にはタイトルと見出しが一覧で表示され、投稿の概要や構成をひと目で確認することが可能になっています。

 

コードエディターで編集する

次に、「コードエディターで編集する方法」です。

普段はビジュアルエディターを使っていても、HTMLタグを編集したい時など、コードエディターでの編集したい時があります。

そんな時には、以下の手順でビジュアルエディターからコードエディターに変更することができます。

コードエディターを表示する手順

  1. 投稿の作成・編集画面右上の「ツールと設定をさらに表示」(縦三点リーダーのマークをしたアイコン)をクリック
  2. ①の操作で表示されたメニューから「コードエディター」をクリックして選択する

上記の操作を画像を使って見てみると、以下のような感じになります。

コードエディターに切り替えた時の画面表示

ちなみに、コードエディターから再びビジュアルエディタに戻したい場合には、上記の手順と同じように、画面右上のメニューをクリックして「ビジュアルエディター」を選択すればOKです。

 

まとめ

以上、WordPressの新エディター「Gutenberg」を使って投稿を作成・編集するための基本的な使い方について説明しました。

WordPress5.0になり、エディターの仕様が大きく変わってしまいましたが、直観的に操作がしやすいつくりになっているので、基本的な使い方は特に難しいものではありません。

投稿に追加する画像のALT属性をサイドバーのメニューから入力できたり、文字数と一緒に記事の構成をひと目で確認できるなど、以前のエディターと比べて操作が簡略化できる部分も多いです。

慣れれば使いやすく感じられるので、いろいろと触ってみて使いこなしていくことをおすすめします。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.