ホームページ制作会社を
お探しですか?

PRONIアイミツは最適な出会える
ビジネスマッチングサービス
です

ホームページ制作発注は初めてですか?
ホームページ制作
無料で一括見積もり
0120-917-819 平日10:00-19:00

WordPressのブロックエディタの使い方:クラシックエディタとの違いや戻し方も紹介【2024年最新版】

更新日:2024.01.24

WordPressは、Web制作の知識がない方でも簡単にWebサイトを制作できるCMS(コンテンツ管理システム)です。初心者でも簡単にWebサイトを制作できるのは、WordPressがブロックエディタという機能を搭載しているからです。この記事ではブロックエディタとはどのようなことができのかといった基本的なところから、ブロックエディタの使い方や、従来のエディタであるクラシックエディタとの違いまで幅広く解説します

【関連ページ】WordPressのホームページ制作にかかる費用・相場感や、あなたの目的別にWordPressに強いホームページ制作会社をお探しいただけます。
WordPressのホームページ制作の費用・相場
WordPressに強いホームページ制作会社一覧

ホームページ制作会社の見積もりが
最短翌日までにそろう

マッチング実績30万件!

一括見積もりをする

(無料)

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

ブロックエディタとは、最新バージョンのWordPressに搭載されているエディタ機能のことです。エディタ機能とは、Webサイトの文章や画像を編集できる機能のことで、ブロックエディタの最大の特徴は直感的な操作でWebサイトを作成できる点にあります。ブロックエディタでは、文章や画像などをブロック単位で組み合わせて、Webサイトのコンテンツを作成することができます。HTMLやCSSなどの専門的な知識がない人でもWebサイトを作成することが可能です。

クラシックエディタとは?

WordPressでブロックエディタが採用されたのはWordPress5.0というバージョン以降です。それ以前は、クラシックエディタというエディタ機能が搭載されていました。クラシックエディタの編集画面は一般的なブログサービスの編集画面やWord、Googleドキュメントの入力画面と似ています。また、テキストモードがあり、HTMLやCSSといったプログラミング言語でWebサイトを制作することも可能です。

ブロックエディタとクラシックエディタの違い

ブロックエディタを使っても、クラシックエディタを使っても、Webサイトの仕上がりは変わりません。両者の一番の違いは、コンテンツの作り方にあります。クラシックエディタは、Wordに文字や画像を入力していく感覚でコンテンツを作成することが可能です。一方、ブロックエディタはテキストや画像を一つのブロックとしてとらえ、いくつものブロックを積み上げたり組み合わせたりしながら、コンテンツを形作っていきます。

ブロックエディタとクラシックエディタはどちらがおすすめ?

現在、WordPressの標準エディタはブロックエディタです。とはいえ、クラシックエディタを利用することも可能です。クラシックエディタのプラグインをインストールすることでクラシックエディタでの編集が行えます。ただし、これから新規でWebサイト運営を始める方にはブロックエディタをおすすめします。それは、クラシックエディタのサポートが近いうちに終了する予定だからです。WordPressでは、2024年まではクラシックエディタのサポートに対応することが決まっていますが、それ以降、いつまでサポートが提供されるかは不透明な状況です。

ブロックエディタの基本項目と見方

ブロックエディタの基本項目は、以下の4つに分かれます。

  • メインエリア
  • パネル
  • ツールバー
  • ブロックメニューバー

①メインエリア

ブロックエディタの画面の中で最も大きな面積を占めるのが、メインエリアです。メインエリアは、記事を編集するためのスペースです。メインエリアでは、タイトルのほか、テキストや見出し、画像などをブロック単位で追加していくことができます。また、追加だけではなく、ブロックの移動や削除などを行うことでコンテンツを編集していきます。記事の作成時は、メインエリアを最も多く利用することになるでしょう。

②パネル

パネルは、メインエリアの右側に表示されるエリアです。パネルではテキストのサイズや色などブロック単位や記事全体の設定を行えます。公開の設定やパーマリンク、アイキャッチ、カテゴリーの設定などもパネルで行います。なお、メインエリアをもっと広く使いたい場合は、画面右上の「設定」をクリックすることでパネルを非表示にすることも可能です。

③ツールバー

ツールバーは、メイン画面の左上に設けられているエリアです。ブロックの追加、一つ前の操作に戻る、一つ後の操作に次へ進む、ブロックの選択・編集モードを切り替えるなどの操作ができます。また、「下書き保存」「プレビュー画面表示」「公開」といった記事のステータスの切り替えもツールバーで行います。

④ブロックメニューバー

ブロックメニューバーは、ブロックごとの詳細な設定を行うためのバーです。WordPressに入力する際に、ブロックの上に四角形のバーが出てきます。それがブロックメニューバーです。テキストの文字を太くしたり、ブロックの配置を変えたりなどが行えます。ブロックツールバーのアイコンの内容が分かりづらい場合は、画面右上の「︙(オプション)」>「設定」>「外観」の順にクリックし、「ボタンラベルを表示」をオンにすることでテキスト表示に切り替えられます。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

ホームページ制作会社の見積もりが
最短翌日までにそろう

マッチング実績30万件!

一括見積もりをする

(無料)

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

最新のWordPressでは、プラグインをインストールしなければクラシックエディタは使えません。そのため、ここではWordPressの標準エディタであるブロックエディタの基本的な使い方をお伝えします。製品やサービスの詳細情報や関連情報を記事形式でまとめたコラムページを作成するケースを例にとって見ていきましょう。なお、WordPressのバージョンや仕様などによって、表示画面や使い方が若干異なる可能性もあります。

ブロックの追加

ブロックを積み上げたり組み合わせたりしてコンテンツを作成するブロックエディタでは、ブロックの追加はすべての操作の基本です。エディタ内で「+」をクリックすることで、ブロックを追加できます。なお、ブロックには以下から紹介するようにいくつかの種類があり、作成したいコンテンツによってブロックの種類を選ぶ必要があります。

段落ブロック

段落ブロックは、エディタにテキストを追加する際に使用するブロックです。通常の文章を記述したい時に利用するブロックのため、最も利用頻度が高いブロックとなります。エディタの末尾でエンターをクリックするもしくは、「+」をクリックし「段落」を選択することで追加できます。

見出しブロック

見出しブロックは、記事内に見出しを作成する時に利用するブロックです。見出しブロックを追加するには、まずエディタ内で「+」をクリックし、「見出し」を検索します。出てきたアイコンをクリックすると見出しブロックを追加できます。

画像ブロック

画像ブロックは、コンテンツ内に画像を挿入したい時に利用するブロックです。画像ブロックの中には、画像を1つだけ挿入できます。「ブロックメニューバー」や「パネル」で画像の設定を変更したり、編集したりといったことが可能です。

リストブロック

リストブロックは、番号付きリストや箇条書きリストを追加する時に利用するブロックです。リストブロックを駆使して記事を作成することで読者の視認性が高まります。「+」をクリックして「リスト」を検索し、出てきたアイコンをクリックすることでリストブロックを追加できます。

カラムブロック

カラムブロックとは、一つのブロックを複数のブロックに分割できる機能を持つブロックのことです。画像を横に並べたり、テキストと画像を横並びに表示できたりといったことが可能になります。「+」をクリックし、「カラム」を選択することで追加できます。

ブロックの移動

ブロックエディタは、ブロックの配置を変えたり、ブロック同士を組み合わせたりすることで、コンテンツを作り上げていくエディタです。簡単な操作でブロックの配置を変えられる点もブロックエディタの特徴と言えるでしょう。ブロックの配置を変える方法は以下の2種類です。

  • 矢印をクリックして移動する
  • ドラッグして任意の箇所に移動させる

以下からそれぞれの方法を詳しく見ていきましょう。

矢印をクリックして移動する

1つずつブロックを動かしたい場合におすすめなのが矢印をクリックして移動させる方法です。コンテンツを編集する画面で、まずは動かしたいブロックをクリックします。すると、画面にブロックメニューバーが出てきますので、上にブロックを動かしたい場合はメニューバーの上矢印を、下に動かしたい場合は下矢印をクリックしてください。

ドラッグして任意の箇所に移動させる

レイアウトを大幅に変更するなど、ブロックを大きく動かしたい場合は、ドラッグして任意の箇所に移動させる方法が便利です。まずは編集画面の左上にあるツールバーで「リスト表示」をクリックます。作成したブロックの一覧が表示されるので、動かしたいブロックをドラッグ&ドロップで移動させます。

画像とYouTube動画の挿入

WordPressでは、画像やYouTube動画を挿入することが可能です。ここでは、ブロックエディタでの画像とYouTube動画の挿入方法をお伝えします。

画像の挿入方法

コンテンツに画像を挿入する際のステップは次の通りです。
ステップ1:編集画面で「+」のアイコンをクリックします。
ステップ2:追加するブロックを選択する画面で「画像」を選択します。
ステップ3:「画像ファイルのアップロード」、「メディアライブラリから選択」、「URLから挿入」の中から画像の引用方法を選びます。
ステップ4:メインエリアの右側に表示される「パネル」から画像の設定を行います。
なお、WordPressではPDFファイルの画像はアップロードできない点には注意してください。

動画(YouTube動画)の挿入方法

ブロックエディタでは、数ステップの簡単な操作でYouTube動画も挿入できます。ブロックエディタでYouTubeを挿入する流れは次の通りです。
ステップ1:コンテンツに挿入したい動画をYouTubeから探します。
ステップ2:そのYouTube動画の「共有」をクリックします。
ステップ3:「共有」の画面で動画URLの「コピー」をクリックします。
ステップ4:コンテンツに動画のサムネイルが掲載されていれば完了です。
コンテンツに動画を活用すれば、情報をより分かりやすく読者に伝えられるでしょう。

クラシックエディタに戻すには?

クラシックエディタでの操作に慣れているため、ブロックエディタからクラシックエディタに戻したいという人も少なくありません。以下の操作をすることで、クラシックエディタに戻すことが可能です。
ステップ1:「Classic Editor」というプラグインをインストールします。
ステップ2:WordPress管理画面のメニューバー「設定」から「投稿設定」を選択します。
ステップ3:「すべてのユーザーのデフォルトエディター」で「旧エディター」にチェックを入れます。
ステップ4:「ユーザーにエディターの切り替えを許可」で「はい」にチェックを入れます。

WordPress運用で困ったら外注もおすすめ

WordPressは、HTMLやCSSといったプログラミング言語を使わずにWebサイトを制作できるCMSです。Web制作の知識がない方でも、簡単にWebサイトを制作できるように開発されています。とはいえ、集客につながったり、売り上げ拡大につながったりする成果の出るWebサイトを制作することは初心者では簡単ではありません。自社だけで成果の出るWebサイトの制作が難しい場合は、WordPressでの制作実績が豊富なWeb制作会社に外注してみてはいかがでしょうか。

ホームページ制作会社の見積もりが
最短翌日までにそろう

マッチング実績30万件!

一括見積もりをする

(無料)

ホームページ制作の費用相場

費用別にみるホームページ作成の特徴
作成費用 ホームページの特徴 どんな企業向きか
~30万円 ・テンプレートを使用
・WordPressなどのCMSで作成
・画像やテキストは依頼者側で用意
・簡易的なコーポレートサイト
・簡易的なオウンドメディア
・10ページ以内の作成
・費用を抑えたい
・短い納期で依頼したい
30万~100万円 ・オリジナル性の高いWebサイト
・発注者の要望に沿ったデザイン
・独自コンテンツの充実したWebサイト
・オリジナル性の高いWebサイト
・簡単な撮影やインタビューを含む素材の用意も依頼可能
・中小企業
・凝ったWebサイトを作りたい
100万~200万円 ・戦略的で効果の高いWebサイトの作成
・トレンドのコンテンツやデザイン
・撮影やインタビューを含む素材の用意も依頼可能
・大企業
・複数のブランドサイトを制作したい方
・SNSと連動したWebサイトを作りたい
・機能性の高いWebサイトを作りたい
200万円~ ・完全オリジナルデザインのWebサイト
・SNSとの連動が可能
・多機能なWebサイト
・大企業
・複数のブランドサイトを制作したい方
・SNSと連動したWebサイトを作りたい
・機能性の高いWebサイトを作りたい

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

【まとめ】ホームページ制作会社選びで迷ったらPRONIアイミツへ

WordPressのブロックエディタは、テキストや画像をブロック単位で積み上げたり、ブロック同士を組み合わせたりなどでコンテンツを作成できるエディタです。テキストや画像をブロック単位で管理するため、より直感的な操作でWebサイトを制作できます。ブロックエディタを利用することで、初心者でもWebサイトを制作できますが、より高品質なWebサイトを構築するためプロに依頼したいという方もいるでしょう。外注先をお探しの方はぜひアイミツにご相談ください。


【相談前にまずは会社一覧を見たいという方はこちら】
WordPressに強いホームページ制作会社一覧
【費用感を知りたいという方はこちら】
WordPressのホームページ制作の費用と相場

ホームページ制作会社の見積もりが
最短翌日までにそろう

マッチング実績30万件!

一括見積もりをする

(無料)

ホームページ制作会社探しで、こんなお悩みありませんか?

  • 一括見積もりサイトだと多数の会社から電話が・・・

    一括見積もりサイトだと
    多数の会社から電話が・・・

  • 相場がわからないから見積もりを取っても不安・・・

    相場がわからないから
    見積もりを取っても不安・・・

  • どの企業が優れているのか判断できない・・・

    どの企業が優れているのか
    判断できない・・・

PRONIアイミツなら

発注先決定まで最短翌日

発注先決定まで
最短翌日

  1. 専門コンシェルジュが
    あなたの要件をヒアリング!
  2. 10万件の利用実績から
    業界・相場情報をご提供!
  3. あなたの要件にマッチした
    優良企業のみご紹介!
マッチング実績30万件!

一括見積もりをする

(無料)

この記事に関連するホームページ制作会社一覧

WordPressに条件を追加して企業を探す

WordPressに関連する記事