WordPress5.4のブロックエディター「Gutenberg(グーテンベルク)」使い方・基本編

WordPress

  • HOME
  • ブログ
  • WordPress
  • WordPress5.4のブロックエディター「Gutenberg(グーテンベルク)」使い方・基本編

投稿日:2020年7月9日 更新日:2024年3月16日

WordPress5.0から採用された新しいエディタ「Gutenberg(グーテンベルク)」での記事投稿方法をご紹介します。
このページで使用している画像はWordPress5.4を元に作成しており、パソコンからの投稿を前提とした基本的な機能の使い方をご紹介していきます。
スマートフォンやタブレットでは管理画面の構成が若干異なりますが、スマートフォンからでも投稿が可能です。

ブラウザの種類は、WindowsならGoogle ChromeやFirefox、MicrosoftのEdge、MacならSafariをおすすめします。
IE(インターネット・エクスプローラー)ではうまく表示されないことがあるのでご注意ください。

目次

  1. WordPress管理画面にログイン
  2. 記事を投稿する画面を表示
  3. タイトルの入力
  4. 本文の入力
  5. 写真を挿入する場合
  6. カテゴリーを選択
  7. タグの設定
  8. アイキャッチ画像の設定
  9. 記事の公開
  10. 記事ページの確認
  11. 記事の編集
  1. WordPress管理画面にログイン
  2. WordPressの管理画面ログインページにアクセスし、「ユーザー名」「パスワード」を入力しログインします。
    (【ログイン状態を保存する】にチェックを入れておくと、次回からログインを省略できます。)

    WordPressへの投稿方法 ログイン画面
  3. 記事を投稿する画面を表示
  4. 左メニューの投稿を選択し、新規追加をクリックします。

    WordPressへの投稿方法 投稿 新規追加
  5. タイトルの入力
  6. 「タイトルを追加」という枠に記事のタイトルを入力します。
    ユーザーが興味を持ってくれるようなキーワードを交えて、わかりやすいタイトルをつけましょう。

    Gutenberg(グーテンベルク)タイトルの入力
  7. 本文の入力
  8. 基本的な本文の入力方法

    「文章を入力、または/でブロックを選択」というところに本文を入力してきます。

    Gutenberg(グーテンベルク)本文の入力

    文章を入力し、キーボードのEnterキーを押すと、新しいブロック(段落)が追加されていきます。

    Gutenberg(グーテンベルク)本文の入力 段落ブロック

    同じブロック内で改行する方法

    新しいブロック(段落)ではなく、同じブロック内で改行をしたい場合は、キーボードのShitキーを押しながらEnterキーで改行します。

    Gutenberg(グーテンベルク)本文の入力 Shift+Enterキーでブロック内改行

    ブロックの移動方法

    入力したブロックを移動させるには、移動させたいブロック内にカーソルを置くとブロック左側に移動ツール(上下矢印)が表示されますので、上に移動下に移動のいずれかを選択して移動させます。

    Gutenberg(グーテンベルク)ブロックの移動

    あるいは、ブロック全体をつかんでドラッグして移動することもできます。
    移動させたい場所に一旦カーソルを置いておきます。次に移動させたいブロック内にカーソルを置くと表示される移動ツール(上下矢印)の真ん中をつかんで、移動させたい場所までドラッグします。

    Gutenberg(グーテンベルク)ブロックをドラッグして移動

    ブロックとブロックの間に新しいブロックを追加する方法

    入力したブロックとブロックの間に新しいブロックと追加するには、追加したい箇所の上のブロック内にカーソルを置き、表示される枠の下の方にマウスをもっていくとマーク(ブロックの追加)が表示されます。

    Gutenberg(グーテンベルク)ブロックとブロックの間に新ブロックの追加

    マークをクリックするとブロックの候補が表示されるので、追加したいブロックを選択します。文章を追加する場合は段落を選択します。

    Gutenberg(グーテンベルク)ブロックとブロックの間に段落ブロック追加

    ブロックを削除する方法

    ブロックを削除するには、削除したいブロック内にカーソルを置き、ブロックツールバーを表示させます。一番右端の詳細設定メニュー「詳細設定」メニューをクリックして、表示される項目の一番下のブロックを削除をクリックで削除できます。

    Gutenberg(グーテンベルク)段落ブロックの削除
  9. 写真を挿入する場合
  10. 画像の挿入方法

    写真を挿入したい箇所にカーソルを合わせ、マークをクリックします。
    ブロックの候補が表示されるので、その中から画像マークをクリックします。

    Gutenberg(グーテンベルク)画像の挿入

    タイトルの左上の方にあるマークをクリックしてもブロックの候補が表示されますので、どちらのマークでも同様です。

    Gutenberg(グーテンベルク)画像の挿入 タイトル左上メニューより挿入

    画像マークをクリックすると、画像を挿入する画面が表示されます。
    画像ファイルをアップロード(PCの中の画像をアップロードする)、メディアライブラリから選択(既にワードプレス管理画面内のメディアに入っている画像から選択)、URLを追加のいずれかの方法で画像をアップロードします。

    Gutenberg(グーテンベルク)画像の挿入

    PC内の画像をアップロードする場合

    作業を行っているPCの中に保存されている画像をアップロードする場合は、アップロードボタンをクリックします。
    PC内のフォルダが立ち上がりますので、アップロードしたい画像を選択し開くボタンをクリックすれば画像が挿入されます。

    Gutenberg(グーテンベルク)画像のアップロード

    メディアライブラリから選択する場合

    既にワードプレス管理画面内のメディアに入っている画像を使用する場合は、メディアライブラリから画像を選択します。

    Gutenberg(グーテンベルク)メディアライブラリ内から画像を選択

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

    Gutenberg(グーテンベルク)メディアライブラリから選択

    メディアライブラリ画面の中のファイルをアップロードタブをクリックして、新たに画像をアップロードすることもできます。

    Gutenberg(グーテンベルク)メディアライブラリ内で画像のアップロード

    「ファイルをドロップしてアップロード」するか、ファイルを選択ボタンをクリックし、PC内のフォルダを立ち上げてアップロードしたい画像を選択すると、メディアライブラリ内にアップロードされます。

    Gutenberg(グーテンベルク)メディアライブラリ内で画像のアップロード

    画像のAltテキスト(代替テキスト)の設定

    画像を挿入したら、画面右サイドのブロックメニューの画像設定からAltテキスト(代替テキスト)を設定します。Altテキストとは画像そのものを簡潔に説明するテキストで、実際の記事上には表示されませんが、検索される上で大変重要なテキストとなりますので適切に設定をしましょう。
    また、Altテキストは視覚に障がいがある方などが利用する音声ブラウザで画像の代わりに読み上げられるテキストにもなります。
    但し、画像が意味を持たない単なる装飾の場合は空白のままにしておきます。

    Gutenberg(グーテンベルク)画像のAltテキストの設定

    画像キャプションの設定

    Altテキスト(代替テキスト)とは別に、記事上の画像の下にキャプションを設定することができます。キャプションは画像の下に実際に表示されるテキストで、画像の補足説明として使用します。
    特に補足説明が不要な場合、キャプションは空白のままにしておきます。

    Gutenberg(グーテンベルク)画像のキャプション設定

    画像サイズの変更

    挿入された画像は基本的に大サイズで表示されますが、画像サイズを変更したい場合は、画面右サイドのブロックメニューの画像設定からサイズを変更することができます。

    Gutenberg(グーテンベルク)画像のサイズ変更

    画像の配置変更

    挿入された画像は基本的に「左寄せ」に配置されていますが、「中央寄せ」や「右寄せ」に変更することもできます。
    画像ブロックツールバーの左から2つ目のアイコン画像の配置メニューをクリックし、配置したい項目を選択します。

    Gutenberg(グーテンベルク)画像の配置変更
  11. カテゴリーを選択
  12. 記事の入力が完了したら、カテゴリーを選択します。
    画面右サイドに投稿ブロックの2つのメニューが並んでいますので、左側の投稿メニューをクリックします。

    Gutenberg(グーテンベルク)投稿の文書メニュー

    画面右サイドの文書メニューの中のカテゴリーをクリックし、設定されているカテゴリーの中から記事の内容に合うカテゴリーにチェックを入れます。
    初期状態は「未分類」にチェックが入っているので、「未分類」のチェックを外し、該当するカテゴリーを選択して下さい。

    Gutenberg(グーテンベルク)カテゴリーの選択
  13. タグの設定
  14. タグとは記事の内容を表すキーワードのことで、タグを設定することでユーザーに記事を見つけてもらいやすくなります。
    画面右サイドの文書メニューの中のタグをクリックし、赤枠の中にキーワードを入力してEnterキー押します。
    タグは複数設定することができます。キーワードを入力して半角コンマ、またはEnterキーで区切ることで複数のタグを設定できます。

    Gutenberg(グーテンベルク)タグの設定
  15. アイキャッチ画像の設定
  16. アイキャッチ画像は記事ページの一番上に表示される画像で、記事を代表するシンボル的な画像となります。ユーザーに興味をもってもらえるような画像を設定しましょう。
    画面右サイドの文書メニューの中のアイキャッチ画像をクリックし、アイキャッチ画像を設定をクリックします。

    Gutenberg(グーテンベルク)アイキャッチ画像の設定

    メディアライブラリ画面が表示されます。
    新たに画像をアップロードする場合はファイルをアップロードをクリックします。

    Gutenberg(グーテンベルク)アイキャッチ画像のアップロード

    アップロードする写真をドロ ップするか、ファイルを選択ボタンからパソコン内の写真を選択してアップロードします。

    Gutenberg(グーテンベルク)アイキャッチ画像のアップロード

    写真をアップロードするとメディアライブラリ画面になり、アップロードした写真にチェック が入ります。
    画面右サイドの「代替テキスト」「タイトル」「説明」の枠に画像の説明文を短くまとめて入力しておきます。実際の記事ページには表示されない内部的な説明文となり、3つ共同じ文言で問題ありません。
    (「代替テキスト」については「画像のAltテキスト(代替テキスト)の設定」を参考にして下さい。)
    アイキャッチ画像を設定ボタンをクリックして設定完了です。

    Gutenberg(グーテンベルク)アイキャッチ画像のアップロード 詳細設定
  17. 記事の公開
  18. 最後に管理画面右上にある公開ボタンをクリックすれば投稿の完了です。

    Gutenberg(グーテンベルク)記事の公開

    下書き保存というテキストをクリックすると、公開せずに一旦下書き状態で保存しておくことも可能です。
    プレビューボタンをクリックすると、実際の記事ページの出来上がりを別ウィンドウで確認することができますので、公開前にプレビューで確認しておくと安心です。
    プレビューで確認したページURLは実際の記事ページURLとは異なり、プレビュー用のURLとなります。)

  19. 記事ページの確認
  20. 公開した記事ページを確認するには投稿を表示ボタンをクリックします。
    この場合、管理画面が記事ページに切り替わって表示されます。

    Gutenberg(グーテンベルク)公開した記事の確認

    画面右サイドの公開パネルを閉じて、投稿メニューの中のパーマリンクをクリックし、表示されるURLをクリックすると、管理画面とは別のタブで記事ページが表示されます。

    Gutenberg(グーテンベルク)公開した記事を別タブで確認
  21. 記事の編集
  22. 投稿した記事を後から編集することも可能です。
    左メニューの投稿を選択し、投稿一覧をクリックします。

    WordPressへの投稿方法 投稿の編集 投稿一覧

    投稿一覧から編集したい記事タイトルを選択すると、新規投稿する時と同じ画面で編集することができます。

    WordPressへの投稿方法 投稿の編集 投稿一覧

Gutenberg(グーテンベルク)関連記事

あなたは現在のホームページの効果に満足していますか?

徹底的にアクセス解析することにより、まだまだ改善できる箇所があるはずです。
まずは無料コンサルティングをうけてみてはどうでしょうか。
すばらしい提案をする自信があります。

無料相談はこちら
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事一覧

カテゴリー

月別アーカイブ