WordPressブロックエディタ(開始)

ハワイの鳥

WordPressのブロックエディタは、慣れると簡単に使えるよー!

「WordPressブロックエディタの使い方を、超簡単に知りたい」「新エディタが使いにくいので、戻す方法はある?」というかたへ。

WordPressブログを運営する私が、ワードプレスのブロックエディタの使い方を図解! 新エディタを旧エディタに戻す方法もご紹介します。


この記事を書いた人

・SEOライター / エディター、オウンドメディア・コンサルタント
・ウェブの初級資格を保有、PCインストラクター経験が少しあり
・A8アフィリエイトBASE 2020で、1年間ブログ作成を学んだ
・賢威8 WordPress版でブログを作成! 収益も上がっている

※PR広告を含みます。

WordPressのブロックエディタとは?

ブロックエディタ(見出し入力)

ハワイの鳥

ワードプレスの標準は、ブロックエディタになったよ!

WordPress(ワードプレス)のブロックエディタ(新エディタ)は、ウェブの知識がなくても、簡単に記事を作成できるエディタ。

見出し・文・画像などのコンテンツを、ブロック単位で入れ、出来上がりを見ながら記事を作ることができます。新エディタ「ブロックエディタ(Gutenberg)」と旧エディタの違いは、次のとおりです。

  • 新エディタ(ブロックエディタ)
    ウェブの知識がほぼ不要、コンテンツをブロック単位で入れることができる
  • 旧エディタ(クラシックエディタ)
    ウェブの基礎知識が少し必要、HTML(ウェブ作成の言語)を使う
ポイント
旧エディタ(クラシックエディタ)はこんな感じです。
WordPress(クラシックエディタ)

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

ブロックエディタ(タイトル)

ハワイの鳥

ブロックエディタで、超簡単にブログの記事を作ってみよう!

WordPressのブロックエディタの使い方を、簡単にわかりやすくご紹介しましょう。操作方法はシンプルです。下記を順に図解します。簡単な記事を、さくっと作ってみましょう!

※WordPressのテーマ(テンプレート)に、賢威8を適用し、ブロックエディタを使用しています。使い方は同じです。

  1. タイトルを入れる
  2. 見出しを入れる
  3. 画像を入れる
  4. 文(段落)を入れる
  5. 見出し(下層)を入れる
  6. リスト(箇条書き)を入れる
  7. 保存しプレビューで見る
  8. パーマリンク、カテゴリー、タグ、アイキャッチ画像の設定
  9. 記事の公開
  10. ブロックの移動と削除

1. タイトルを入れる

WordPressブロックエディタ(新規作成)

WordPressのブロックエディタで、一緒に記事を作ってみましょう。ブロックエディタの使い方は、無料ブログの使い方にも近く、とても簡単です。すぐに記事を書くことができますよ。

まずは、「投稿」をクリックし、「新規投稿」をクリックしましょう。

ブロックエディタ(タイトル入力)

WordPressブロックエディタの投稿画面です。タイトルを入れます。「タイトルを追加」をクリックし、文字を入力します。

ブロックエディタ(タイトル)

「WordPressブロックエディタの使い方」と入力してみました。

2. 見出しを入れる

ブロックエディタ(見出し)

つづいて、記事の見出しを入れます。コンテンツ(ブロック)の追加は、+(プラス)マークをクリックします。追加できるブロックが表示されるので、中から「見出し」を選びましょう。

ブロックエディタ(見出し入力)

見出しが表示されました。すぐに文字を入力できます。「ブロックエディタの使い方」と入力してみました。

3. 画像を入れる

ブロックエディタ(画像)

つづいて、画像を追加しましょう。+(プラス)マークをクリックし、「画像」をクリックします。

ブロックエディタ(画像選択)

画像を選択できるようになります。「アップロード」をクリックし、画像を選択しましょう。urlを指定して、画像を追加することもできます。

ブロックエディタ(画像表示)

ハワイの画像を入れてみました。

4. 文(段落)を入れる

ブロックエディタ(文の追加)

つづいて、文を追加してみましょう。+(プラス)マークをクリックし、「段落」をクリックします。

ブロックエディタ(文の入力)

文をすぐに入力できます。改行は、shift+enter(シフトを押しながら、エンター)です。文の入力後、enter(エンター)キーを押すと、次のブロックを追加できる、+(プラス)マークが下に表示されますよ。

ポイント
文字サイズと色は、ブロックエディタの右側で変更できます。
ブロックエディタ(文字サイズ変更)
ブロックエディタ(文字色の変更)

5. 見出し(下層)を入れる

ブロックエディタ(見出しの追加)

つづいて、下層の見出しも入れてみましょう。+(プラス)マークをクリックし、「見出し」をクリックします。

ブロックエディタ(見出しレベル変更)

見出しのレベルを変更できる、ボタンが表示されます。H2(大見出し)をクリックします。

ブロックエディタ(見出しレベル変更2)

見出しのレベルを選べます。H2(大見出し)よりも、ひとつ下層の見出しH3(見出し3)」をクリックして、入れてみましょう。H4 H5と数が大きくなるほど、下層の見出しになります。

ブロックエディタ(見出し入力)

下層の見出しも、文字をすぐ入力できます。「1. タイトルを入力する」と入力しました。

6. リスト(箇条書き)を入れる

ブロックエディタ(すべて表示)

つづいて、リスト(箇条書き)を入れてみましょう。+(プラス)マークをクリックし、今度は、「すべて表示」をクリックしてみてください。

ブロックエディタ(リスト追加)

追加できるブロックの一覧が表示されます。中から、「リスト」をクリックしましょう。

ブロックエディタ(リスト入力)

リストの種類を選べる、ボタンが表示されます。種類を選びクリックすると、すぐに文字を入力できます。enterキーで改行できます。

ブロックエディタ(リスト完成)

箇条書き(リスト)の追加が完了!

7. 保存しプレビューで見る

ブロックエディタ(プレビュー)

記事を保存しましょう。「下書き保存」をクリックします。プレビュー画面で、出来上がりも見てみましょう。「プレビュー」をクリックし、「新しいタブでプレビュー」をクリックします。

ブロックエディタ(プレビュー画面)

記事が表示されました。タイトルと画像です。

ブロックエディタ(プレビュー画面2)

文(段落)と見出し、リストです。WordPressの新エディタ「ブロックエディタ」の使い方は超簡単! ウェブの専門知識がなくても、ブログやサイトを気軽に始められますよ。

8. パーマリンク・カテゴリー・タグ・アイキャッチ画像の設定

ブロックエディタ(カテゴリ等設定)

つづいて、記事の詳細設定をしていきます。パーマリンク、カテゴリー、タグ、アイキャッチ画像を設定しましょう。ブロックエディタ右上のマークをクリックすると、設定箇所が表示されます。

パーマリンクの設定

WordPress(パーマリンク設定)

パーマリンク(記事のurl)の設定です。「urlスラッグ」にurl末尾を入力しましょう。例)WordPressブロックエディタの記事なので、wordpress-block-editor と入力しました。

記事のurl(サイトurl+urlスラッグ)が下に表示されます。

カテゴリーの設定

WordPress(カテゴリー追加)

記事のカテゴリーを設定します。「新規カテゴリーを追加」をクリックします。「新規カテゴリー名」に、ワードプレスなど、記事のカテゴリー名を入力します。

新規カテゴリーを追加」ボタンをクリックすると、カテゴリーの設定が完了です。下層カテゴリーの設定もできますよ。

WordPress(カテゴリー設定)

記事カテゴリーの設定が完了!

タグの設定

WordPress(タグ設定)

記事をあらわす、タグを入れます。タグにより、記事内容がすぐにわかります。「新規タグを追加」に、文字を入力し、enter(エンター)キーを押してみましょう。タグの追加が完了です。複数のタグも入力できますよ。

アイキャッチ画像の設定

WordPress(アイキャッチ画像設定)

記事のアイキャッチ画像を追加します。アイキャッチ画像は記事の一覧に表示されるので、インパクトがある画像にするのがおすすめ。「アイキャッチ画像を設定」をクリックし、画像を選択します。

WordPress(アイキャッチ画像)

アイキャッチ画像に、ハワイの画像を設定しました。

WordPress(更新)

すべて設定したら、ブロックエディタ右上の「更新」ボタンを必ずクリックしましょう。

9. 記事の公開

WordPress(ブロックエディタ・公開)

記事を公開します。ブロックエディタ右上の「公開」ボタンをクリックしましょう。

WordPress(ブロックエディタ・公開2)

公開してもよいですか? と出たら、「公開」ボタンをクリックします。

WordPress(公開完了)

記事の公開が完了! 公開せずに、非公開(編集中)にしておくこともできます。

10. ブロックの移動と削除

ブロックエディタ(ブロック移動)

ブロック(コンテンツ)の移動と削除方法も図解します。移動は、ブロックをクリックすると表示される、上下マークのボタンをクリックするだけです。

ブロックエディタ(ブロック移動2)

下に移動」をクリックしました。コンテンツ(文)が見出しの下に移動しました。

ブロックエディタ(ブロック削除)

ブロック(コンテンツ)の削除も簡単です。削除したいブロックをクリックし、表示されたボタンバーの右端をクリックします。さらに表示されるリストの1番下「ブロックを削除」をクリックしましょう。

ブロックエディタ(ブロック削除2)

コンテンツ(文)が削除されました。WordPressブロックエディタの使い方は、超簡単!

ハワイの鳥2

「新エディタは使いにくい」という、旧エディタに慣れた人の声も聞くけれど、一度操作してしまうと簡単だよー!

ブロックエディタを旧エディタに戻す方法

WordPress(クラシックエディタ有効化)

ハワイの鳥

ブロックエディタが使いにくいと感じたら、旧エディタに簡単に戻せるよー!

WordPressのブロックエディタを、旧エディタ(クラシックエディタ)に戻す方法もご紹介します。

新エディタにしたけれど、使いにくい! という場合には、すぐに戻すことができるので、安心してください。ブロックエディタをクラシックエディタ戻す手順は、次のとおりです。

  1. プラグイン「Classic Editor(クラシックエディター)」をWordPressに入れる
  2. プラグイン「Classic Editor(クラシックエディター)」を有効化する

1. プラグイン「Classic Editor」をWordPressに入れる

WordPress(クラシックエディタに戻す)

WordPressのブロックエディタを、旧エディタ「クラシックエディタ」に戻すには、クラシックエディタのプラグイン「Classic Editor」をWordPressに追加します。

プラグイン」をクリックし、「新規追加」をクリックしましょう。

WordPress(クラシックエディタ検索)

右上のキーワード検索窓に、「Classic Editor」と入力します。図のプラグイン「Classic Editor(クラシックエディタ)」が出たら、「今すぐインストール」ボタンをクリックします。

2. プラグイン「Classic Editor」を有効化する

WordPress(クラシックエディタ有効化)

インストール完了後、「有効化」ボタンをクリックするだけで、旧エディタ「クラシックエディタ」に戻りますよ!

ハワイの鳥2

新エディタから旧エディタに戻すには、プラグインを追加して有効化するだけ!

まとめ

ブロックエディタ(コンテンツ一覧)

ハワイの鳥

WordPressのブロックエディタは、慣れると超簡単!

WordPressの新エディタ「ブロックエディタ」の使い方を図解しました。新エディタから旧エディタに戻す方法もご紹介。

ブロックエディタは、ブロック単位でコンテンツを入れることができる、便利なエディタです。出来上がりを見ながら、ウェブの知識がなくても、簡単に記事を作成できますよ!

※賢威8WordPress版は、ブロックエディタに対応しています。賢威8をWordPressに適用した、ブロックエディタ画面で図解しました。

賢威8(WordPress版・html版)

賢威8

賢威8は、カスタマイズ性が高い、SEOテンプレート。WordPress版では、ブロックエディタも使えます。

スマホでもパソコンでも、画面をきれいに見られる、レスポンシブWebデザイン。

賢威は、ブログ・アフィリエイト・企業サイトに適しています。当ブログは、賢威で作ったサイトです。

サポート充実の賢威なら、初心者も安心してサイトを作成できますよ!

評価 詳細 価格
5.5 SEOテンプレート 27,280円(税込)
SEO効果 初心者 サポート
上位表示を
目指しやすい
わかりやすい設定
学んで使える
プロの回答で
疑問もすぐに解決
複数サイト アップデート カスタマイズ前
購入者は複数利用可 最新版への更新が無料 賢威8のデモサイト


あわせて読みたい記事

おすすめの人気WordPressテーマ、徹底比較ランキング! 初心者がブログテーマ選びに失敗しない、保存版です。

当ブログの作り方を、PCインストラクター経験がある私が、初心者向けに完全図解しました。

まずは、ブログのWordPressレンタルサーバーを、約15分で開設しましょう。初心者が失敗しない、おすすめのサーバーを、徹底比較・ランキング!

レンタルサーバー申込と同時に、WordPressブログを1番簡単に、約15分で開設できる、WordPressクイックスタート/エックスサーバーを図解しました。

旧エディタ(クラシックエディタ)の使い方については、下記の記事を参考にしてみてください。簡単なhtmlの使い方を、初心者向けに解説しました。