この記事では、WordPress《ワードプレス》のグーテンベルグ【ブロックエディター】の基本的な使い方について解説していきます。
ブロックエディターは、テーマや導入しているプラグインによって見栄えや操作方法が若干変わります。とはいえ、それほど大きく変化することはありません。
今回は無料テーマで人気の【Cocoon】を使った場合で解説したいと思います。
まずは記事の作成をするにあたって、どこに何があるのかの画面全体の解説と基本的な使い方を解説していきます。
投稿記事作成の画面
投稿記事作成の画面は、
- 中央にある「記事を入力していくためのエディター部分」
- 「上部にあるツールバー」
- 「画面左側に表示されるメニュー」
- 「画面右側に表示されるメニュー」
大きく分けてこの４つで構成されています。
この記事では、主にこの４つについて解説していきます。
基本的な記事の書き方（エディター部分）
では最初に、基本的な記事を書いていく操作について説明します。
まずワードプレスのダッシュボードから、メニューの【投稿】→「新規追加」をクリックします。
すると、記事作成に画面になり、エディター画面の一番上に「タイトルを追加」と表示されます。
ここには記事のタイトルを入力します。
記事本文を書いていく際は、画面中央にある「ブロックを選択するには「/」を入力」をクリックすれば本文を入力することができるようになります。
この部分が、１つのブロックとして認識されています。
エンターキーを押すことで、新たに「ブロックを選択するには「/」を入力」と表示されて、新しいブロックが作られ、つまりは新しい段落が作られるようになります。
シフトキーを押しながらエンターキーを押せば、同じブロック内で改行されます。
仮に１段落空けたい場合はEnterキーを2回押す、１行空ける場合はShiftキーを押しながらEnterキーを2回押すことになります。
ただし改行と段落については、閲覧するブラウザやデバイスによっては表示が若干変わってきますので注意してください。
また、文章ではなく画像などのメディアを挿入したい場合は新しくブロックを追加して、その中に画像を入れていくことになります。
この方法については、別記事にて詳しく解説しています。
記事作成のための基本的な文字の入力方法に関してはこんな感じです。
上部ツールバー と 左側メニュー
続いて、左上に表示されているツールバーについて解説します。
Wマーク
まず、一番左にあるワードプレスの「Wのマーク」をクリックすると、記事一覧に戻ることができます。
＋マーク
次にその右側にある「＋」のアイコンは「ブロックマネージャー」といって、
記事を作成するために必要なツールが格納されています。
実際にクリックしてみると、画面左側にメニューが表示されて、その中に本文内へ追加できるさまざまなコマンドが表示されます。
もしくは、エディタ画面内の「ブロックを選択するには「/」を入力」の右側にある「黒い＋ (プラス) ボタン」か、ブロックの上下に表示される「青い＋(プラス)ボタン」をクリックすると、四角いツールが表示されます。
このツールの下に書かれている「すべて表示」をクリックすると、同じように左側に「ブロックマネージャー」が表示されます。
ブロックマネージャーを表示させると「ブロック」のタブと、「パターン」のタブの2種類が表示されます。
パターンのタブ
まず、右側の「パターン」のタブはテーマによって表示される内容が変わってきますが、テンプレートのようなものが用意されています。
テーマによっては、さまざまなパターンのテンプレートが用意されている場合があります。
今回解説している【Cocoon】のテーマの場合は、
- ボタン
- カラム
- ギャラリー
- ヘッダー
- テキスト
- クエリー
というテンプレートがあります。
例えば、ギャラリーを選択すると、その中にさまざまなパターンのテンプレートがあります。
これをクリックすると本文内に挿入されて、ここから編集していくことになります。
他にも、テキストをクリックするとさまざまな形態で書かれたテキストがあります。
とはいえ、最初からパターンを使って記事を作成するのは難しいと思うので、まずは慣れてきたらパターンを本文に挿入して編集していくようにしましょう。
ブロックのタブ
次に、「パターン」のタブの隣にある「ブロック」のタブについてです。
基本的に記事を作成していく際は、この「ブロック」というタブをメインに使っていくようになります。
ブロックのタブの中にはさまざまなコマンドが用意されています。
ブロックのタブに入っている各コマンドの使い方については、１つ１つ詳しく解説しているページを用意しました。
- ボタン
- カラム
- グループ
- 続き
- ページ区切り
- 区切り
- スペーサー
- サイトロゴ
- サイトのキャッチフレーズ
- サイトのタイトル
- アーカイブタイトル
- 投稿カテゴリー
- 投稿タグ
- ショートコード
- アーカイブ
- カレンダー
- カテゴリー
- カスタムHTML
- 最新のコメント
- 最新の投稿
- 固定ページリスト
- RSS
- ソーシャルアイコン
- タグクラウド
- 検索
- クエリーループ
- 投稿タイトル
- 投稿コンテンツ
- 投稿日
- 投稿の抜粋
- 投稿のアイキャッチ画像
- ログイン/ログアウト
- 投稿一覧
- 埋め込み
- Youtube
- WordPress
- Soundcloud
- Spotify
- Flicker
- Vimeo
- Animoto
- Cloudup
- Crowdsignal
- Dailymotion
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- ReverNation
- Screencast
- Scribd
- Slideshare
- SmugMug
- Speaker Deck
- TikTok
- TED
- Tumblr
- VimeoPress
- WordPress.tv
- AmazonKindle
なお、これらのコマンドは上の検索窓で名前を入力して検索することもできます。
ペンマーク
その右のペンマークのアイコンは「ツール」といって編集画面と選択画面の切り替えができます。
ベースは編集画面になっていますが、選択画面に切り替えると、ブロックの配置入れ替えがしやすくなり、キーボードのカーソルキーで上下に移行しやすくなります。
作成したページの全体像を把握するときに便利です。
戻るボタン・進むボタン
その右にある「左矢印アイコン」は編集内容を１つ前に戻すボタン、さらにその隣の「右矢印のアイコン」は「元に戻した行為を取り消す」ボタンになります。
iマーク
その右の「iマーク」はinformation（インフォメーション）の意味で、編集したページのデータを表示します。
文字数、単語数、見出し数、段落数、ブロック数が表示され、全体の構成がどのようになっているか、目次のようなものを見ることができます。
３本線のアイコン
そして一番右にある「３本線のアイコン」は「リスト表示」というもので、ページ全体のブロックの構成を簡単に確認することができます。
実際に表示してみると、現在本文内に作られているブロックが一覧で表示されます。
リストの１つをクリックしてみると、そのブロックを選択することができ、編集することができるようになります。
ページ全体の記事構成を把握するにはとても便利です。
右側メニュー
続いて、右側のパネルについて解説していきます。
右側のパネルを開く場合は、画面右上にある「ギアマーク」をクリックすることでパネルの表示・非表示を切り替えることができます。
パネルを表示させると、「投稿」と「ブロック」の２つのタブがあります。
ブロックのタブ
まずは「ブロックのタブ」についてです。
これはエディター画面に追加していく各ブロックに対して細かな設定を行なうことができます。
ちなみに先ほど解説した「ブロックマネージャー」の中にあるさまざまなコマンドの中で、どのコマンドをエディターに追加するかによって、この「ブロックのタブ」に表示されるメニューが変化します。
例えば、ブロックに「段落」を挿入するのか、それとも「画像」を挿入するのかで、表示されるメニューが異なります。
この「ブロックのタブ」については、操作も含めて 別記事で解説しています。
投稿のタブ
次に【投稿】のタブに関しての解説をしていきます。
「投稿のタブ」では作成する投稿記事本文に関する設定を行うことができます。
基本的に、この投稿のタブの設定についてはクラシックエディタと内容は変わりません。
ただし、テーマや導入しているプラグインによっては表示内容が異なる場合があります。
それでは上から順に解説していきます。
【ステータスと公開状態】
まず、一番上の【ステータスと公開状態】ではページを公開するにあたっての設定を行ないます。
「表示状態」というのはこのページを公開するのか、それとも非公開にするのか、もしくは特定の相手のみ閲覧できるようにパスワード保護するのかを設定することができます。
「公開」の項目は公開予約をすることができます。《今すぐ》をクリックするとカレンダーが表示されますので、公開したい日にちと時間帯を自由に指定することができます。
その下の「ブログのトップに固定」のチェックを入れると、このページをブログのトップページにすることができます。
「レビュー待ち」にチェックを入れると権限を持つ人の承認を得てから公開できるようになります。
個人で運用している場合は特に使うことはありません。
「ゴミ箱へ移動」をクリックすると記事をゴミ箱へ入れることができます。
一度ゴミ箱に入れても、再度取り出して、また編集することもできます。
【パーマリンク】
【パーマリンク】では、記事のURL設定を行なう項目で、URLの末尾を好きな文字に変更できます。
できるだけ英単語にして記事と関連性のある単語を入れましょう。
ちなみに、設定する前に、必ず「下書き保存」をしておいてください。
下書き保存をしないと、入力欄が表示されませんので注意してください。
【カテゴリー】
【カテゴリー】では、現在書いている記事を、どのカテゴリーに入れるかを設定します。
デフォルトでは、一番上にあるカテゴリーに属するようになっています。
また、すべてのチェックを外しても、保存後は強制的に、一番上にあるカテゴリーに属するようになっています。
【タグ】
【タグ】では、投稿の中の重要なキーワードを入力します。
複数ある場合には、コンマで区切ります。
タグに関しては使用する人としない人で分かれますが、タグを設定することで、読者がブログ内にある同じキーワードに関係する記事を見つけやすくなります。
記事が増えてきたら設定してみるのもアリです。
【アイキャッチ画像】
ここでは、アイキャッチ画像を設定します。
アイキャッチ画像は、記事を一覧で表示した際のサムネイルとしてや、OGPの画像として表示されるものです。
また、設定次第では記事の一番上に表示させることもできます。
【抜粋】
【抜粋】は、記事紹介の際に記事内容を要約したり、本文の一部を表示させる際に使用します。
例えば、検索エンジンの検索結果に表示されるスニペットや、外部リンクとして表示される場合とか、内部リンクで表示される場合などに使われます。
この抜粋の項目を入力していない場合は、記事の冒頭の文章が強制的に表示されるようになります。
【ディスカッション】
【ディスカッション】では、投稿のコメントやピンバック、トラックバックなどを設定する項目です。
コメントはSEOに影響されると言われますので、コメントを許可する場合はなるべくチェックを入れておきましょう。
逆にスパムやアンチなコメントなどを避けたい場合にはチェックを外しておきましょう。
ピンバック、トラックバックについては、特にチェックを入れる必要はありません。
【広告】
この【広告】の項目では、Google Adsenseなどの広告をブログ内に掲載している場合、「広告を除外する」にチェックを入れることで、このページのみ広告が表示されなくなります。
【ページ設定】
次に、その下の【ページ設定】に進みます。
まず、「メインカテゴリー」では、メニューにも説明の記載がありますが、記事を複数のカテゴリーに設定した場合、どのカテゴリをメインとして表示するかの設定になります。
例えば、下記のようなインデックスカード（エントリーカード）を表示した場合、複数のカテゴリーに設定していたとしても、実際に表示されるカテゴリー名は１つだけなので、ここにどのカテゴリーを表示させるのかといった設定になります。
初心者の方は、まず使用しないと思いますので、立ち上げたばかりの頃はスルーして問題ありません。
その下の「ページタイプ」では、ページ全体のカラム数を設定することができます。
≪デフォルト》をクリックすると、
- １カラム（広い）
- １カラム（狭い）
- 本文のみ（広い）
- 本文のみ（狭い）
の４パターンから選ぶことができます。
LPなどを作る際には便利です。
その下の「読む時間を表示しない」にチェックを入れると、記事全体をどのくらいの時間で読むことができるかを表示しなくなります。
注意が必要なのは、デフォルトでは表示されるようになっているので、表示したくない場合はチェックを入れましょう。
その下の「目次を表示しない」は、チェックを入れることで、目次を表示しなくなります。
【更新日の変更】
【更新日の変更】 では記事を更新した際に表示する「更新日」についての設定を行ないます。
「更新」は記事内容を変更して更新した日をそのまま表示します。
「更新しない」は前回更新した日から変更せずに表示します。
「更新日の消去」は更新日を表示しません。
「更新日の設定」では、お好きな日時と時間を設定して表示させます。
【レビュー】
ここではgoogleの検索結果に、記事に対する星評価を表示するかどうかの設定ができます。
「評価を表示する」にチェックを入れると表示されるようになります。
検索エンジンには、実際にこのような感じで表示されるようになります。
「レビュー対象」はどのような記事に対しての評価なのかジャンルを選択できます。
その下の「レビュー対象名」は、レビューするものの名前を入力します。
例えば、こちらの記事で『Nintendo Switch』のことを書いているなら、ここにはNintendo Switchと記載します。
「レビュー評価」では、星を何個つけて表示させるかを設定できます。
ただし、このレビュー機能を使用した場合、Googleサーチコンソールから警告の通知が届く場合があります。
エラーじゃない限りは特に問題ありませんが、Googleからのペナルティを受ける可能性もありますので
気になる方は使用しないようにしましょう。
【リダイレクト】
この【リダイレクト】は、読者がこのページにアクセスした際に別のURL先に飛ばすことができる機能です。
リダイレクトさせるURLを入力すると、たとえこのページのURLを表示していたとしても、ここで設定したページへ移行します。
【AMP】
ここでは【AMP】の設定をします。
デフォルトではAMPが設定されていますが、「AMPページを生成しない」にチェックを入れるとモバイル端末で最適化されなくなります。
【メモ】
この【メモ】では投稿に関する簡単なメモ書きができます。
管理用なので、このメモが実際の投稿ページで表示されることはありません。
【SNS画像】
CocoonのOGP設定をしている場合、SNSにこのページのURLを載せたときに、ここで設定した画像が優先的に表示されるようになります。
「選択」をクリックするとメディアライブラリが表示されて、保存してある画像を選択できるようになります。決定すると、選択した画像と画像のURLが表示されます。
未設定の場合はアイキャッチ画像が表示されます。
【その他】
ここではアーカイブに表示させるか、フィードに表示させるかの設定ができます。
デフォルトでは表示されるようになっているので、各項目で表示させたくない場合には「アーカイブに出力しない」と「フィードに出力しない」にチェックを入れましょう。
画面右上ある「点３つのアイコン」 （ケバブボタン）
続いて、画面右上ある「点３つのアイコン」のケバブボタンについて解説します。
この「点３つのアイコン」をクリックすると編集画面全体のオプション設定を行うことができます。
ここでの設定は記事ごとに毎回設定する必要はなく、一度設定すると、これ以降、投稿を作成する際に引き継がれます。
また、投稿ページのみだけではなく、固定ページを作成する際も共通して設定が保存されます。
ただし、テーマや導入しているプラグインによっては表示内容が異なる場合があります。
【表示】
「トップツールバー」
チェックを入れると、ブロック作成に使用するツールを編集画面上部に表示させることができます。
チェックを外すと、ブロックをクリックした際に、ブロックのすぐ上に表示されるようになります。
画面上に表示されると邪魔だという方はチェックを入れることをオススメします。
「スポットライトモード」
チェックを入れるとクリックしたブロック以外の色が薄くなります。
「フルスクリーンモード」
チェックを入れると、ワードプレスのメニューなど記事を書く以外のツールは全て隠れます。
【エディター】
ここでは、「ビジュアルエディター」と「コードエディター」の切り替えを行うことができます。
基本的には、デフォルトでチェックが入っている「ビジュアルエディター」を使って文章を入力していきます。
「コードエディタ」というのは、主にHTMLやCSSなどのコードを入力するためのもので、「クラシックエディタ」で言うところの「テキストエディタ」になります。
「コードエディタ」で入力したコードが「ビジュアルエディタ」に反映されるようになります。
↓
【ツール】
続いて、【ツール】の項目に入ります。
ここは主に操作についての設定になります。
《ブロックマネージャー》
ここでは、編集画面の左上にある「＋マーク」の中にあるコマンドの［表示、非表示］の設定を行うことができます。
デフォルトでは、全てが表示されるようになっていますが、使い慣れてくると徐々に必要ないコマンドが明確になってくるので、その段階で非表示にしてみましょう。
《 再利用ブロックの管理 》
「再利用ブロック」というのは、本文に簡単に追加することができる定型文のようなものです。
ここではご自身で作った定形文を管理する項目になります。
再利用ブロックの作り方については、別記事にて解説しています。
クリックすると、別ページに移行し、管理画面が表示されます。
作成した定型文のタイトルがありますので、クリックすると定型文の内容を編集することができます。
《 キーボードショートカット 》
ここでは、投稿を編集する際に使用する基本的なショートカットキーを一覧で確認することができます。
時間短縮に便利なので、ぜひ覚えて活用しましょう。
《 ウェルカムガイド 》
これは、ブロックエディターの簡易的な解説が表示されます。
かなり簡易的なので、特に見る必要はありません。
《 全てのコンテンツをコピー 》
ここは作成した記事の内容を全てコピーすることができます。
同じ内容のものを複製して別の投稿編集ページに貼り付けたい場合やバックアップの時などに活用しましょう。
《 ヘルプ 》
ここをクリックすると、ワードプレスが提供するブロックエディターのヘルプページに飛びます。
ただし、そこまで詳しく解説しているわけではありませんし、載っている画面が英語表記のため分かりにくい可能性があります。
ツール・アイコンの場所や名称などは実際に操作しながら覚えていった方が早いので、サッと目を通す程度に留めておきましょう。
【設定】
続いて【設定】の項目に入ります。
ここでは、編集画面全体の外観に関して設定することができます。
《 一般 》
「公開前チェックリストの追加」をONにすると公開ボタンをクリックした際に「公開してもよろしいですか？」と右側のメニューに表示されるようになります。
そして、公開状態、公開、提案などの確認項目が表示されます。
逆にOFFにすると公開ボタンをクリックしたら即座に公開されるようになります。
「インターフェイスの削減」はONにすると、上部のツールバーが非表示なります。
メニューバーがあったところにカーソルを合わせると、表示されるようになります。
OFFにすると消えることなく常に表示されるようになります。
「スポットライトモード」は先ほどの「表示」の項目にあったコマンドと同じものなので説明は割愛します。
「ブロックのパンくずリストを表示」これは「インターフェイスの削減」をOFFにした場合のみ表示されます。
編集画面下部に操作しているブロックに関してのパンくずを表示するかどうかの設定になります。
ONにして表示してみると下に細い空欄ができて、そこにパンくずが表示されるようになります。
パンくずは実際にクリックすることもできて、例えば、複雑なブロックを作成している場合、全体を選択したいとき、文章のみを選択したいとき、画像のみを選択したいときなど、どこを押せば選択されるか分からない時に使うことができます。
操作に不慣れな場合は表示しておきましょう。今回はONにしておきます。
《 外観 》
「ボタンラベルを表示」をONにするとアイコン表示だったツールが全てテキスト表示に変化します。
テーマによっては変な日本語になる場合があります。
好みによりますが、ここではOFFにします。
「テーマスタイルの使用」をONにするとテーマが提供している外観に変更されます。
ちなみに今回はONにしてあるので、Cocoonが提供する外観になっています。
テーマによっては大きくデザインが変化する場合もありますし、あまり変化しないテーマもあります。
OFFにすると、もともとのシンプルなデザインになります。
《 ブロック 》
ここでは、ブロックに関する設定を行ないます。
「よく使用されるブロックを表示」をONにすると編集画面左上のツールバーにある「＋」マークをクリックした際に、一番上に「よく使うもの」という項目ができ、頻繁に使用されるコマンド一覧が表示されるようになります。
その下の、「ブロック内にテキストカーソルを含める」は、ONにしておくと、キーボードの十字キーの上下を操作した際に、ブロック間を移動できなくなります。
常にマウスやマウスパッドで操作する人は問題ありませんが、キーボードの十字キーを使って移動するクセがついている人はチェックを外しておきましょう。
《 パネル 》
ここでは、右側のコントロールパネルに表示させる項目を設定することができます。
デフォルトではカスタムフィールド以外が表示されるようになっています。
カスタムフィールドというのは、記事のタイトルや本文以外に、独自で別の情報を追加してブログに掲載することができる機能です。
実際に追加してみると、記事を書く欄の下に、このような入力欄が表示されるようになります。
初心者の時点では、まず触ることはありませんので、特に変更せず、デフォルトのままでOKです。
まとめ
これで、ブロックエディタの画面全体の説明については以上になります。
今回は初心者向けに最低限必要な設定についてお伝えしました。
とくにCocoonのテーマを使う場合はテーマの設定に加えて設定項目がかなり多くなってしまいます。
ですので、まずは簡単な設定を行ない、記事作成に注力しましょう。
今後、運用に慣れてきたら徐々に自分なりの設定に変更していってください。