WordPressをインストールしてホームページやブログのページを作る際に、エディター(編集ページ)の使い方がいまいちよくわからない初心者の方も多いです。
本記事では、WordPress(ワードプレス)のブロックエディターの使い方をWordPressを初めて触る方でもわかるように解説していきます。
ブロックエディターの基本的な使い方
【超基本】ブロックエディターの使い方概要
WordPressのエディターは、ブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。
固定ページまたは投稿の編集画面は下記のようになっています。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
(※)上記はWordPress6.3の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。
まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。
管理画面には左上のアイコンをクリックすると戻ることができます。
■ブロックを追加する例。※追加した後は右ツールバーが非表示になるので「設定」ボタンから再度表示して設定できます。
【超基本】段落ブロックでテキストを入力する
まずは最も基本のテキストを入力方法を覚えましょう。
テキストは段落ブロックを利用します。段落ブロックは通常エディター末尾でエンターボタンを押下することで追加できます。あるいは+ボタンから「段落」を選択して挿入することができます。
Enterによる改行とShift+Enterによる改行の違い
改行する際に、Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。
一方、段落で文章を書いている途中でShift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。
■Shift+Enterによる改行と、Enterによる改行の違い
段落ブロックのスタイル変更
段落ブロックで挿入したテキストを装飾したい場合は、右側にあるメニューかブロック上部ツールバーから設定変更することができます。
【超基本】見出し・画像・リストを使ってページ作成する
つぎに、利用頻度の高い見出し・画像・リストを使ってページ作成していきましょう。
見出しブロックを挿入して見出しを作る
+ボタンを押して、「見出し」を選択します。ブロック間の間にカーソルを合わせて表示される+からブロックを間に挿入することもできます。
見出しを追加する
なお、ブロックを選択すると下記のようにブロックのすぐ上にツールバーが表示されます。見出しの場合は、見出しレベルの変更やテキスト揃え、太字斜体などの設定ができます。右のメニューアイコンからブロック削除することもできます。
また、見出しのブロックを選んだ状態で、右サイドバーから(表示されていない場合は、右上の設定アイコンを押して表示できます)、色やその他の設定ができます。
画像ブロックを挿入して画像を表示する
次に画像を挿入してみましょう。右下+ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。
(参考)【画像ブロック】WordPressブロックエディター画像ブロックの使い方
リストブロックを挿入して箇条書きを作る
次にリストブロックを利用して箇条書きを作ってみましょう。リストのアイコンを選択すると、箇条書きを作ることができます。
なお、リストブロックには外側の「リスト」ブロックと内側の「リスト項目」から構成されています。
外側のリストブロックでは、リスト全体の装飾・スタイルなどを行えるのに対して、内側の各リスト項目ブロックでは、各リストの色や大きさなどの設定をそれぞれ設定できます。
(参考)WordPress箇条書き/番号付きリストの作り方【リストブロック】
【基本】2カラム(2列横並び)のレイアウトを作成する
横並びのレイアウトを作るには、カラムブロックを利用します。
カラム挿入後に2列や3列などのレイアウトを選択します。カラムブロックの中にさらに画像や段落など任意のブロックを挿入できます。後から比率を変えたり列数を変えることもできます。
■表示例(PCでは横並びでスマホの場合は縦に並びます)
カラムブロックは外側のブロックと内側のブロックから構成されており、外側ブロックでは列数(カラム数)、内側ブロックでは横幅%など、設定できる項目が異なります。
(参考)【WordPressカラムブロック】画像等の横並び方法・作り方
ナビゲーションを利用してブロックを選択する方法
カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入するのに苦労する場面があります。
■複数の+がある場合にブロック挿入位置が変わることに注意
左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます。
まだ、左上の「三」に似たアイコンをクリックするとブロックをリスト表示でき、そこからブロックを選ぶこともできます。(左下のリストから選択することもできます)
■ブロックナビゲーションを活用してピンポイントで対象ブロックを選択する
ブロックをあとから挿入・移動・削除する
既存のブロックの間に新たにブロックを挿入したり、既存のブロックを移動したり、削除することもできます。
既存のブロックを移動する
既存のブロックの左側の矢印を選択すると、ブロックの順番を変更することができます。
SHIFTボタンを押しながら複数のブロックを選択した状態で矢印を選択すると、複数ブロックまとめて順番を変更することもできます。
また、点々のあるアイコンをクリックしたままドラッグ&ドロップでブロックを任意の場所に移動することもできます。
既存のブロックの間に挿入する
すでに作成したブロックとブロック境目にカーソルを合わせると「+」ボタンが表示されます。「+」ボタンを押下すると既存のブロックの間に新しいブロックを挿入することができます。
うまく「+」ボタンが出てこない場合は、一度エンターを押して空白を作ってから右にある「+」を押すとブロック間に新しいブロックを挿入できます。
既存のブロックを削除する
既存のブロックを削除したい場合は、既存のブロックを選択して、詳細設定アイコンの中の「ブロックを削除」をクリックします。
ブロックを選択してコピー&ペーストする
一度作成したブロックはコピー&ペーストして利用することができます。
対象のブロックを選択してツールバー右上のオプション>コピーから、ブロックをコピーできます。
貼り付けたい箇所で右クリック>貼り付けで貼り付けすることができます。カーソルが合わせられない場合は段落ブロックを挿入してそこにカーソルを合わせて貼り付けます。
ブロックを貼り付けることができました。
ブロックを複数選択して、オプション>ブロックのコピーでコピーすることもできます。
(参考)WordPressブロックのコピペ方法(コピー&ペースト)
ページを下書き保存・公開をする
ある程度ページを作成したら、保存しましょう。下書き保存を選択すると、下書き(公開していない)でページを保存することができます。
ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。
一度ページを公開してから再度下書きに戻したい場合は「下書きに戻す」ボタンを押下します。
【参考】ブロックエディター編集画面の各項目の説明
WordPresの編集画面では、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
- メインエリア・・・タイトルや本文を作成するエディター画面。ブロック単位でページを作成していくメインエリア
- 上部ツールバー・・・管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定できる
- 右ツールバー・・・アイキャッチ・公開設定・パーマリンクなどの文書設定や、各ブロックの設定を行うことができる
メインエリア(エディター)でできること
メインエリアでは、タイトルや文章画像などをブロックという単位で作成していきます。
上部ツールバーでできること
上部ツールバーでは、管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定・確認することができます。
上部ツールバーで設定できる項目は下記の通りです。
項目(アイコン) | 説明 |
---|---|
管理画面への移動(固定ページ一覧または投稿一覧へ戻ることができる) |
|
ブロックを追加することができる |
|
ブロックの選択・編集モードを切り替えることができる |
|
一つ前の操作に戻る・一つ後の操作に次へ進むことができる |
|
ブロックナビゲーション。「リストビュー」タブでは現在アクティブな箇所のブロックの位置がわかる
「アウトライン」タブでは文書の概要や利用ブロックの種類・数がわかる |
|
下書き保存・プレビュー画面表示・公開がそれぞれできる
PCアイコンをクリックするとタブレット・モバイルでのプレビューも可能 |
|
エディターの設定ボタン。右ツールバーの表示・非表示の切り替えができる |
|
ツールと設定をさらに表示 |
ツールと設定をさらに表示できる。具体的には表示モードやエディターモード、ツール、オプション設定が可能 |
右ツールバーでできること
右ツールバーでは、文書の設定や各ブロックの設定ができます。
「投稿」タブを選択すると、公開の設定やパーマリンク、アイキャッチ、(投稿の場合は)カテゴリー・タグなどの、この文書(ページ)全体の設定ができます。
また、任意のブロックにカーソルを合わせると、(「ブロック」タブが選択されている状態の)右側メニューでそのブロックの設定ができます。
覚えておくと便利なブロックと使い方
次に、覚えておくと便利なブロックと使い方をご紹介していきます。
利用頻度の高い便利なブロック一覧
WordPressで比較的よく利用する便利なブロックは下記の通り。
項目 | 説明 |
---|---|
段落ブロック | 通常のテキストを入力するためのブロック ※詳細記事 |
見出しブロック | 見出しを入力するためのブロック ※詳細記事 |
リストブロック | リスト(箇条書き)を入力するためのブロック ※詳細記事 |
画像ブロック | 画像を入力するためのブロック ※詳細記事 |
カラムブロック | カラム(2列・3列横並び)を定義するためのブロック ※詳細記事 |
カスタムHTMLブロック | HTML文を入力するためのブロック ※詳細記事 |
メディアとテキストブロック | 画像とテキストを横並びにするブロック ※詳細記事 |
ギャラリーブロック | ギャラリー画像(画像を一覧表示したもの)を入力するためのブロック ※詳細記事 |
スペーサーブロック | 縦に空白を入れるためのブロック ※詳細記事 |
ボタンブロック | ボタンリンクを入れるためのブロック ※詳細記事 |
テーブルブロック | テーブル(表)を入力するためのブロック ※詳細記事 |
動画ブロック | 動画(mp4)を入力するためのブロック ※詳細記事 |
カバーブロック | 背景画像・背景色を設定するするためのブロック ※詳細記事 |
ファイルブロック | PDFファイルなどを表示・ダウンロードさせるためのブロック ※詳細記事 |
最新の投稿ブロック | WordPressの最新の投稿一覧を挿入するためのブロック ※詳細記事 |
ショートコードブロック | ショートコードを入力するためのブロック |
グループブロック | ブロック同士をグルーピングするブロック ※詳細記事 |
【カスタムHTMLブロック】HTMLコードを記述する方法
カスタムHTMLを選択すると、任意のHTMLをページ内に挿入することができます。
下記は、GoogleMapの埋め込みコードをページ内に挿入する例です。
(関連)【WordPress】GoogleMap(グーグル マップ)を埋め込む方法
HTMLとして編集する
なお、任意のブロックの詳細設定で「HTMLとして編集」を選択すると、既存のブロックをHTMLのソースコードとして編集することができます。
ただし、独自に編集したものはそのままブロックに戻すことができなくなるので注意です(以降もHTMLとして編集する形になります)
(関連記事)WordPress カスタムHTMLブロックの使い方を徹底解説
【メディアとテキスト】画像とテキストを横並びにする方法
「メディアとテキスト」は、画像とテキストを横に並べて表示したり、画像・テキストそれぞれの幅を簡単に調整できるブロックです。
検索枠に「メディアとテキスト」と入力して、表示された「メディアとテキスト」を選択します。
メディアとテキストブロックの挿入ができました。
メディアエリアには画像や動画を設定できます。
「アップロード」または「メディアライブラリ」から画像をアップロードします。
これで画像が設定できました。続いてテキストエリアの設定をしていきましょう。テキストエリアには「+(ブロックを追加)」から見出しブロックやボタンブロックなど、通常のブロックが挿入できます。
ここでは例として見出しや段落、ボタンを追加してみましょう。
(参考)【画像と文章を横並び】WordPressメディアとテキストの使い方
【ギャラリーブロック】画像を列数指定して横並びにする方法
ギャラリーのように画像を横並びで表示させたい場合はギャラリーブロックが便利です。
まずは、ギャラリーブロックを挿入してみましょう。投稿または固定ページ編集画面を開き、「+」ボタンを押して「ギャラリー」を選択、自分の好きな画像を選択します。
スマートフォンの場合は、通常は下記のように2列で表示されます。
(参考)WordPressギャラリーブロックの使い方・ギャラリー画像の作り方
【スペーサーブロック】縦に余白・空白を入れる方法
スペーサーブロックとは、ブロックとブロックの間に余白の高さを設定することができるブロックです。
余白を入れたい箇所でブロックの追加>スペーサーを選択します。
スペーサーブロックが挿入されました。
ブロックとブロックの間にスペーサーを入れる
ブロックとブロックの間にスペーサーを入れるには、段落と段落の間にあるプラスのボタンをクリックして追加することができます。
スペーサーの高さは、右側のブロックの設定メニューからpx単位で変更することができます。
(関連)【スペーサーブロックの使い方】ブロック間・行間の余白の高さの設定
【ボタンブロック】ボタンリンクを挿入する方法
ボタンブロックを利用するとボタンリンクを作ることができます。ボタンは色や角丸など簡単な装飾も可能です。
ブロックの追加からボタンブロックを選択します。
ボタンブロックが挿入されました。
ボタンの文言を入力してみましょう。
上ツールバーからボタンのリンクを設定することができます。リンクボタンをクリックします。
ボタンのリンク(URL)を入力して確定しましょう。以上でボタンの追加は完了です。
(参考)【WordPressボタンの作り方】リンク・色・デザイン設定方法
【テーブルブロック】表を挿入する方法
テーブルブロックを利用すると下記のような表を作成することができます。
まず、ブロック追加「+」をクリックして「表」を選択します。
「列数」「行数」をそれぞれ指定します。ここでは初期状態「列数:2」「行数:2」で表を作成します。※列数・行数に関しては後からでも追加変更できます。
2列2行の表が作成されました。
中身を入力していきます。
右上のアイコンをクリックしましょう。右に表ブロックのメニューバーが表示されます。
「settings」タブにある「ヘッダーセクション」を選択すると、表の一番上にヘッダー行が表示されます。
表にヘッダーの行が追加されました。ここではヘッダー(1行目)に相当する文言「セミナー名」「参加費用」を入力します。
後からテーブルの列や行を挿入・削除することができます。下記はテーブルの編集アイコンから右に列を挿入した例です。
(参考)【WordPressテーブルブロック】表の作り方・編集方法
【動画ブロック】mp4などの動画を入れる方法
動画ブロックを利用すると、mp4ファイルなどの動画を挿入・表示させることができます。
動画ブロックを挿入するには、投稿あるいは固定ページの編集画面で「+(ブロックを追加)」をクリックします。
検索枠に「動画」と入力し(画像ではない)、出てきたこちらのブロックを追加します。
これで動画ブロックが追加できました。
デスクトップ上にある動画ファイルを使用する場合は「アップロード」、すでにアップロードしている動画を使用したい場合は「メディアライブラリ」を選択し実際に動画を挿入してみましょう。
これで動画ブロックが挿入されました。
なお、iphoneの場合は動画再生時に全画面の別ウインドウで再生されます。Web上に埋め込んだ状態で再生させるにはインライン再生にチェックを入れます。
(参考)WordPress動画ファイルの挿入方法・動画ブロックの使い方
【カバーブロック】背景画像・背景色をつける方法
カバーブロックを使うと、ページ内に背景画像や背景色を入れたり、その上に任意のテキストや見出しなどの任意のコンテンツを載せることができます。
ブロックの追加からカバーを選択後、背景に画像を設定してその上に見出しや段落を入力することができます。
【WordPerssカバーブロック】背景画像・背景色を入れる方法
※カバーブロックはレンタルサーバーによってはWAFが誤検知する場合があり、保存ができなくなる事象があります。
(関連)【WAF無効/除外設定】ロリポップで403or保存できないエラーが出たとき
【ファイルブロック】PDFファイルなどを表示・ダウンロードさせる方法
PDFやWord(docx)、Excel(xlsx)のファイルなどを表示・ダウンロードしてもらいたい時はファイルブロックを活用すると便利です。
ブロックの追加から「ファイル」を選択します。
ファイルブロックが追加されます。
「アップロード」ボタンをクリックして、以下のようにアップロードしたいPDFファイルなどを選択して「開く」を押します。※すでにメディアライブラリにPDFファイルがある場合は、メディアライブラリを押下して選択できます。
デフォルトではPDFをアップロードすると、以下のようにPDFの中身が見える状態で表示されます。
とりあえずここでは中身が見えない状態にしたいので、「PDF設定>インライン埋め込みを表示」をOFFにしておきます。
ファイル名を日本語にしている場合、以下のように「ad968・・・」といった英数字に変換されてしまう(※注)ので、再度日本語のファイル名「スクールのカタログはこちら(PDF)」に変更し、ボタンの文言も「ダウンロードはこちら」に変更します。
(※注)WP Multibyte Patch を有効にしている場合、日本語が英数字に変換されます。(参考:日本語環境強化プラグインWP Multibyte Patch)
プレビューで表示して確認しましょう。ファイルブロックが表示されました。
ファイルブロックのボタンをクリックするとダウンロードできます。※テキスト部分を開くとブラウザでPDFファイルが開きます。
(参考)【WordPressファイル】pdfアップロード・ダウンロード方法
【最新の投稿ブロック】最新の投稿一覧を自動で表示させる方法
「最新の投稿ブロック」を利用すると、任意のページに最新の投稿を挿入することができます。
固定ページや投稿の編集画面で、「+(ブロックを追加)」をクリックします。
検索枠に「最新の投稿」と検索し、出てきたこちらのブロックをクリックします。
これで最新の投稿ブロックを追加できました。
デフォルトでは最新の投稿リストにタイトルのみ表示されていますが、ブロック>設定タブの「アイキャッチ画像を表示」にチェックを入れることで、アイキャッチ画像を表示することができます。
追加された最新の投稿一覧はデフォルトでリスト表示となっていますが、上部ツールバーの「リスト表示」「グリッド表示」アイコンをクリックすることで、リスト表示とグリッド表示を切り替えられます。
グリッド表示にしている場合、デフォルトでは投稿一覧が3カラムで表示されますが、カラム数は自由に変更できます。具体的なやり方は後ほど解説します。
(参考)【投稿一覧を挿入】WordPress最新の投稿ブロックの使い方
【ショートコードブロック】ショートコードを入れる方法
ショートコードブロックを選択すると、ショートコードをページ内に挿入することができます。
下記は、お問い合わせフォームのショートコードをページ内に挿入する例です。
(関連記事)【Contact Form 7の使い方】問い合わせフォーム作成方法
【クラシックブロック】従来のクラシックエディターを挿入する
フォーマット>クラシックを選択すると、従来のクラシックエディターをブロックとして挿入することができます。
(参考)プラグインやテーマによって利用できる独自ブロック
ブロックエディター用のプラグインや、一部のテーマでは、WordPress標準のブロック以外にも便利なブロックを追加することができます。
Lightningで使われる「VK Blocks」ブロック
下記は、人気テーマ「Lightning」で利用することができるVK Blocksです。
たとえば、VK Blocks>フローを挿入すると、下記のような流れ・フローを作ることができます。
ここではVK Blocksの使い方については割愛しますが、「【使い方紹介】Lightning VK Blocks / VK Block Patterns」にVK Blocksの詳しい使い方を説明していますのでご興味ある方はあわせてご参照ください。
Snow Monkeyで使われる「Snow Monkey」ブロック
下記は、人気テーマ「Snow Monkey」で利用することができるSnow Monkeyブロックです。
Snow Monkeyは独自ブロックが非常に充実しており、ブロックパターンも多いためお洒落なホームページが簡単に作成することができます。
■Snow Monkey ブロック
■Snow Monkey ブロックパターン
(関連記事)Snow Monkeyの使い方・ホームページ作成方法【動画解説】
(関連)WordPressテーマSnow Monkeyの使用レビュー・評判
SWELLで使われる「SWELL」ブロック
下記は、人気テーマ「SWELL」で利用することができるSWELLブロックです。
下記は、クリックすることで開閉し、コンテンツの表示、非表示ができる「アコーディオンブロック」の例です。
(関連記事)WordPressテーマSWELLスウェルを使ってみた感想レビュー
このように、テーマやプラグインによっては、WordPress標準では備わっていないブロックもあり、サイトを作りやすくなるので便利です。
あわせて読みたい記事
再利用ブロックを利用する
任意のブロックを選択し、「パターン/再利用ブロックの作成」をクリックすることで、ブロックの雛形を作り共通化して、他の投稿ページや固定ページでも再利用することができます。
ブロック選択時に再利用ブロックに追加したブロックを選択できるようになります。
なお、共通化したブロックは、一方の投稿(固定ページ)で変更すると、他の投稿(固定ページ)でも共通化ブロックの内容が変更されているので気をつけましょう。
再利用ブロック:コンテンツを作成し、自分や他の投稿者がサイトで再利用できるよう保存しましょう。ブロックを更新すると、再利用しているすべての場所で更新が適用されます。
もし共通化したブロックを使いたいけど、ここのページで細部を変えたい場合は、「パターンを切り離す」とすることで、個々のページごとに変更を加えられるようになります。
(※)再利用ブロックの詳細な使い方については「【WordPress再利用ブロック】使い方と編集・管理方法」をご参照ください。
(関連記事)【WordPress再利用ブロック】使い方と編集・管理方法
右ツールバー(アイキャッチ・カテゴリ・タグなどの設定)
アイキャッチ画像やパーマリンク、投稿のカテゴリー・タグ、固定ページの親子設定などは、従来のエディターと同様にエディターの右サイドバーから設定できます。
ここでは、固定ページ・投稿共通で設定できる内容をご紹介します。
(関連記事)
投稿のカテゴリーやタグなど、投稿に関する使い方については「【徹底解説】WordPress投稿ブログ記事の書き方・作り方」をご参照ください。
固定ページの親子設定など、固定ページに関する使い方については「【初心者向け】WordPress固定ページの作り方と編集方法」をご参照ください。
アイキャッチを追加する
WordPressでは「アイキャッチ」という、いわゆるサムネイル表示機能があります。アイキャッチを設定していると、投稿一覧(または固定ページ)でサムネイルが表示されます。
アイキャッチは編集画面右下の「アイキャッチ画像を設定」から設定することができます。
下記のようにアイキャッチ画像を設定しましょう。
投稿一覧で、アイキャッチ画像が表示されていることがわかります。
記事のURLを変更する
末尾のURLは「概要」項目の中にあるURLをクリックすることで変更できます。
下記のようにURLを変更してみましょう。
パスワード付きページを作成する
公開範囲を設定することもできます。公開ボタンを押してパスワード設定することができます。
パスワード保護設定をしたページについては、パスワードを知っている人だけがページを閲覧できるようになります。
パスワード設定について「WordPressの固定ページ・投稿にパスワードを設定する方法」で詳しく説明していますので合わせてご参照ください。
まとめ
まとめです。今回は、WordPress5.x系のブロックエディター(グーテンベルクエディター)の使い方を解説しました。
■【総まとめ版】WordPressブロックエディターの使い方
ブロックエディターでは、「ブロック」という単位でコンテンツ・レイアウトを作ったいく形になります。
エディターの使い方は、基本的に慣れの部分が大きいと思いますのでぜひいろいろ触ってみながら覚えて行ってみてください。
自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。
今回は以上になります。最後までご覧いただきありがとうございました。
合わせて読みたい記事
WordPressの基本的な使い方を「【総まとめ版】初心者向けWordPress(ワードプレス)の使い方」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました!
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。