WordPress(Gutenberg)の記事の投稿方法【初心者向け】

WordPressのGutenbergとは、WordPressのバージョン5.0から標準となる投稿エディターのことです。

この記事では、Gutenbergでの記事の投稿方法についてまとめました。全ての機能の解説はしません。初心者向けということで、記事を投稿するための必要最低限なポイントに絞ってお伝えしていきます。

これまでのWordPressの投稿方法とは少し異なるのですが、慣れてしまえば難しくも何ともありません。むしろ楽に感じるかも。

ということでさっそく見ていきましょう。まずは投稿の設定についてお伝えしていきますね。

「投稿」の「新規投稿」から投稿する

WordPressで新しく記事を投稿するには、WordPressの管理画面の「投稿」の「新規投稿」をクリックします。

WordPressの投稿を新規追加する

すると、以下のようなシンプルな画面が表示されます。

Gutenbergの投稿編集画面

このページから投稿を作っていきます。

まずは投稿の設定をしていきましょう。

投稿の設定

デフォルトだと設定枠が表示されていないので、先に表示させます。

画面右上の歯車の「設定」アイコンをクリックします。

Gutenbergの投稿編集画面。設定を表示させる。

すると画面の右側に、以下の設定が表示されます。

Gutenbergの投稿設定

まずはこの設定を済ませていきます。これも一つずつお伝えしますね。

ステータスと公開状態

Gutenberg。ステータスと公開状態

「ステータスと公開状態」の項目では、公開中の投稿を非公開にしたり、公開日時を変更したりすることが出来ます。もし投稿を済ませたあとにそれらを変更したい場合は、この項目から設定してみてください。

また「先頭に固定表示」にチェックを入れることで、トップページの投稿一覧の先頭に表示されるようになります。

その下の「レビュー待ち」にチェックを入れると、管理画面の投稿一覧に「レビュー待ち」というテキストが追加されます。が、これは誰かにレビューをしてもらう時に使うくらいで、個人でWordPressを運営しているならまず使わないですね。なので無視でOKです。

カテゴリー

カテゴリーを開いたら、これから作る投稿にマッチしたカテゴリーを選択しましょう。

カテゴリーの作り方に関しては、以下の記事を参考にしてみて下さい。

タグ

その投稿に合ったタグ(キーワード)を入力します。

が、これは任意で構いません。僕は基本的に使用していないです。

アイキャッチ画像

アイキャッチとは、投稿ページの一番上に表示される画像のことです。

アイキャッチには、読者の目を引かせる役割があるので、出来れば設定したいところです。

アイキャッチ画像

↑投稿の上に表示される画像がアイキャッチ

「アイキャッチ画像の設定」をクリックして、投稿にマッチする画像を選択しましょう。

Gutenbergでアイキャッチを設定する

アイキャッチ画像は、アップロードする前に圧縮して、ファイルサイズを小さくしておくことをおすすめします。

というのも、画像のファイルサイズが大きいと、ページ表示速度が遅くなることがあるからです。

ページの表示速度が遅くなればなるほど、ページを読み切らずに閉じてしまう読者が増えます。

なので、画像は圧縮しておきましょう。圧縮する際は、無料ツールの『TINYPNG』がおすすめです。画像をアップロードするだけで、画質をある程度保ったまま圧縮してくれます。

またWordPressのプラグインの『EWWW Image Optimizer』も使うと、さらに画像を圧縮することが出来るのでおすすめです。

アイキャッチ画像をネットから探す場合は、商用利用OKで完全無料のサイトから探すことをおすすめします。僕の記事『ブログ画像におすすめのサイト25選【無料・商用OK・クレジット表記不要】』でおすすめの画像サイトを紹介しているので、参考にしてみてください。

抜粋

Gutenbergの投稿の抜粋設定

抜粋に入力した文章は、検索結果のスニペットという部分に表示されます。

スマホでの検索スニペットは最小で全角58.5文字表示される

↑赤線引いた箇所が抜粋部分のテキスト

スニペットは、ページのクリック率に影響すると言われています。なので、空欄にするのではなく、しっかり記載するのがベストです。

記載する時のポイントは以下の3つです。

  • 検索ユーザーが知りたいこと(結論)から書く
  • ページを読むメリットを書く
  • 「読んでみて下さい」という行動促し文を書く
詳しい抜粋の書き方については、僕の別の記事『meta descriptionの表示文字数は日本語でPC約110文字、スマホ約60文字』を参考にしてみて下さい。

ディスカッション

Gutenbergの投稿のコメント設定

ディスカッションは、投稿のコメントやピンバック、トラックバックなどを設定する項目です。

「コメントを許可」も「ピンバックとトラックバックを許可」も、二つともチェックを入れておきましょう。というのも、コメントもピンバックなども、検索順位(SEO)に良い影響を与える可能性が高いからです。

実際、「コメント欄が盛り上がることは検索結果に良い影響を与える」と、GoogleのGary氏はツイッターでつぶやいていました

僕自身も、コメントはあったほうが良いと考えています。SEOに良いのもそうですが、読者の考えを知れますし、投稿の改善のヒントが得られることがあるからですね。

なので、どちらにもチェックを入れておくことをおすすめします。

更新日

Gutenbergの投稿の更新日設定

更新日はデフォルトのままでOKです。

さてこれで設定は完了です。次は本文の入力についてお伝えしていきます。

投稿の本分の入力

この記事でお伝えすることは、以下の9つです。

  1. Gutenbergのブロックについて
  2. タイトルの追加
  3. パーマリンクの入力
  4. 見出しの入力
  5. テキスト(段落)の入力
  6. 画像の挿入
  7. リストの追加
  8. 引用文の挿入
  9. 外部ソースの埋め込み

これも一つずつお伝えしていきます。

Gutenbergのブロックについて

Gutenbergで投稿を作るときに、最も重要な「ブロック」という概念についてお伝えします。これさえ理解してしまえば、投稿が楽になるはずです。

従来のWordPressと比較しながらお伝えしますね。

まず従来のWordPressについてですが、投稿する際は、見出しやテキスト(段落)、画像やリスト(箇条書き)、また引用などの要素は、一つの編集画面の中に入力していました。

↑従来のWordPressでは、一つの編集画面(エディター)の中に要素を入力する。

ただ、Gutenbergでは、見出しやテキスト(段落)などの要素の一つ一つが「ブロック」というもので分けられます。

別の図で見てみましょう。

従来のWordPressは、ページの中に各要素があるイメージです。

一方Gutenbergは、ブロックという要素が積み重なってページが作られるイメージです。

Gutenbergと旧エディターの違い

なのでGutenbergでは、ブロックという要素を追加して投稿ページを作っていく流れになります。

イメージできたでしょうか?

さてそしたら、まずはタイトルを入力していきましょう。

タイトルの追加

Gutenbergの投稿でのタイトル入力

「タイトルを追加」と書かれているブロックをクリックして、タイトルを入力していきます。

タイトルのポイントは4つです。

  • 全角32文字以内におさえる
  • キーワードを前の方に入れる
  • 分かりやすい表現にする
  • 他のサイトと被らないようにする
タイトルの付け方については別の記事『ブログ記事タイトルの7つの決め方と事例|ポイントは結論を書くこと』でお伝えしています。参考にしてみて下さい。

パーマリンクの入力

Gutenbergの投稿画面でのパーマリンク編集

タイトルを入力すると、パーマリンク(投稿のURL)が表示されます。

デフォルトだと、タイトル名がそのままURLの一部になります。ただこれだと長すぎてしまうし、SEO的にも良くないので編集していきます。

なので、パーマリンクの右側に表示されている「編集」をクリックして、個別のパーマリンクをつけていきましょう。

パーマリンクは以下のポイントを意識して付けていきます。

  • キーワードを入れる
  • シンプルにする
  • 分かりやすい英文にする
  • アンダースコア( _ )ではなくハイフン( – )を使う
  • 日本語(ひらがな、カタカナ、漢字)は使わない
パーマリンクについては、別の記事『WordPressのパーマリンクについて』で詳しくお伝えしています。参考にしてみて下さい。

見出しの入力

見出しの入力方法はいくつかありますが、簡単でシンプルな方法をお伝えします。

まずは編集画面に表示されている、Tのマーク(見出しの追加)をクリックします。

Gutenbergに見出しタグを追加する

そしたら見出し枠が表示されるので、見出しテキストを入力します。

見出しのレベル(h2、h3、h4)を変えたい場合は、ブロックの上に表示されるメニューから選択します。

Gutenberg 見出しタグの変更

テキスト(段落)の入力

テキスト(段落)の入力方法もいくつかありますが、これもシンプルな方法をお伝えしますね。

といっても難しいことはなくて、「文章を入力…」とグレー字で書かれている個所をクリックして、テキストを入力するだけです。

Gutenbergで段落を追加する

テキストを中央や右に寄せたり、太字にしたり、イタリック(斜め)にしたり、テキストリンクをつけたり、取り消し線をつけたりしたい場合は、ブロックの上のメニューを選択してください。

Gutenbergの段落を編集

またテキストのサイズや色の変更は、右側に表示される「設定」から出来ます。

Gutenbergの段落のフォントサイズや色変更

ただ、背景色やテキストの色は、そのテキスト(段落)全体に反映されてしまいます。現時点では、指定の一部のテキストだけ変更することは出来ないので、その点は注意しましょう。

画像の挿入

画像を投稿に入れるには、編集画面に表示されている画像のマーク(画像の追加)をクリックします。

Gutenbergで画像を追加する

そしたら、画像をアップロードするか、すでにアップロードされている画像(メディアライブラリ)から選ぶか、選択肢が表示されます。

Gutenbergで画像をアップロードする

新しい画像であれば、アップロードを選択(もしくはドラッグ)します。またすでにアップロードされてる画像から選択する場合は、メディアライブラリを選択します。

画像をアップロードする前は、ページの表示速度を遅くしないためにも、圧縮してからアップロードすることをおすすめします。アップロードは先ほどもお伝えした『TINYPNG』がおすすめです。

また画像の「代替テキスト」に、画像の内容を説明する言葉を入力しておくことをおすすめします。

なぜなら、検索エンジンにどんな画像なのかを正しく認識させるためです。

代替テキストの編集方法もいくつかあるのですが、ブロック状のメニューの「画像を編集」からでも出来ます。

Gutenbergの投稿。挿入した画像の編集。

そしたら画像の詳細情報が表示されるので、「代替テキスト」の部分に画像の内容を説明する文章を入力しましょう。

代替テキストの編集

代替テキストの例

富士山の画像の代替テキスト:富士山
柴犬と散歩している画像の代替テキスト:柴犬との散歩

リストの追加

  • 番号なしリスト
  • 番号なしリスト
  • 番号なしリスト

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト

といったようなリストを追加する場合は、+マークの「ブロックの追加」をクリックします。

新しいブロックを追加する

そしたら追加できるブロックの一覧が表示されます。その中の「よく使うブロック」の「リスト」を選択します。

Gutenbergでリストを追加する

そしたら枠が追加されるので、リストのテキストを入力しましょう。

デフォルトでは「番号なしリスト(黒丸)」になっています。「番号付きリスト(1、2、3…)」にしたい場合は、ブロックの上のメニューから変更できます。

Gutenbergのリスト編集

またテキスト(段落)同様、太字やイタリック、テキストリンクや取り消し線などの設定もできます。

引用文の挿入

引用文は、テキスト(段落)を入力した後に、ブロックの上にあるメニューの「ブロックタイプを変更」から行います。

ブロックタイプの変更

そしたら変換項目が表示されるので「引用」を選択します。

ブロックタイプを引用に変更

そしたら先ほど入力したテキスト(段落)が引用文に変わります。その際、忘れずに引用元も入力しておきましょう。

Gutenbergの引用。引用元を記載する

引用元がWEBサイトであれば、引用元ページのタイトルと、テキストリンクを貼ります。引用元が書籍であれば、引用元の書籍のタイトル、著者名、出版年、出版元、引用ページ数などを入力します。

外部ソースの埋め込み

Youtubeやツイッターなどの外部ソースを埋め込む場合は、ブロックの追加から行います。

新しいブロックを追加する

そしたらブロックの一覧の下にある「埋め込み」から、埋め込みたいものを選択します。

Gutenbergの外部ソース埋め込み

あとは外部ソースのURLを入力すれば、投稿に表示されます。

公開する

さて、投稿の設定をして、本文を入力して、プレビューを見てチェックしてOKなら、ページ上にある「公開する」ボタンをクリックして、投稿を公開していきましょう。

Gutenbergの投稿の公開ボタン

以上です。

この記事では初心者向けに、WordPressのGutenbergの投稿についてお伝えしました。

他にもブロックはたくさんありますし、細かい設定も出来るので、もし慣れたら自分で試してみて下さい。

それではお読みいただきありがとうございました。

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える