WordPressブロックエディターの使い方：初心者向けガイド

WordPressのブロックエディターは、初めて開いたときは戸惑うかもしれません。レイアウトが異なり、すべてがブロックで動作するため、初心者にとっては基本的なオプションを見つけるのに予想以上に時間がかかるかもしれません。.

ただし、ブロック エディターはすべての WordPress インストール デフォルトで含まれているため、ユーザーにとっては無料のツールになります。

したがって、ブロックの仕組みがわかれば、従来のエディターよりも速くページを作成し、コンテンツを簡単にフォーマットし、レイアウトをより適切に制御できるようになります。.

ブロックエディターは直感的で柔軟性の高い設計で、ユーザーはブロックをドラッグ＆ドロップで配置できます。少し練習すれば、わずか数分でページの作成とカスタマイズができます。.

要約

• WordPress エディター ( Gutenberg) は、WordPress 5.0 でクラシック エディターに取って代わり、個別のブロックを使用してコンテンツを構築できるようになりました。

• テキスト、画像、ボタン、レイアウトなど、ページ上のすべての要素は、専用の設定を持つ独自のブロックに配置されます。.

• コードを書かずに、ブロック設定パネルから直接、色、間隔、書体、配置をカスタマイズできます。.

• ブロック パターンを使用するとすぐに使用できるレイアウトが提供され、再利用可能なブロックを使用すると、サイト全体で独自の要素を保存して再利用できます。.

WordPress ブロックエディターとは何ですか?

ブロックエディター（Gutenbergとも呼ばれる）は、WordPressのデフォルトのコンテンツエディターです。 WordPress 5.0でクラシックエディターに取って代わりました。

単一のテキストエリアではなく、個別のブロックを使ってコンテンツを構築します。段落、画像、見出し、ボタン、動画ごとに専用のブロックが用意され、個別に移動、書式設定、カスタマイズできます。.

WordPress はブロックベースのシステムに移行したため、別のページ ビルダーやカスタム コードを必要とせずに、ページ レイアウトをより細かく制御できるようになりました。.

WordPressブロックエディターとクラシックエディター

クラシックエディターでは、書式設定オプションが限られた基本的なテキストエリアしか提供されませんでした。標準的なテキストや画像以外のものを作成するには、追加のプラグインをインストールするか、技術的な知識が必要でした。.

を使用すると ブロックエディター、各要素に専用の設定を持つブロックが作成されます。コードを1行も書かずに、コンテンツの移動、列レイアウトの作成、ボタンの追加、メディアの埋め込み、間隔の調整などを行うことができます。

WordPressはクラシックエディターの開発を積極的に行いません。ブロックエディターに切り替えると、サイト全体の編集、ブロックパターン、再利用可能なブロックなど、WordPressが現在提供しているすべての機能にアクセスできるようになります。.

ブロックエディターインターフェースを操作するにはどうすればいいですか?

ブロックエディターを初めて開くと、画面上で多くのことが起こっているように感じるかもしれません。しかし、知っておくべき主な領域は3つあります。それぞれを理解すれば、エディターの操作がはるかに簡単になります。.

• 上部ツールバー： 上部ツールバーは画面上部にあります。ブロックの追加、間違いの取り消し、コンテンツのプレビュー、公開設定へのアクセスなどに使用できます。

• 設定パネル： 設定パネルは画面右側にあります。ブロックをクリックするとブロック設定が表示され、何も選択されていない場合は投稿の設定（カテゴリー、タグ、アイキャッチ画像など）に切り替わります。ここでブロックタブにアクセスし、選択したブロックの設定を行うことができます。

• ブロック挿入ツール： ブロック挿入ツールは、左上隅にある青いプラスボタンです。クリックすると検索バーが開き、ブロックを素早く検索して挿入したり、カテゴリ別に閲覧したり、保存した再利用可能なブロックを検索したりできます。

リスト ビューを使用して、レイアウトをより効率的に管理および整理することもできます。.

利用可能なブロックの種類

ブロックエディターはすべてを5つのカテゴリーに分類しています。各カテゴリーではブロックが機能ごとにグループ化されているため、ページや投稿を作成する際に必要なものを簡単に見つけることができます。.

デフォルトのブロックは幅広いコンテンツ タイプをカバーしており、ユーザーは画像、ビデオ、ギャラリーなどを含むメディアリッチなページを作成できます。.

それぞれの内容は次のとおりです。

• テキストブロック： 段落、見出し、リスト、引用、コードスニペット、表など。ページに記載するすべての内容はこのカテゴリに分類されます。

• メディアブロック： 画像、動画、音声ファイル、画像ギャラリー、ダウンロード可能なファイル。画像ギャラリーを含む複数のブロックを使用することで、視覚的に魅力的なコンテンツやメディアを豊富に活用したページを作成できます。

• デザインブロック： 列、ボタン、グループ、セパレーター、スペーサー。複数のブロックや他のブロックを組み合わせて複雑なレイアウトを構築し、コンテンツの表示方法を制御できます。

• ウィジェットブロック： 検索バー、アーカイブリスト、カテゴリーリスト、最新投稿、カレンダーなど、ページの価値を高める機能的な要素です。

• 埋め込みブロック： YouTube、Vimeo、Spotify、Twitter、その他多数のプラットフォームに対応。ブロックエディターを使えば、YouTubeやVimeoなどのサードパーティソースのコンテンツを、コードなしで簡単にページに直接埋め込むことができます。

初心者がよく使うWordPressブロック

始めたばかりの頃は、すべてのブロックを一度に覚える必要はありません。これらのブロックは、ほぼすべてのページと投稿で使用します。.

段落と見出しブロック

段落ブロックはエディターで最も基本的なブロックです。入力を始めるたびに、このブロックを使用します。コードを一切変更することなく、ブロックツールバーからフォントサイズ、テキストの色、配置を直接変更できます。.

見出しブロックは段落ブロックと連携して、コンテンツに構造を与えます。ページの構成方法に応じて、H1からH6まで選択できます。.

見出しレベルを正しく使用すると、検索エンジンがコンテンツを理解するのにも役立ち、これは SEO。

画像とメディアブロック

画像ブロックを使用すると、メディアライブラリまたはURLから直接画像をアップロードできます。画像を配置したら、左揃え、右揃え、中央揃え、サイズ調整、 SEO とアクセシビリティのための代替テキストの追加などが可能です。

複数の画像がある場合、ギャラリーブロックはそれらをすっきりとしたグリッドレイアウトで表示します。列数、画像サイズ、各画像の下にキャプションを表示するかどうかを設定できます。.

ボタンとリンクブロック

ボタンブロックを使えば、 CTA（ できます。ボタンのテキスト、リンク、背景色、境界線の半径、テキストの色はすべて、ブロック設定パネルから変更できます。

インラインリンクの場合は、段落ブロック内のテキストをハイライトし、ツールバーのリンクアイコンをクリックするだけです。コードやプラグインは不要で、わずか数秒でクリーンなハイパーリンクを追加できます。.

リストと引用ブロック

リストブロックは、ワンクリックで箇条書きまたは番号付きリストを作成します。リストのスタイルを切り替えたり、項目をインデントして入れ子リストを作成したり、段落ブロックと同様に各リスト項目内のテキストを書式設定したりできます。.

引用ブロックは、コンテンツ内の重要な発言や引用を強調表示します。テキストに視覚的な強調を加え、ページの他の部分から際立たせます。.

推薦文、重要なポイント、または読者に注目してもらいたい内容に使用します。.

ブロックを追加、移動、削除するにはどうすればいいですか?

Gutenbergエディターで行うすべての操作は 3つの要素、ブロックの追加、移動、削除という

WordPressエディターでブロックを追加する

ページや投稿にブロックを追加するには、3つの方法があります。新しいブロックを追加するには、「新しいブロックを追加」ボタンをクリックするか、スラッシュコマンド（/ に続けてブロック名を入力）を使用します。

• ブロック挿入ツール： 左上隅の青いプラスボタンをクリックすると、ブロック挿入ツールが開きます。ここでは、必要なブロックを検索または参照したり、ブロックパターンライブラリから事前にデザインされたブロックパターンやレイアウトを検索したり、挿入してカスタマイズしたりできます。

• インライン インサーター: ページ上の既存のブロックの間にマウスを移動し、その間に表示される小さなプラス ボタンをクリックします。

• スラッシュコマンド： 空の段落ブロックをクリックし、スラッシュ（/）に続けてブロック名を入力します。これは、新しいブロックを即座に追加する簡単な方法です。

Gutenberg でのブロックの移動と並べ替え

ブロックをページ上の新しい位置に移動するには、次の 3 つの方法があります。

• 矢印ボタン： 各ブロックのツールバーには2つの矢印ボタンがあります。これらを使って、ブロックの位置を1つずつ上下に移動できます。

• ドラッグ ハンドル: ブロックの左側にある 6 つのドットのドラッグ ハンドルをつかんで、ページ上の任意の場所にドラッグします。

• ドキュメントの概要: 上部のツールバーからドキュメントの概要パネルを開き、すべてのブロックが順番にリストされていることを確認し、そこからブロックを適切な位置にドラッグします。

WordPressでブロックを削除する

ブロックの削除には数秒しかかかりません。

• 3 つのドット メニュー: ブロックを選択し、ブロック ツールバーの 3 つのドット メニューをクリックして、[削除] を選択します。

• キーボードショートカット: ブロックを選択し、キーボードの Backspace キーまたは Delete キーを押すと、すぐに削除されます。

• 間違いを元に戻す: 誤って削除したブロックを復元するには、Windows では Ctrl + Z、Mac では Command + Z を押します。

コーディングなしでブロックをカスタマイズする

ブロックの外観をカスタマイズするのにコードの知識は必要ありません。WordPress エディター 、画面右側に専用の設定パネルが用意されています。

任意のブロックを選択すると、サイドバーが即座に更新され、そのブロックに対して変更できる内容が正確に表示されます。.

ブロック設定パネルから直接制御できる内容は次のとおりです。

• テキスト設定: コンテンツのスタイルに合わせて、フォント サイズ、フォントの太さ、行の高さ、文字間隔を変更します。

• カラー オプション: カラー ピッカーを使用するか、16 進コードを入力して、任意のブロックのテキストの色と背景色を更新します。

• 間隔コントロール: ブロックの周囲のパディングとマージンを調整して、コンテンツの上、下、周囲のスペースの量を制御します。

• 配置設定: レイアウトのニーズに応じて、ブロックを左、中央、右に配置するか、全幅に設定します。

• 再利用可能なパターン： 任意のブロックまたはブロックのグループを再利用可能なパターンとして保存します。毎回再構築することなく、複数のページや投稿で使用できます。

ブロックパターンと再利用可能なブロックの使用

ブロックパターンと再利用可能なブロックはどちらもページ作成の時間を節約できますが、動作は異なります。それぞれの機能について以下に説明します。.

ブロックパターンは 、WordPressエディターに組み込まれている既製のレイアウトです。ブロック挿入ツールの「パターン」タブからアクセスできます。また、 WordPress.org。

気に入ったものを選んでページにドロップし、独自のコンテンツと差し替えるだけで完成です。ゼロから構築する必要はありません。.

再利用可能なブロック は「同期パターン」と呼ばれるようになりました。これにより、独自のコンテンツを作成して保存し、サイト上のすべてのブロックで再利用できるようになります。

保存したら、同期されたパターンを任意のページまたは投稿にドロップできます。編集すると、変更は表示されるすべての場所に適用されます。.

繰り返し使用する行動喚起セクション、連絡先の詳細、免責事項などに最適です。.

ブロックエディターで初心者が犯しがちな間違い

ブロックエディターを使い始める初心者の多くは、同じ問題に遭遇します。注意すべき点は以下のとおりです。

• ブロックの使いすぎ： すべてのコンテンツに個別のブロックが必要なわけではありません。小さなコンテンツに個別のブロックを過剰に追加すると、ページの管理が難しくなり、編集ワークフローが遅くなります。

• 見出し構造の無視： 多くの初心者は、見出しの意味ではなく見た目を重視してサイズを決めます。見出しレベルは、検索エンジンにコンテンツの構成を伝えます。H2からH4へ飛ばしたり、H1を複数回使用したりすると、SEOに悪影響を与えます。

• サイドバーの設定を使わない： ブロック設定パネルは、ほとんどのカスタマイズを行う場所です。これをスキップすると、既に組み込まれているタイポグラフィコントロール、カラーオプション、間隔設定を利用できなくなります。

• 誤ってレイアウトを壊す： ドラッグハンドルを使ってブロックを移動するのは簡単ですが、間違った場所にブロックをドロップするとレイアウトが崩れることがあります。WindowsではCtrl+Z、MacではCommand+Zを押すと、元に戻して素早く復元できます。

結論

Gutenbergエディターは、初めて開いたときは見た目が威圧的に見えます。すべての要素がブロックになっており、インターフェースも新しく、基本的なオプションを見つけるのに少し慣れが必要です。.

ブロックの仕組みを理解すれば、ページの作成やコンテンツの作成がより速く、より柔軟になります。コードを1行も触ることなく、レイアウトの制御、コンテンツのカスタマイズ、そしてサイト全体の管理が可能になります。.

最もよく使うブロックから始めましょう。設定パネルの使い方を学びましょう。パターンと再利用可能なブロックで時間を節約しましょう。エディターを使い込むほど、より自然に使いこなせるようになります。.

WPブロックエディターに関するよくある質問