WordPressのGutenbergとは、WordPressのバージョン5.0から標準となる投稿エディターのことです。
この記事では、Gutenbergでの記事の投稿方法についてまとめました。
全ての機能の解説はしません。初心者向けということで、記事を投稿するための必要最低限なポイントに絞ってお伝えしていきます。
これまでのWordPressの投稿方法とは少し異なるのですが、慣れてしまえば難しくも何ともありません。むしろ楽に感じるかも。
ということでさっそく見ていきましょう。まずは投稿の設定についてお伝えしていきますね。
「投稿」の「新規投稿」から投稿する
WordPressで新しく記事を投稿するには、WordPressの管理画面の「投稿」の「新規投稿」をクリックします。
すると、以下のようなシンプルな画面が表示されます。
このページから投稿を作っていきます。
まずは投稿の設定をしていきましょう。
投稿の設定
デフォルトだと設定枠が表示されていないので、先に表示させます。
画面右上の歯車の「設定」アイコンをクリックします。
すると画面の右側に、以下の設定が表示されます。
まずはこの設定を済ませていきます。これも一つずつお伝えしますね。
ステータスと公開状態
「ステータスと公開状態」の項目では、公開中の投稿を非公開にしたり、公開日時を変更したりすることが出来ます。
もし投稿を済ませたあとにそれらを変更したい場合は、この項目から設定してみてください。
また「先頭に固定表示」にチェックを入れることで、トップページの投稿一覧の先頭に表示されるようになります。
その下の「レビュー待ち」にチェックを入れると、管理画面の投稿一覧に「レビュー待ち」というテキストが追加されます。
が、これは誰かにレビューをしてもらう時に使うくらいで、個人でWordPressを運営しているならまず使わないですね。なので無視でOKです。
カテゴリー
カテゴリーを開いたら、これから作る投稿にマッチしたカテゴリーを選択しましょう。
カテゴリーの作り方に関しては、以下の記事を参考にしてみて下さい。
＞ブログのカテゴリーの分け方｜本屋さんをイメージして決めていこう
タグ
投稿に合ったタグ（キーワード）を入力します。
が、任意で構いません。僕は基本的に使用していないです。
アイキャッチ画像
アイキャッチとは、投稿ページの一番上に表示される画像のことです。
アイキャッチには、読者の目を引かせる役割があるので、出来れば設定したいところです。
「アイキャッチ画像の設定」をクリックして、投稿にマッチする画像を選択しましょう。
アイキャッチ画像は、アップロードする前に圧縮して、ファイルサイズを小さくしておくことをおすすめします。
というのも、画像のファイルサイズが大きいと、ページ表示速度が遅くなることがあるからです。
ページの表示速度が遅くなればなるほど、ページを読み切らずに閉じてしまう読者が増えます。
具体的に言うと、ページの表示速度が1秒から3秒に増えると、ページを閉じてしまう人が32%増えるのだとか。
なので、画像は圧縮しておきましょう。圧縮する際は、無料ツールの『TINYPNG』がおすすめです。画像をアップロードするだけで、画質をある程度保ったまま圧縮してくれます。
またWordPressのプラグインの『EWWW Image Optimizer』も使うと、さらに画像を圧縮することが出来るのでおすすめです。
※アイキャッチ画像をネットから探す場合は、商用利用OKで完全無料のサイトから探すことをおすすめします。僕の記事『ブログ画像におすすめのサイト25選【無料・商用OK・クレジット表記不要】』でおすすめの画像サイトを紹介しているので、参考にしてみてください。
抜粋
抜粋に入力した文章は、検索結果のスニペットという部分に表示されます（以下の画像の赤線部分）。
スニペットは、ページのクリック率に影響すると言われています。なので、空欄にするのではなく、しっかり記載するのがベストです。
記載する時のポイントは以下の3つです。
- 検索ユーザーが知りたいこと（結論）から書く
- ページを読むメリットを書く
- 「読んでみて下さい」という行動促し文を書く
※詳しい抜粋の書き方については、僕の別の記事『meta descriptionの表示文字数は日本語でPC約110文字、スマホ約60文字』を参考にしてみて下さい。
ディスカッション
ディスカッションは、投稿のコメントやピンバック、トラックバックなどを設定する項目です。
「コメントを許可」も「ピンバックとトラックバックを許可」も、二つともチェックを入れておきましょう。というのも、コメントもピンバックなども、検索順位（SEO）に良い影響を与える可能性が高いからです。
実際、「コメント欄が盛り上がることは検索結果に良い影響を与える」と、GoogleのGary氏はツイッターでつぶやいていました。
僕自身も、コメントはあったほうが良いと考えています。SEOに良いのもそうですが、読者の考えを知れますし、投稿の改善のヒントが得られることがあるからですね。
なので、どちらにもチェックを入れておくことをおすすめします。
更新日
更新日はデフォルトのままでOKです。
さてこれで設定は完了です。次は本文の入力についてお伝えしていきます。
投稿の本分の入力
この記事でお伝えすることは、以下の9つです。
- Gutenbergのブロックについて
- タイトルの追加
- パーマリンクの入力
- 見出しの入力
- テキスト（段落）の入力
- 画像の挿入
- リストの追加
- 引用文の挿入
- 外部ソースの埋め込み
これも一つずつお伝えしていきます。
Gutenbergのブロックについて
Gutenbergで投稿を作るときに、最も重要な「ブロック」という概念についてお伝えします。これさえ理解してしまえば、投稿が楽になるはずです。
従来のWordPressと比較しながらお伝えしますね。
まず従来のWordPressについてですが、投稿する際は、見出しやテキスト（段落）、画像やリスト（箇条書き）、また引用などの要素は、一つの編集画面の中に入力していました。
↑従来のWordPressでは、一つの編集画面（エディター）の中に要素を入力する。
ただ、Gutenbergでは、見出しやテキスト（段落）などの要素の一つ一つが「ブロック」というもので分けられます。
別の図で見てみましょう。
従来のWordPressは、ページの中に各要素があるイメージです。
一方Gutenbergは、ブロックという要素が積み重なってページが作られるイメージです。
なのでGutenbergでは、ブロックという要素を追加して投稿ページを作っていく流れになります。
イメージできたでしょうか？
さてそしたら、まずはタイトルを入力していきましょう。
タイトルの追加
「タイトルを追加」と書かれているブロックをクリックして、タイトルを入力していきます。
タイトルのポイントは4つです。
- 全角32文字以内におさえる
- キーワードを前の方に入れる
- 分かりやすい表現にする
- 他のサイトと被らないようにする
※タイトルの付け方については別の記事『ブログ記事のタイトルを決める時に意識したい6つのポイント』でお伝えしています。参考にしてみて下さい。
パーマリンクの入力
タイトルを入力すると、パーマリンク（投稿のURL）が表示されます。
デフォルトだと、タイトル名がそのままURLの一部になります。ただこれだと長すぎてしまうし、SEO的にも良くないので編集していきます。
なので、パーマリンクの右側に表示されている「編集」をクリックして、個別のパーマリンクをつけていきましょう。
パーマリンクは以下のポイントを意識して付けていきます。
- キーワードを入れる
- シンプルにする
- 分かりやすい英文にする
- アンダースコア（ _ ）ではなくハイフン（ – ）を使う
- 日本語（ひらがな、カタカナ、漢字）は使わない
※パーマリンクについては、別の記事『WordPressのパーマリンクについて』で詳しくお伝えしています。参考にしてみて下さい。
見出しの入力
見出しの入力方法はいくつかありますが、簡単でシンプルな方法をお伝えします。
まずは編集画面に表示されている、Tのマーク（見出しの追加）をクリックします。
そしたら見出し枠が表示されるので、見出しテキストを入力します。
見出しのレベル（h2、h3、h4）を変えたい場合は、ブロックの上に表示されるメニューから選択します。
テキスト（段落）の入力
テキスト（段落）の入力方法もいくつかありますが、これもシンプルな方法をお伝えしますね。
といっても難しいことはなくて、「文章を入力…」とグレー字で書かれている個所をクリックして、テキストを入力するだけです。
テキストを中央や右に寄せたり、太字にしたり、イタリック（斜め）にしたり、テキストリンクをつけたり、取り消し線をつけたりしたい場合は、ブロックの上のメニューを選択してください。
またテキストのサイズや色の変更は、右側に表示される「設定」から出来ます。
ただ、背景色やテキストの色は、そのテキスト（段落）全体に反映されてしまいます。現時点では、指定の一部のテキストだけ変更することは出来ないので、その点は注意しましょう。
画像の挿入
画像を投稿に入れるには、編集画面に表示されている画像のマーク（画像の追加）をクリックします。
そしたら、画像をアップロードするか、すでにアップロードされている画像（メディアライブラリ）から選ぶか、選択肢が表示されます。
新しい画像であれば、アップロードを選択（もしくはドラッグ）します。またすでにアップロードされてる画像から選択する場合は、メディアライブラリを選択します。
画像をアップロードする前は、ページの表示速度を遅くしないためにも、圧縮してからアップロードすることをおすすめします。アップロードは先ほどもお伝えした『TINYPNG』がおすすめです。
また画像の「代替テキスト」に、画像の内容を説明する言葉を入力しておくことをおすすめします。
なぜなら、検索エンジンにどんな画像なのかを正しく認識させるためです。
代替テキストの編集方法もいくつかあるのですが、ブロック状のメニューの「画像を編集」からでも出来ます。
そしたら画像の詳細情報が表示されるので、「代替テキスト」の部分に画像の内容を説明する文章を入力しましょう。
代替テキストの例
富士山の画像の代替テキスト：富士山
柴犬と散歩している画像の代替テキスト：柴犬との散歩
リストの追加
- 番号なしリスト
- 番号なしリスト
- 番号なしリスト
や
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
といったようなリストを追加する場合は、＋マークの「ブロックの追加」をクリックします。
そしたら追加できるブロックの一覧が表示されます。その中の「よく使うブロック」の「リスト」を選択します。
そしたら枠が追加されるので、リストのテキストを入力しましょう。
デフォルトでは「番号なしリスト（黒丸）」になっています。「番号付きリスト（1、2、3…）」にしたい場合は、ブロックの上のメニューから変更できます。
またテキスト（段落）同様、太字やイタリック、テキストリンクや取り消し線などの設定もできます。
引用文の挿入
引用文は、テキスト（段落）を入力した後に、ブロックの上にあるメニューの「ブロックタイプを変更」から行います。
そしたら変換項目が表示されるので「引用」を選択します。
そしたら先ほど入力したテキスト（段落）が引用文に変わります。その際、忘れずに引用元も入力しておきましょう。
引用元がWEBサイトであれば、引用元ページのタイトルと、テキストリンクを貼ります。引用元が書籍であれば、引用元の書籍のタイトル、著者名、出版年、出版元、引用ページ数などを入力します。
外部ソースの埋め込み
Youtubeやツイッターなどの外部ソースを埋め込む場合は、ブロックの追加から行います。
そしたらブロックの一覧の下にある「埋め込み」から、埋め込みたいものを選択します。
あとは外部ソースのURLを入力すれば、投稿に表示されます。
公開する
さて、投稿の設定をして、本文を入力して、プレビューを見てチェックしてOKなら、ページ上にある「公開する」ボタンをクリックして、投稿を公開していきましょう。
以上です。
この記事では初心者向けに、WordPressのGutenbergの投稿についてお伝えしました。
他にもブロックはたくさんありますし、細かい設定も出来るので、もし慣れたら自分で試してみて下さい。
それではお読みいただきありがとうございました。