WordPress ブロックエディターの使い方

本記事は広告が含まれる場合があります WordPress

【総まとめ版】WordPressブロックエディターの使い方

WordPressをインストールしてホームページやブログのページを作る際に、エディター(編集ページ)の使い方がいまいちよくわからない初心者の方も多いです。

本記事では、WordPress(ワードプレス)のブロックエディターの使い方をWordPressを初めて触る方でもわかるように解説していきます。


 

WordPressの投稿や固定ページで使うエディターの使い方がいまいちわからなくって・・・
現在WordPressでは、ブロックという単位で組み合わせてページを作成するブロックエディターというエディターを標準採用しています。ここでは、ブロックエディターの使い方を説明していきますね。

 

 

ブロックエディターの基本的な使い方

【超基本】ブロックエディターの使い方概要

WordPressのエディターは、ブロックといわれる単位でコンテンツを作っていくブロックエディターが採用されています。
ブロックエディター の概念

 
固定ページまたは投稿の編集画面は下記のようになっています。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
ブロックエディター の基本画面レイアウト
(※)上記はWordPress6.3の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。
 

まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。

 
管理画面には左上のアイコンをクリックすると戻ることができます。

 
■ブロックを追加する例。※追加した後は右ツールバーが非表示になるので「設定」ボタンから再度表示して設定できます。


 


 
ここからは、ブロックエディターの基本的な使い方についてもう少し詳しく説明していきます。

 

【超基本】段落ブロックでテキストを入力する

まずは最も基本のテキストを入力方法を覚えましょう。

テキストは段落ブロックを利用します。段落ブロックは通常エディター末尾でエンターボタンを押下することで追加できます。あるいは+ボタンから「段落」を選択して挿入することができます。


 

Enterによる改行とShift+Enterによる改行の違い

改行する際に、Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。

一方、段落で文章を書いている途中でShift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。

Shift + EnterとEnterの改行の違い
 

■Shift+Enterによる改行と、Enterによる改行の違い


 

段落ブロックのスタイル変更

段落ブロックで挿入したテキストを装飾したい場合は、右側にあるメニューかブロック上部ツールバーから設定変更することができます。

段落ブロック以外の、どのブロックでも右側にあるメニューかブロック上部のツールバーから設定変更することができますので覚えておきましょう。

 

【超基本】見出し・画像・リストを使ってページ作成する

つぎに、利用頻度の高い見出し・画像・リストを使ってページ作成していきましょう。

見出しブロックを挿入して見出しを作る

+ボタンを押して、「見出し」を選択します。ブロック間の間にカーソルを合わせて表示される+からブロックを間に挿入することもできます。

ブロックエディター  ブロックの追加
 

見出しを追加する


 

なお、ブロックを選択すると下記のようにブロックのすぐ上にツールバーが表示されます。見出しの場合は、見出しレベルの変更やテキスト揃え、太字斜体などの設定ができます。右のメニューアイコンからブロック削除することもできます。


 

また、見出しのブロックを選んだ状態で、右サイドバーから(表示されていない場合は、右上の設定アイコンを押して表示できます)、色やその他の設定ができます。

 

画像ブロックを挿入して画像を表示する

次に画像を挿入してみましょう。右下+ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。


 

(参考)【画像ブロック】WordPressブロックエディター画像ブロックの使い方
 

リストブロックを挿入して箇条書きを作る

次にリストブロックを利用して箇条書きを作ってみましょう。リストのアイコンを選択すると、箇条書きを作ることができます。


 

なお、リストブロックには外側の「リスト」ブロックと内側の「リスト項目」から構成されています。

外側のリストブロックでは、リスト全体の 装飾・スタイルなどを行えるのに対して、内側の各リスト項目ブロックでは、各リストの色や大きさなどの設定をそれぞれ設定できます。

リストの構造
 

(参考)WordPress箇条書き/番号付きリストの作り方【リストブロック】
 
 

【基本】2カラム(2列横並び)のレイアウトを作成する

横並びのレイアウトを作るには、カラムブロックを利用します。

カラム挿入後に2列や3列などのレイアウトを選択します。カラムブロックの中にさらに画像や段落など任意のブロックを挿入できます。後から比率を変えたり列数を変えることもできます。


 

■表示例(PCでは横並びでスマホの場合は縦に並びます)

 

カラムブロックは外側のブロックと内側のブロックから構成されており、外側ブロックでは列数(カラム数)、内側ブロックでは横幅%など、設定できる項目が異なります。
カラムブロック の概念
 

今まで横並び表示するのは難しかったので、これは便利な機能ですね!!

(参考)【WordPressカラムブロック】画像等の横並び方法・作り方

 

ナビゲーションを利用してブロックを選択する方法

カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入するのに苦労する場面があります。
 

■複数の+がある場合にブロック挿入位置が変わることに注意

 

左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます。
挿入しようとしているブロックの位置に注意
 

まだ、左上の「三」に似たアイコンをクリックするとブロックをリスト表示でき、そこからブロックを選ぶこともできます。(左下のリストから選択することもできます)
ブロックナビゲーション、ブロックのぱんくずリスト

 

■ブロックナビゲーションを活用してピンポイントで対象ブロックを選択する


 

ブロックをあとから挿入・移動・削除する

既存のブロックの間に新たにブロックを挿入したり、既存のブロックを移動したり、削除することもできます。

既存のブロックを移動する

既存のブロックの左側の矢印を選択すると、ブロックの順番を変更することができます。

 

SHIFTボタンを押しながら複数のブロックを選択した状態で矢印を選択すると、複数ブロックまとめて順番を変更することもできます。

 

また、点々のあるアイコンをクリックしたままドラッグ&ドロップでブロックを任意の場所に移動することもできます。

 

既存のブロックの間に挿入する

すでに作成したブロックとブロック境目にカーソルを合わせると「+」ボタンが表示されます。「+」ボタンを押下すると既存のブロックの間に新しいブロックを挿入することができます。

ブロックエディター  ブロックの追加
 

 

うまく「+」ボタンが出てこない場合は、一度エンターを押して空白を作ってから右にある「+」を押すとブロック間に新しいブロックを挿入できます。

 

既存のブロックを削除する

既存のブロックを削除したい場合は、既存のブロックを選択して、詳細設定アイコンの中の「ブロックを削除」をクリックします。

 

ブロックを選択してコピー&ペーストする

一度作成したブロックはコピー&ペーストして利用することができます。

対象のブロックを選択してツールバー右上のオプション>コピーから、ブロックをコピーできます。
ブロックを選択後に、オプション>ブロックのコピー

 

貼り付けたい箇所で右クリック>貼り付けで貼り付けすることができます。カーソルが合わせられない場合は段落ブロックを挿入してそこにカーソルを合わせて貼り付けます。
コピーしたブロックが貼り付けられた

 

ブロックを貼り付けることができました。
貼り付けたい箇所で右クリック>貼り付け

 

ブロックを複数選択して、オプション>ブロックのコピーでコピーすることもできます。
複数のブロックを選択後に、オプション>ブロックのコピー

 
(参考)WordPressブロックのコピペ方法(コピー&ペースト)
 

ページを下書き保存・公開をする

ある程度ページを作成したら、保存しましょう。下書き保存を選択すると、下書き(公開していない)でページを保存することができます。


 

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。

 
一度ページを公開してから再度下書きに戻したい場合は「下書きに戻す」ボタンを押下します。

 

【参考】ブロックエディター編集画面の各項目の説明

WordPresの編集画面では、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
WordPress6.3.1のエディター画面

 

  • メインエリア・・・タイトルや本文を作成するエディター画面。ブロック単位でページを作成していくメインエリア
  • 上部ツールバー・・・管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定できる
  • 右ツールバー・・・アイキャッチ・公開設定・パーマリンクなどの文書設定や、各ブロックの設定を行うことができる

 
 

メインエリア(エディター)でできること

メインエリアでは、タイトルや文章画像などをブロックという単位で作成していきます。
ブロックエディター  メインエリア

 

上部ツールバーでできること

上部ツールバーでは、管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定・確認することができます。
ブロックエディター  上部ツールバー

 

上部ツールバーで設定できる項目は下記の通りです。

項目(アイコン) 説明
管理画面への移動ボタン 管理画面への移動(固定ページ一覧または投稿一覧へ戻ることができる)
管理画面(固定ページ一覧または投稿一覧)に戻るアイコン
ブロックの追加アイコン ブロックを追加することができる
ブロックの追加アイコン
編集モードの切り替えアイコン ブロックの選択・編集モードを切り替えることができる
ブロックエディター >上部ツールバー>ツールアイコン
前へ戻る・次へ進むアイコン 一つ前の操作に戻る・一つ後の操作に次へ進むことができる
ブロックエディター >上部ツールバー>元に戻す・次へ進むアイコン
ブロックナビゲーションアイコン ブロックナビゲーション。「リストビュー」タブでは現在アクティブな箇所のブロックの位置がわかる

「アウトライン」タブでは文書の概要や利用ブロックの種類・数がわかる
ブロックエディター >上部ツールバー>ブロックナビゲーションアイコン

下書き保存・プレビュー・公開 下書き保存・プレビュー画面表示・公開がそれぞれできる

PCアイコンをクリックするとタブレット・モバイルでのプレビューも可能
PCアイコンをクリックするとタブレット・モバイルでのプラビューも可能

設定アイコン エディターの設定ボタン。右ツールバーの表示・非表示の切り替えができる
ブロックエディター >上部ツールバー>設定アイコン
ツールと設定をさらに表示アイコン
ツールと設定をさらに表示
ツールと設定をさらに表示できる。具体的には表示モードやエディターモード、ツール、オプション設定が可能
ブロックエディター >上部ツールバー>さらに設定を表示アイコン

 

右ツールバーでできること

右ツールバーでは、文書の設定や各ブロックの設定ができます。

 

「投稿」タブを選択すると、公開の設定やパーマリンク、アイキャッチ、(投稿の場合は)カテゴリー・タグなどの、この文書(ページ)全体の設定ができます。
ブロックエディター >右ツールバー>投稿タブ

 

また、任意のブロックにカーソルを合わせると、(「ブロック」タブが選択されている状態の)右側メニューでそのブロックの設定ができます。
ブロックの設定。ブロックにカーソルを合わせると、右側メニューでそのブロックの設定ができます。

 

設定項目はブロックにより異なりますが、色やデザインなどを調整したりすることができます。

 

覚えておくと便利なブロックと使い方

次に、覚えておくと便利なブロックと使い方をご紹介していきます。

 

利用頻度の高い便利なブロック一覧

WordPressで比較的よく利用する便利なブロックは下記の通り。

項目 説明
段落ブロック 通常のテキストを入力するためのブロック ※詳細記事
見出しブロック 見出しを入力するためのブロック ※詳細記事
リストブロック リスト(箇条書き)を入力するためのブロック ※詳細記事
画像ブロック 画像を入力するためのブロック ※詳細記事
カラムブロック カラム(2列・3列横並び)を定義するためのブロック ※詳細記事
カスタムHTMLブロック HTML文を入力するためのブロック ※詳細記事
メディアとテキストブロック 画像とテキストを横並びにするブロック ※詳細記事
ギャラリーブロック ギャラリー画像(画像を一覧表示したもの)を入力するためのブロック ※詳細記事
スペーサーブロック 縦に空白を入れるためのブロック ※詳細記事
ボタンブロック ボタンリンクを入れるためのブロック ※詳細記事
テーブルブロック テーブル(表)を入力するためのブロック ※詳細記事
動画ブロック 動画(mp4)を入力するためのブロック ※詳細記事
カバーブロック 背景画像・背景色を設定するするためのブロック ※詳細記事
ファイルブロック PDFファイルなどを表示・ダウンロードさせるためのブロック ※詳細記事
最新の投稿ブロック WordPressの最新の投稿一覧を挿入するためのブロック ※詳細記事
ショートコードブロック ショートコードを入力するためのブロック
グループブロック ブロック同士をグルーピングするブロック ※詳細記事

 

【カスタムHTMLブロック】HTMLコードを記述する方法

カスタムHTMLを選択すると、任意のHTMLをページ内に挿入することができます。

カスタムHTMLブロック

 

下記は、GoogleMapの埋め込みコードをページ内に挿入する例です。


 
(関連)【WordPress】GoogleMap(グーグル マップ)を埋め込む方法

 

HTMLとして編集する

なお、任意のブロックの詳細設定で「HTMLとして編集」を選択すると、既存のブロックをHTMLのソースコードとして編集することができます。

 

ただし、独自に編集したものはそのままブロックに戻すことができなくなるので注意です(以降もHTMLとして編集する形になります)

 

(関連記事)WordPress カスタムHTMLブロックの使い方を徹底解説

 

【メディアとテキスト】画像とテキストを横並びにする方法

「メディアとテキスト」は、画像とテキストを横に並べて表示したり、画像・テキストそれぞれの幅を簡単に調整できるブロックです。

メディアとテキストブロックの使用例
 

検索枠に「メディアとテキスト」と入力して、表示された「メディアとテキスト」を選択します。
メディアとテキストブロックを挿入
 

メディアとテキストブロックの挿入ができました。
メディアとテキストブロックが挿入されている例

メディアエリアには画像や動画を設定できます。

「アップロード」または「メディアライブラリ」から画像をアップロードします。

 

これで画像が設定できました。続いてテキストエリアの設定をしていきましょう。テキストエリアには「+(ブロックを追加)」から見出しブロックやボタンブロックなど、通常のブロックが挿入できます。
テキストエリアにはブロックを追加できる

 

ここでは例として見出しや段落、ボタンを追加してみましょう。


 

(参考)【画像と文章を横並び】WordPressメディアとテキストの使い方
 

【ギャラリーブロック】画像を列数指定して横並びにする方法

ギャラリーのように画像を横並びで表示させたい場合はギャラリーブロックが便利です。

ギャラリーブロックを使ったギャラリー表示
 

まずは、ギャラリーブロックを挿入してみましょう。投稿または固定ページ編集画面を開き、「+」ボタンを押して「ギャラリー」を選択、自分の好きな画像を選択します。
ブロックエディター>ブロックの追加>ギャラリー


 

スマートフォンの場合は、通常は下記のように2列で表示されます。


 

(参考)WordPressギャラリーブロックの使い方・ギャラリー画像の作り方
 

【スペーサーブロック】縦に余白・空白を入れる方法

スペーサーブロックとは、ブロックとブロックの間に余白の高さを設定することができるブロックです。

WordPress スペーサーブロック
 

余白を入れたい箇所でブロックの追加>スペーサーを選択します。

 

スペーサーブロックが挿入されました。

 

ブロックとブロックの間にスペーサーを入れる

ブロックとブロックの間にスペーサーを入れるには、段落と段落の間にあるプラスのボタンをクリックして追加することができます。

 

スペーサーの高さは、右側のブロックの設定メニューからpx単位で変更することができます。

 

(関連)【スペーサーブロックの使い方】ブロック間・行間の余白の高さの設定
 

【ボタンブロック】ボタンリンクを挿入する方法

ボタンブロックを利用するとボタンリンクを作ることができます。ボタンは色や角丸など簡単な装飾も可能です。

ボタンブロックの例
 

ブロックの追加からボタンブロックを選択します。
ボタンブロックの追加
 

ボタンブロックが挿入されました。
ボタンブロックが挿入された

 

ボタンの文言を入力してみましょう。
ボタンの文言を入力

 

上ツールバーからボタンのリンクを設定することができます。リンクボタンをクリックします。
ボタンのリンクを設定

 

ボタンのリンク(URL)を入力して確定しましょう。以上でボタンの追加は完了です。
ボタンのリンク(URL)を入力して確定

 

(参考)【WordPressボタンの作り方】リンク・色・デザイン設定方法

 

【テーブルブロック】表を挿入する方法

テーブルブロックを利用すると下記のような表を作成することができます。
表ブロックのサンプル

 

まず、ブロック追加「+」をクリックして「表」を選択します。
表ブロックを追加

 

「列数」「行数」をそれぞれ指定します。ここでは初期状態「列数:2」「行数:2」で表を作成します。※列数・行数に関しては後からでも追加変更できます。
「列数」「行数」をそれぞれ指定して表を作成

 

2列2行の表が作成されました。
表が作成された

 

中身を入力していきます。
表に中身を入力

 

右上のアイコンをクリックしましょう。右に表ブロックのメニューバーが表示されます。ブロックの設定表示アイコン

 

「settings」タブにある「ヘッダーセクション」を選択すると、表の一番上にヘッダー行が表示されます。
ヘッダーセクションの切り替えボタン

 

表にヘッダーの行が追加されました。ここではヘッダー(1行目)に相当する文言「セミナー名」「参加費用」を入力します。
テーブルブロックにヘッダーセクションを追加したもの

 

後からテーブルの列や行を挿入・削除することができます。下記はテーブルの編集アイコンから右に列を挿入した例です。
「列を右に挿入」をクリック

 
(参考)【WordPressテーブルブロック】表の作り方・編集方法
 

【動画ブロック】mp4などの動画を入れる方法

動画ブロックを利用すると、mp4ファイルなどの動画を挿入・表示させることができます。

動画ブロックを挿入するには、投稿あるいは固定ページの編集画面で「+(ブロックを追加)」をクリックします。
「+(ブロックを追加)」をクリック

 

検索枠に「動画」と入力し(画像ではない)、出てきたこちらのブロックを追加します。
動画ブロックをクリック
 

これで動画ブロックが追加できました。

デスクトップ上にある動画ファイルを使用する場合は「アップロード」、すでにアップロードしている動画を使用したい場合は「メディアライブラリ」を選択し実際に動画を挿入してみましょう。


 

これで動画ブロックが挿入されました。

なお、iphoneの場合は動画再生時に全画面の別ウインドウで再生されます。Web上に埋め込んだ状態で再生させるにはインライン再生にチェックを入れます。
インライン再生にチェック

iPhoneの場合の動画再生の挙動(インライン再生なしとありの違い)

 
(参考)WordPress動画ファイルの挿入方法・動画ブロックの使い方

 

【カバーブロック】背景画像・背景色をつける方法

カバーブロックを使うと、ページ内に背景画像や背景色を入れたり、その上に任意のテキストや見出しなどの任意のコンテンツを載せることができます。

カバーブロックの説明
 

ブロックの追加からカバーを選択後、背景に画像を設定してその上に見出しや段落を入力することができます。

 
【WordPerssカバーブロック】背景画像・背景色を入れる方法

※カバーブロックはレンタルサーバーによってはWAFが誤検知する場合があり、保存ができなくなる事象があります。

(関連)【WAF無効/除外設定】ロリポップで403or保存できないエラーが出たとき
 

【ファイルブロック】PDFファイルなどを表示・ダウンロードさせる方法

PDFやWord(docx)、Excel(xlsx)のファイルなどを表示・ダウンロードしてもらいたい時はファイルブロックを活用すると便利です。

WordPress ファイルブロックでPDFダウンロード
 

ブロックの追加から「ファイル」を選択します。
ファイルブロック
 

ファイルブロックが追加されます。

 

「アップロード」ボタンをクリックして、以下のようにアップロードしたいPDFファイルなどを選択して「開く」を押します。※すでにメディアライブラリにPDFファイルがある場合は、メディアライブラリを押下して選択できます。

 

デフォルトではPDFをアップロードすると、以下のようにPDFの中身が見える状態で表示されます。デフォルトでは、ファイルブロックを使ってPDFをアップロードすると、中身が見える状態で表示される

 

とりあえずここでは中身が見えない状態にしたいので、「PDF設定>インライン埋め込みを表示」をOFFにしておきます。「インライン埋め込みを表示」をOFFにしておく

 

ファイル名を日本語にしている場合、以下のように「ad968・・・」といった英数字に変換されてしまう(※注)ので、再度日本語のファイル名「スクールのカタログはこちら(PDF)」に変更し、ボタンの文言も「ダウンロードはこちら」に変更します。
ファイルブロックの完成例

(※注)WP Multibyte Patch を有効にしている場合、日本語が英数字に変換されます。(参考:日本語環境強化プラグインWP Multibyte Patch
 

プレビューで表示して確認しましょう。ファイルブロックが表示されました。
WordPress ファイルブロックでPDFダウンロード

 

ファイルブロックのボタンをクリックするとダウンロードできます。※テキスト部分を開くとブラウザでPDFファイルが開きます。

 
(参考)【WordPressファイル】pdfアップロード・ダウンロード方法

 

【最新の投稿ブロック】最新の投稿一覧を自動で表示させる方法

「最新の投稿ブロック」を利用すると、任意のページに最新の投稿を挿入することができます。

最新の投稿ブロックをトップページに表示させた例

 
固定ページや投稿の編集画面で、「+(ブロックを追加)」をクリックします。

「ブロックを追加」をクリック

 

検索枠に「最新の投稿」と検索し、出てきたこちらのブロックをクリックします。

「最新の投稿」ブロックをクリック

 

これで最新の投稿ブロックを追加できました。

最新の投稿ブロックの追加完了画面

 

デフォルトでは最新の投稿リストにタイトルのみ表示されていますが、ブロック>設定タブの「アイキャッチ画像を表示」にチェックを入れることで、アイキャッチ画像を表示することができます。
最新の投稿一覧リストの中にアイキャッチを表示させている例

 

追加された最新の投稿一覧はデフォルトでリスト表示となっていますが、上部ツールバーの「リスト表示」「グリッド表示」アイコンをクリックすることで、リスト表示とグリッド表示を切り替えられます。

リスト表示・グリッド表示の切り替えボタン

 

グリッド表示にしている場合、デフォルトでは投稿一覧が3カラムで表示されますが、カラム数は自由に変更できます。具体的なやり方は後ほど解説します。

 
(参考)【投稿一覧を挿入】WordPress最新の投稿ブロックの使い方
 

【ショートコードブロック】ショートコードを入れる方法

ショートコードブロックを選択すると、ショートコードをページ内に挿入することができます。

ショートコード ブロック

 

下記は、お問い合わせフォームのショートコードをページ内に挿入する例です。

 

(関連記事)【Contact Form 7の使い方】問い合わせフォーム作成方法

 

【クラシックブロック】従来のクラシックエディターを挿入する

フォーマット>クラシックを選択すると、従来のクラシックエディターをブロックとして挿入することができます。

 

2018年12月以前のワードプレスに備わっていた従来のエディターですね

 

(参考)プラグインやテーマによって利用できる独自ブロック

ブロックエディター用のプラグインや、一部のテーマでは、WordPress標準のブロック以外にも便利なブロックを追加することができます。

 

Lightningで使われる「VK Blocks」ブロック

下記は、人気テーマ「Lightning」で利用することができるVK Blocksです。
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ブロックです。
SWELL ブロック

 

下記は、クリックすることで開閉し、コンテンツの表示、非表示ができる「アコーディオンブロック」の例です。

 

(関連記事)WordPressテーマSWELLスウェルを使ってみた感想レビュー

 

このように、テーマやプラグインによっては、WordPress標準では備わっていないブロックもあり、サイトを作りやすくなるので便利です。

 

再利用ブロックを利用する

任意のブロックを選択し、「パターン/再利用ブロックの作成」をクリックすることで、ブロックの雛形を作り共通化して、他の投稿ページや固定ページでも再利用することができます。
「パターン/再利用ブロックの作成」をクリック

 

ブロック選択時に再利用ブロックに追加したブロックを選択できるようになります。

 

なお、共通化したブロックは、一方の投稿(固定ページ)で変更すると、他の投稿(固定ページ)でも共通化ブロックの内容が変更されているので気をつけましょう。

 

再利用ブロック:コンテンツを作成し、自分や他の投稿者がサイトで再利用できるよう保存しましょう。ブロックを更新すると、再利用しているすべての場所で更新が適用されます。

 

もし共通化したブロックを使いたいけど、ここのページで細部を変えたい場合は、「パターンを切り離す」とすることで、個々のページごとに変更を加えられるようになります。
「パターンを切り離す」をクリック

 

(※)再利用ブロックの詳細な使い方については「【WordPress再利用ブロック】使い方と編集・管理方法」をご参照ください。

(関連記事)【WordPress再利用ブロック】使い方と編集・管理方法

 

右ツールバー(アイキャッチ・カテゴリ・タグなどの設定)

アイキャッチ画像やパーマリンク、投稿のカテゴリー・タグ、固定ページの親子設定などは、従来のエディターと同様にエディターの右サイドバーから設定できます。

 

ここでは、固定ページ・投稿共通で設定できる内容をご紹介します。

(関連記事)

投稿のカテゴリーやタグなど、投稿に関する使い方については「【徹底解説】WordPress投稿ブログ記事の書き方・作り方」をご参照ください。

固定ページの親子設定など、固定ページに関する使い方については「【初心者向け】WordPress固定ページの作り方と編集方法」をご参照ください。

 

アイキャッチを追加する

WordPressでは「アイキャッチ」という、いわゆるサムネイル表示機能があります。アイキャッチを設定していると、投稿一覧(または固定ページ)でサムネイルが表示されます。

 

アイキャッチは編集画面右下の「アイキャッチ画像を設定」から設定することができます。
投稿>アイキャッチ画像の設定
下記のようにアイキャッチ画像を設定しましょう。

 

投稿一覧で、アイキャッチ画像が表示されていることがわかります。
投稿一覧 アイキャッチ画像が表示されている

 

ご利用のテーマ・設定にもよりますが、一般的にFacebookやTwitterでシェアした際にアイキャッチに設定した画像が表示されます。

 

記事のURLを変更する

末尾のURLは「概要」項目の中にあるURLをクリックすることで変更できます。パーマリンク URLスラッグの設定

 

下記のようにURLを変更してみましょう。

 

日本語URLは利用ケースによっては、「%5%2%....」のようにわかりづらい文字に変換されるので、当サイトでは半角英数字のURLに変更しています。

 

パスワード付きページを作成する

公開範囲を設定することもできます。公開ボタンを押してパスワード設定することができます。
パスワード保護の設定

 

パスワード保護設定をしたページについては、パスワードを知っている人だけがページを閲覧できるようになります。

 

パスワード設定について「WordPressの固定ページ・投稿にパスワードを設定する方法」で詳しく説明していますので合わせてご参照ください。

 

まとめ

まとめです。今回は、WordPress5.x系のブロックエディター(グーテンベルクエディター)の使い方を解説しました。

 

■【総まとめ版】WordPressブロックエディターの使い方

 

ブロックエディターでは、「ブロック」という単位でコンテンツ・レイアウトを作ったいく形になります。
ブロックエディター の概念

 

エディターの使い方は、基本的に慣れの部分が大きいと思いますのでぜひいろいろ触ってみながら覚えて行ってみてください。

まだ少し慣れない部分もありますが、慣れていったらとても便利そうですね!
2018年までは旧エディター(クラシックエディター)が主流でしたが、2021年になりブロックエディターが進化したのでぜひブロックエディターの使い方を覚えていってくださいね。」

 

自分で触ってみないことにはなかなかわからないことも多いと思いますので、興味がある方はたくさん触ってみて覚えてください。

 

今回は以上になります。最後までご覧いただきありがとうございました。

合わせて読みたい記事

WordPressの基本的な使い方を「【総まとめ版】初心者向けWordPress(ワードプレス)の使い方」にまとめました。WordPressの使い方をしっかり覚えたい方はあわせてご参考ください。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【徹底解説】レンタルサーバーおすすめ比較7選WordPress対応

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress
-,