書き込みと編集

WordPress エディター : ブロックを使う

WordPress エディターは、サイトでページや投稿を作成するときに使います。使用方法は以下を参照してください。

目次

WordPress ブロックエディター
WordPress ブロックエディター

WordPress エディターを使用すると、さまざまなメディアを取り入れたページや投稿を作成し、簡単にレイアウトを管理できます。投稿やページのすべての要素にそれぞれのブロックができたため、テキスト、引用、画像の配置や構成を気にすることなく、内容の作成に集中できます。

各ブロックを移動、編集、カスタマイズすると、エディターには実際のサイトで見えるようにビジュアル要素が表示されるため、今まで「公開」ボタンをクリックする前にコンテンツのプレビューと再確認に費やしていた時間を節約できます。

お使いのエディターがこのガイドで説明される外観と異なる場合は、こちらで WordPress のさまざまなエディターに関する役立つ情報を参照してください。

ブロック

WordPress エディターのブロックを使用すると、コンテンツの作成方法が変わります。すなわち1つのドキュメントが、明確で調整しやすい構造を持つ個別の要素の集合になります。

新しいエディターには、ページや投稿の作成を簡単にする新機能があります。ブロックを使用すると、ショートコード、カスタム HTML コード、埋め込みが必要な複数のメディア要素やビジュアル要素をすばやく追加してカスタマイズできます。


ブロックを追加する

豊富なブロックタイプから選択できます。ブロックタイプはカテゴリー別や最近使用した順に表示されます。各ブロックは他のブロックとは関係なく編集または移動できます。また、ブロックには、レイアウトや機能をさらに強化する独自の書式設定が付いているものもあります。

ブロックを追加する
ブロックを追加する

ブロックを追加し、必要なブロックタイプを選択するには、複数の方法があります。

  1. 空白ブロックの横にある黒い + アイコンをクリックします。
  2. エディターの左上にある青い + アイコンをクリックします。
  3. 選択したブロックで Enter/Return キーを押して、その下に新しいブロックを作成します。
  4. 既存のブロックの上部中央にある黒い + アイコンをクリックして、その上にブロックを追加します。
  5. 選択したブロックのすぐ上にある3つの点をクリックし、現在のブロックの上に追加するか、下に追加するかを選択します。

デフォルトのブロックタイプは段落 (通常のテキストに使用) ですが、任意の + ボタンを押せば別のブロックタイプを選択できます。スラッシュの後にブロック名を入力して、ブロックを検索することもできます (/画像/見出しなど)。

ブロック追加のショートカット
ブロック追加のショートカット

よく使うブロックを表示する

同じブロックを何度も使うと、よく使うブロックがブロックライブラリの一番上に表示されます。

よく使うブロックのカテゴリー
よく使うブロックのカテゴリー

以下の手順に従ってよく使うブロックのカテゴリーを有効化します。

  1. エディターの画面の右上隅にある3つのドットが縦に並んだアイコンをクリックします。
  2. オプションを選びます。
  3. 「ブロックライブラリ内のよく使うブロックのカテゴリーを有効化」の横にあるボックスにチェックを入れます。
よく使うブロックのカテゴリーを有効化する
よく使うブロックのカテゴリーを有効化する

ブロックを移動する

ブロックの位置を変えるには、ツールバーの左側にマウスオーバーすると表示されるブロックのツールバーのハンドルを、クリックしたままドラッグします。上向きまたは下向き矢印を使って、指定する方向に1つ場所を動かすこともできます。

ブロックを移動する
ブロックを移動する

↑ 目次 ↑

ブロックを設定する

各ブロックには独自の設定があります。設定を確認するには、ブロックをクリックするとブロックの上部にツールバーが表示されます。また、エディターの右側にあるサイドバーには詳細設定が表示されます。

さまざまなブロックツールバーの例

段落ブロックツールバー
段落ブロックツールバー
画像ブロックツールバー
画像ブロックツールバー
リストブロックツールバー
リストブロックツールバー

ブロック設定 – ツールバー

追加のオプションについては、ほとんどのブロックに存在する、ブロックツールバーの右側にある3つのドットをクリックしてください。

  1. 「ブロック設定を非表示」を選択すると、設定メニューが閉じます。
  2. 「複製」は、2番目のブロックを同じページに同じコンテンツで作成します。
  3. 「後/前に挿入」は、現在のブロックの前後に新しいブロックを追加します。
  4. 「HTML として編集」は、ブロックを HTML バージョンに切り替えるため、HTML を直接編集できます。HTML として編集する場合、このオプションは「Edit Visually」に変わります。
  5. 「再利用可能ブロックに追加」を使用すると、ブロックのコンテンツとスタイルを保持して他のページで使用できるブロックを作成できます。さらに詳しく
  6. 「ブロックを削除」は、ページや投稿からブロックを削除します。
その他のブロックツールバー
その他のブロックツールバー

HTML として編集する際は、動作しないソースコードがあります。ソースコードが整形式でエラーがない場合は、それが承認済みの HTML タグリストに含まれていること、また、JavaScript のような制限されたソースコードではないことを確認してください。

ブロック設定 – サイドバー

エディターの右側にある「ブロック設定」には、使用しているブロックに応じてさまざまなオプションが表示されます。

右側のスクリーンショットでは、有効なブロックが「段落」であるため、フォントサイズ、フォントと背景のを変更するためのオプションと、ページジャンプを作成したり CSS クラスを追加したりするための高度なオプションがあります。

エディターの右側に「ブロック」設定が表示されていない場合は、「公開」ボタンや「更新」ボタンの横にある設定アイコンをクリックしてサイドバーメニューを展開します。

ページ設定 – サイドバー
ページ設定 – サイドバー
ブロック設定 - サイドバー
サイドバーの「ブロック」設定には、編集中のブロックに固有の追加オプションが含まれています。

ブロックタイプを変更する

ブロックタイプを変更したい場合はどうすればよいでしょうか ? ご心配ありません。ブロックは、類似または関連のブロックタイプに変換できます。たとえば、段落を見出し、リスト、または引用に変更します。

ブロックタイプを変更する
ブロックタイプを変更する

ブロックナビゲーション

ブロックの中には、ほかのブロック (親ブロックといいます) の内部にネストされている場合があり、その親ブロックを簡単に選択する方法が必要です。親ブロックを選択するには、このスクリーンショットのようにブロックのツールバーの左端に表示されたアイコンにマウスオーバーします。

親ブロックセレクター

親ブロックセレクターは、テキストを中に含むカラムブロックがあり、そのブロックを選択する必要がある場合や、複数のボタンを中に含むボタンブロックがあり、そのボタンブロック全体を選択する必要がある場合に便利です。

ほかにも、ブロックナビゲーションを使う方法があります。

ブロックナビゲーションは、ページや投稿に挿入されたすべてのブロックがドロップダウンリストになったものです。これによって、ページ構成の確認や作業する既存ブロックの選択がしやすくなります。


ブロックナビゲーションツールを表示するには、小さな箇条書きが縦に3つ並んでいるようなアイコンをクリックします。これはエディターの上部左にあるコンテンツ構造 (情報アイコン) の後にあります。

ブロックナビゲーションは、次のようなカラムブロックの中にある個別のカラムや、グループになったブロックの中にあるブロックといった、到達しにくいブロックを選択するときに特に便利です。

ブロックナビゲーションツールを使用すると、ページにあるどのブロックにも直接ジャンプして編集できます。
ブロックナビゲーションツールを使用すると、ページにあるどのブロックにも直接ジャンプして編集できます。

ブロックを削除する

ブロックを削除するには、そのブロックを選択し、そのすぐ上にあるツールバーで3つの点をクリックします。設定の中にブロックを削除するオプションが表示されます。

ブロックを削除する
ブロックを削除する

文書設定

ブロックエディターの右側にある「文書設定」メニューでは、タグカテゴリーの追加、アイキャッチ画像の選択、投稿のステータスの表示や変更などができます。これらはページまたは投稿全体に適用されるオプションです。

文書設定の各ヘッダーの横にある下向き矢印をクリックして、個別にオプションを編集します。

WordPress エディター - 文書設定
文書設定

ブロックエディターの右側に「文書設定」が表示されていない場合は、右上にあるギアや歯車のような形の設定アイコンをクリックすると「文書設定」が開きます。  

WordPress エディター - 設定

ブロックパターン

ロックパターンは、投稿やページに挿入できる事前定義されたブロックです。たとえば、あるブロックパターンでは画像を3つ横並びで挿入できます。ブロックパターンは次のような手順で挿入します。

  1. + アイコンをクリックして新しいブロックを追加します。
  2. 「パターン」のタブをクリックします。
  3. 挿入したいパターンをクリックすると、ドキュメントのカーソルの位置にそのパターンが挿入されます。

詳細は、ブロックパターンのガイドを参照してください。


追加オプション

設定アイコンの右側にある3つの点を使用して、ニーズに合わせて編集機能をカスタマイズします。

表示

編集中にブロックツールバーを表示する場所のオプションを提供します。

エディター

デフォルトでは、「ビジュアルエディター」になっています。「コードエディター」に切り替えると、ページ全体が HTML コードで表示されます。

HTML として編集する際は、動作しないソースコードがあります。ソースコードが整形式でエラーがない場合は、それが承認済みの HTML タグリストに含まれていること、また、JavaScript のような制限されたソースコードではないことを確認してください。

ツール

既存の再利用可能ブロックを管理する、すべてのコンテンツをコピーして他のページに貼り付ける、またはキーボードショートカットについて学ぶことができます。

オプション

サイドバーに表示する文書設定を選択します。

追加オプション

よくある質問

WordPress エディターで HTML を編集するにはどうすればよいでしょうか ?

独自の HTML コードを作成する場合は、カスタム HTML ブロックを追加します。

HTML コードを WordPress エディターで編集するその他のオプションについては、こちらを参照してください。

HTML として編集する際は、動作しないソースコードがあります。ソースコードが整形式でエラーがない場合は、それが承認済みの HTML タグリストに含まれていること、また、JavaScript のような制限されたソースコードではないことを確認してください。

既存のコンテンツはどのように表示されますか ?

旧エディターからブロックエディターに切り替えたばかりの場合、コンテンツの見た目は以前と変わらないはずです。既存の投稿やページを新しいエディターで編集すると、すべてのコンテンツはクラシックブロックに配置され、以前のエディターと同じ方法で処理されます。ブロックへの変換についての詳細はこちらをご覧ください。

エディターとサイトではコンテンツが同じように表示されないのはなぜですか ?

多くの場合、テーマによって異なるビジュアル要素が表示されるため、エディターとサイトのコンテンツには多少の差異が生じることがあります。テーマによっては、エディターでサイトのフロントとほぼ同じように表示できるスタイルがありますが、同じように表示できないスタイルもあります。たとえば、テーマにサイドバーが含まれている場合、サイドバーはエディターに表示されません。これがサイトのフロントに表示されると、コンテンツの幅に影響する可能性があるためです。

あるサイトで使用できる設定が、別のサイトで使用できないのはなぜですか ?

サイトで WordPress.com ビジネスプランを設定している場合は、カスタムブロックをエディターに追加するプラグインが設定されていることがあります。その場合、プラグインが設定されていない別のサイトでは使用できません。

ブロックの設定 (「ワイド」や「全幅」) によっては、テーマ別にサポートする必要があります。同じブロックを別のサイトに使用することもできますが、これらのブロックに適用できる特定の設定は、アクティブなテーマに基づいて多少異なることがあります。

古いエディターはまだ使用できますか ?
ショートコードはまだ使用できますか ?

はい。エディターにはショートコードブロックが付属しており、以前と同じようにショートコードに使用できます。今後、多くのショートコードは独自のブロックになる予定です。

このエディターは使いやすいですか ?

当社の目標は WordPress エディターを以前のエディターと同等以上に使いやすくすることです。すべてのユーザーが使用できるようにしたいと考えています。WordPress アクセシビリティコーディング標準では、「WordPress でリリースされた新しいコードまたは更新されたコードはすべて、レベル AA の WCAG 2.0ガイドラインに準拠している必要があります」と記載されています。これは例外ではありません。アクセシビリティ上の問題が発生した場合は、当社までご連絡ください

新しいエディターでは特定のテーマを使用する必要がありますか ?

いいえ、新しいブロックエディターではすべてのテーマを使用できます。ただし、一部のテーマでは特定のレイアウト機能 (「ワイド」や「全幅」のコンテンツなど) のみをサポートすることがあります。

全キーボードショートカットの一覧はどこで確認できますか ?

すべてのショートカットの一覧は、「WordPress ハンドブック」を参照してください。

ワード数やスペルチェックはどうすれば表示されますか ?

ページや投稿のワード数を表示するには、画面の左上にある丸で囲まれた「i」のように見える情報アイコンをクリックします。このオプションはデスクトップのみで表示され、モバイルでは表示されません。

文法チェックのみでスペルチェックはありません。最新のブラウザーにはデフォルトでスペルチェック機能が付いているためです。投稿のスペルチェックについてはそちらをお使いください。

このガイドは役に立ちましたか ?このガイドについてご意見をお寄せください。