書き込みと編集

WordPress エディター

WordPress エディターは、サイトでページや投稿を作成するときに使用します。エディターの使用方法はこちらをご覧ください。

WordPress エディターのすべての機能に関する包括的なガイドです。

すぐに開始するには、ブロックを介したコンテンツの追加方法に移動し、これらの動画を視聴するか、こちらでご利用方法のチュートリアルをご覧ください

目次

カバーブロック、テキスト、ボタンのある WordPress エディター。
WordPress ブロックエディター

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

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


WordPress エディターの要素

WordPress エディターには3つの主要なエリアが存在します。トップメニュー、サイドバーメニュー、メインコンテンツエリアです。

WordPress エディタートップメニュー

エディター上部のオプション (ブロックを追加、投稿を公開、設定メニューを開くなど) を表示。
WordPress エディタートップメニュー

トップメニュー設定

プラスアイコン。

ブロックを追加 – すべての利用可能なブロック、ブロックパターン、再利用可能なブロックを表示します。

鉛筆アイコン

モード – ツールを使用して、ブロックの選択と編集に関するさまざまな操作を行うことができます。選択するには、Esc キーを押します。編集に戻るには、Enter を押します。

右矢印と左矢印アイコン。

取消とやり直し – 操作を取り消したり、やり直したりします。

i を円で囲んだ情報アイコン。

詳細 – ドキュメントで使用された文字、単語、見出し、段落、ブロックの数です。

ずれて並んだ3本の横線。

概要 – ページで使用されているすべてのブロックのリスト表示です。別のブロックに移動する場合に役立ちます。

ページまたは投稿を公開する前に、これらのオプションが表示されます。

「下書きを保存」、「プレビュー」というテキストが含まれるリンクと、「公開」と書かれたボタン。

下書きを保存 – ページまたは投稿の下書きを保存します。
プレビュー – テーマを適用したページまたは投稿の表示を確認します。
公開 – ページまたは投稿を公開します。

ページまたは投稿を公開すると、これらのオプションが表示されます。

「下書きへ切り替え」、「プレビュー」というテキストが含まれるリンクと、「更新」と書かれたボタン。

下書きへ切り替え – ページまたは投稿を非公開にし、下書きに切り替えます。
プレビュー – テーマが適用されたページまたは投稿を表示します。
更新 – 公開されたページまたは投稿を、新しく追加されたコンテンツを含むよう更新します。

設定アイコン。

設定 – ページ、ドキュメント、ブロック設定のサイドバーメニューを表示または非表示にします。

真ん中に「A」が表示されたアイコン。

グローバルスタイル – グローバルスタイルをサポートするテーマを使用している場合、このオプションを適用するとサイト全体のフォントスタイルを変更できます。

Jetpack の緑と白のアイコン。

Jetpack – 「いいね」のオンとオフの切り替え、個別のページと投稿の共有、ソーシャル共有のプレビュー、ページまたは投稿の短縮リンクの入手が可能です。

3つの縦向きのドット (...) アイコン。

オプション – 「オプションを表示」、「エディタースタイル」、追加のツールを開きます。

WordPress エディターサイドバーメニュー

トップメニューの「設定」、「グローバルスタイル」、「Jetpack」アイコンをクリックすると、別のサイドバーメニューが開きます。

📌

ブロックエディター内でサイドバーメニューが表示されない場合は、トップメニューで「公開」または「更新」ボタンの横にある3つのアイコンのうちいずれかをクリックします。

設定

「設定」サイドバーメニューにはページとドキュメントの設定が含まれます。

特定のブロックをクリックすると、各ブロックタイプに特有の追加のブロック設定が、「設定」サイドバーメニューに含まれます。

設定アイコンが有効になったトップメニュー。
設定アイコン

グローバルスタイル

グローバルスタイルサイドバーを使用すると、サイト全体の見出しとベースフォントに使用されるデフォルトのフォントを変更できます。

グローバルスタイルアイコンが有効になったトップメニュー。
グローバルスタイルアイコン

Jetpack

Jetpack サイドバーメニューを使用すると、次のことが可能です。

Jetpack アイコンが有効になったトップメニュー。
Jetpack アイコン

WordPress エディターコンテンツエリア

WordPress エディターの3つ目の要素は、ほとんどの時間を過ごす場所でもあります。コンテンツのブロックを追加する、エディターのメインセクションです。

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

💡

すぐに記事の作成を開始して、後でページのレイアウトを検討することも、レイアウトはそのままにすることも可能です。

ライターまたはブロガーとして WordPress エディターを使用する際の優れたガイドをご確認ください。


↑ 目次 ↑

ブロックを介してコンテンツを追加する

WordPress エディターでは、ブロックを使用してコンテンツを作成します。テキスト、画像、動画、音声、コラム、スペース、改ページ、支払いボタン、カレンダーなど、思いつくかぎりすべての種類の要素向けのブロックが存在します。


↑ 目次 ↑

ブロックを追加する

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

WordPress エディターに新しいブロックを追加するさまざまな方法の画面録画です。
ブロックを追加する

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

💡

ブロックを追加する最も迅速な方法は、画面上で「+」アイコンを見つけることです。「+」アイコンが表示されたら、クリックしてブロックを追加できます。

または、空白のエリアで入力を開始すると、段落ブロックが表示されます。

  1. 空のブロックの横にある黒の「+」アイコンをクリックします。
  2. エディターの左上の「+」アイコンをクリックします。このオプションは、異なるブロックスタイルをプレビューするときに役立ちます。
  3. 選択したブロックで Enter/Return キーを押して、その下に新しいブロックを作成します。
  4. 選択したブロックのすぐ上にある3つの点をクリックし、現在のブロックの上に追加するか、下に追加するかを選択します。

異なるブロックの名前を確認したら、フォワードスラッシュに続けてブロック名を入力して (「/image」、「/heading」など)、ブロックを追加します。

異なるブロックを検索する「/keyboard」ショートカットの使用例。
ブロック追加のショートカット

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

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

  1. エディター画面の右上の「…」アイコンをクリックします。
  2. 「設定」を選択します。
  3. 「よく使うブロックを表示」の横にあるボックスにチェックを入れます。
「よく使うブロックを表示」にチェックの入った「一般設定」。
よく使うブロックを表示

「よく使うブロック」オプションが選択されると、ブロックライブラリを通じてよく使うブロックを閲覧できます。

ライブラリにアクセスするには、トップメニューの「+」(プラス) アイコンをクリックします。よく使うブロックがライブラリの上部に表示されます。

よく使うブロックの表示が展開されたブロックライブラリ。
よく使うブロックのカテゴリー

↑ 目次 ↑

ブロックを移動する

ブロック内をクリックしたときに表示される、ブロックのツールバーの6つの点をクリックしたりドラッグしたりすることで、ブロックを移動できます。また、上矢印と下矢印を使用してブロックを移動させることもできます。

ブロックを移動する

↑ 目次 ↑

ブロックをカスタマイズする

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

📌

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

強調表示された「公開」ボタンの横にある設定アイコン。

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

ブロックの上にある段落ブロックツールバー。
段落ブロックツールバー
ブロックの上にある画像ブロックツールバー。
画像ブロックツールバー
ブロックの上にあるリストブロックツールバー。
リストブロックツールバー

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

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

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

⚠️

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

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

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

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

📌

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

強調表示された「公開」ボタンの横にある設定アイコン。
テキスト、色、AMP 設定などの段落ブロックオプションを表示しているブロック設定サイドバー。
サイドバーの「ブロック」設定には、編集中のブロックに固有の追加オプションが含まれています。

↑ 目次 ↑

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

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

段落から引用または見出しにブロックタイプを変更する、ブロックツールバーオプションの画面録画。
ブロックタイプを変更する

↑ 目次 ↑

ブロック操作 (ブロックの選択)

ブロックの中には、ほかのブロック (親ブロックといいます) の内部にネストされている場合があり、その親ブロックを簡単に選択する方法が必要です。 

たとえば、全幅にしたいカラムブロックがあるとします。個別のカラムをクリックしても、このオプションは提供されません。親ブロック (カラムブロック) に移動すると、カラムブロックのレイアウトスタイルを変更できます。

親ブロックを選択するには、このスクリーンショットでブロックのツールバーの左端に表示されているアイコンにカーソルを合わせます。

ブロックツールバーで親ブロックオプションにカーソルを合わせる画面動画。

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

また、詳細メニューを使用し、ページまたは投稿に追加したブロックを介して移動することもできます。

ページまたは投稿に使用されたブロックのリストを表示するよう展開された、トップメニューの詳細メニュー。

詳細メニューは、ページまたは投稿に挿入したブロックのドロップダウンのリストです。これによって、ページ構成の確認や作業する既存ブロックの選択がしやすくなります。


詳細メニューにアクセスするには、3本の横線が描かれた、小さなチェック付きリストのようなアイコンをクリックします。これはエディターの上部左にあるコンテンツ構造 (情報アイコン) の後にあります。

詳細メニューは、カラムブロック内の個別のカラムや、グループになったブロック内のブロックといった、到達しにくいブロックに移動するときに特に便利です。

特定のブロックを展開、選択して有効化する画面録画。
ブロックナビゲーションツールを使用すると、ページにあるどのブロックにも直接ジャンプして編集できます。

↑ 目次 ↑

ブロックを削除する

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

展開されたブロックツールバーの「...」メニューから、強調表示された「ブロックを削除」オプションを選択。
ブロックを削除する

↑ 目次 ↑

ブロックパターン

ブロックパターンは投稿やページを挿入できる一連のブロックです。視覚に訴えるパターンを用いてコンテンツを簡単に追加できます。

たとえば、あるブロックパターンでは画像を3つ横並びで挿入できます。

ブロックパターンは次のような手順で挿入します。

  1. 「+」アイコンをクリックして新しいブロックを追加します。
  2. 「パターン」のタブをクリックします。
  3. 挿入したいパターンをクリックすると、ドキュメントのカーソルの位置にそのパターンが挿入されます。
トップメニュー展開時の「+」アイコンと、利用可能な異なるブロックパターンを表示するパターンオプションが選択されています。

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


↑ 目次 ↑

ページまたは投稿をプレビューする

ブロックエディターでは、公開されたときページがどのように表示されるかを視覚的に確認できますが、テーマまたはテーマのカスタマイズが適用された場合、わずかな変更が加えられることがあります。

ボックスが強調表示されたプレビューオプション。
トップメニューのプレビューボタン

プレビューオプションは、お客様が作業をしている間にページ、テーマ、保存されたテーマのカスタマイズ (カスタム CSS など) を読み込みます。

プレビューでは、ページまたは投稿がデスクトップ、タブレット、モバイルデバイスでどう見えるかも確認できます。WordPress ビジネスプラン以上のプランを使用している場合、検索およびソーシャル共有でのページの表示をプレビューすることもできます。

デスクトップ、タブレット、スマートフォン、ソーシャルでプレビューするオプションを表示するプレビューオプション。
さまざまなデバイスでプレビューする

↑ 目次 ↑

文書設定

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

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

📌

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

強調表示された「公開」ボタンの横にある設定アイコン。

↑ 目次 ↑

追加オプション

設定アイコンの右側にある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」のように見える情報アイコンをクリックします。このオプションはデスクトップのみで表示され、モバイルでは表示されません。

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

このガイドは役に立ちましたか ?