wordpress（ワードプレス）ブロックエディターの使い方

ブロックごとに編集できる
自由度の高いエディター

これまでのクラシックエディターとは違い、文章・画像・ボタンなどを「ブロック」として個別に配置・編集できるのが特徴。

ブロック単位でデザインを調整できるため、コードを使わずに美しいレイアウトを作成する事が可能です。

豊富なブロック種類で
直感的に操作できる

見出し・段落・画像・ギャラリー・ボタン・埋め込み（YouTubeなど）といった様々なブロックが用意されています。

ドラッグ＆ドロップで簡単に配置でき、HTMLやCSSの知識がなくてもプロ並みのページを作れます。

プラグインで機能拡張も可能

ブロックエディター専用のプラグインを使えば、カスタムデザインやアニメーション、問い合わせフォームなどを追加できます。

「Spectra」「Kadence Blocks」などのプラグインを導入すると、より多機能なブロックが使えるようになり、自由度がさらにアップします。

誰でも簡単におしゃれなホームページを作れるので、ぜひ試してみてください。

「＋」ボタンからブロックを追加

エディターの左上、または本文エリア内に表示される「＋」ボタンをクリックすると、ブロックの一覧が表示されます。

そこから「見出し」「段落」「画像」などのブロックを選び、クリックすると簡単に追加できます。

スラッシュ入力（/）で素早く挿入

段落の中で「/（スラッシュ）」を入力すると、ブロックの候補が表示されます。

たとえば「/見出し」と入力すれば、すぐに見出しブロックを追加可能。キーボード操作だけで素早くブロックを設置できます。

見出しブロック

記事のタイトルや各セクションの見出しを作成するブロック。

H1～H6の階層を指定できSEO対策にも重要。適切な見出しを使うことで読みやすく整理されたコンテンツが作れます。

段落ブロック

テキストを入力する基本のブロック。フォントサイズや色を変更でき、読みやすさを調整可能。改行も簡単で、文章をスムーズに構成できます。

画像ブロック

画像を挿入できるブロック。アップロードやメディアライブラリから選択可能。サイズ調整や配置変更、リンク設定もでき、視覚的に魅力的なページを作成できます。

スペーサーブロック

余白を作るためのブロック。ブロック同士の間隔を調整し、見た目をスッキリ整えるのに便利。数値で高さを自由に設定可能です。

カラムブロック

コンテンツを複数の列に分けて配置できるブロック。左右に画像とテキストを並べたり、複雑なレイアウトを作るのに役立ちます。レスポンシブ対応で、スマホでも自動調整されます。

「カラム」ブロックを配置

１、レイアウトを２つに分けるために「カラム」ブロックを配置。いくつかレイアウトパターンがありますが、今回は2カラムの「50/50」を選択。

左カラムから「画像」カラムを選択

2、左カラムのプラスボタンを押して「画像」ブロックを選択。　　　　　　　　　　

画像のアップロード

３、そうすると画像の選択画面が出てきます。新たに画像をアップロードして掲載したい場合は「アップロード」。メディアライブラリーから画像を掲載したい場合は「メディアライブラリー」をクリック。

右のカラムから「見出し」ブロックを選択

4、左カラムに画像を配置できたら、次に右のカラムに「見出し」ブロックを配置します。

右カラムのプラスボタンを押して「見出し」ブロックを選択。

「スペーサー」ブロックを選択

５、「見出し」ブロックを配置したら、次に配置する「段落」ブロックの間にスペースを設けたいので「スペーサー」ブロックを設置します。

「見出し」ブロックから改行すると「/」または「＋」が出てくるので、そこから「スペーサー」ブロックを選択してください。

6、スペーサーブロックは右パネルにて幅を調整できます。今回は幅を20pixelに設定。

「段落」ブロックを配置

７、「スペーサー」ブロックを改行して次に「段落」ブロックを配置します。

「段落」ブロックは基本ブロックなので、改行した時点ですでに「段落」ブロックとなっています。なので「段落」ブロックを利用した場合は、「ブロックを選択するには「/」を入力」という文字を上書きしてテキストを記載してください。

2カラムレイアウトの完成

8、上記の手順でブロックを設置していくと、参照画像のようなレイアウトができます。

9、応用編として、レイアウトの土台になっている「カラム」ブロックを選択して「複製」すると、同じレイアウトが下に掲載されます。

このように掲載内容のボリュームを増やしていってください。