当サイトではアフィリエイト広告を利用しています

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

ブロックエディタ―

WordPress(ワードプレス)のブロックエディター(Gutenberg)の使い方についての記事の総まとめです。

ブロックエディターは、WordPress 5.0以降から実装されたエディターで、これからWordPressを始める方は、ブロックエディタが主流です。

WordPressのバージョンアップや、Wordpressテーマがブロックエディターに対応してきたこともあり、かなり使いやすくなっています。

初心者でも直感的に使えるのですが、少しコツがいる部分もあります。そういった部分も詳しく解説しています。

★12万以上の対象作品を聴き放題 ★無料体験後は月額1500円。いつでも退会可能 ★プロのナレーターが朗読 ★オフライン再生可能
目次

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

ブロックエディターの基本的な使い方を一通りまとめています。
これを読めば、基本操作は概ね分かると思います。

ブロックの追加、移動、複製、削除等の基本操作と、数多くの種類があるブロックの使い方や役割をおさえておきましょう。

ブロックの操作方法について

ブロック操作の基本で、改行、複数ブロックの基本操作、グループ化など意外と分かりにくい部分について詳しく解説しています。

ブロックエディターは直感的に操作しますが、コードが見えないため、思いがけない動きをすることがあります。
そのような場合、基本をおさえておけば対応できます。

改行について

ブロックエディタHTML上、改行はどうなっているか。
行間の調整方法や箇条書きの改行など、改行について詳しくまとめています。

不要な段落ブロックを削除するには

段落ブロックを複数作成していると、途中で不要なブロックが残ってしまうことがあります。

残ってしまったが、どこにいったか分からない。そうした時の対応方法などについて、以下の記事で詳しく解説しています。

複数ブロックの基本操作

複数ブロックの基本操作(選択・複製・コピー)

複数ブロックの操作に慣れると記事作成を効率化できます。
以下の記事で、ページ内のブロックを丸ごとコピーする方法も解説しています。

ブロックのグループ化とグループの選択方法

ブロックのグループ化は選択方法がちょっと分かりにくいです。

一度作成したグループを選択できるポイントをブロック上で見付けるのは至難の業ですが、実は簡単に選択できる方法があります。

以下の記事で、グループ化について詳しく解説しています。

ブロックエディタ―での画像の操作方法

画像の挿入方法

ブロックエディターの画像の挿入方法は複数あります。

  1. 「画像とメディア」「カラム」を使う
  2. 「画像ブロック」+「段落ブロック」を使う
  3. 「クラシックブロック」を使う

以下の記事で、それぞれの方法と、旧エディターで主に使っていた回り込みの方法も解説しています。

画像やテキストを横並びにする簡単な方法

ブロックエディタ―では、画像やテキストの横並び配置も直感的に簡単にできます。

  1. 画像だけを横並びさせる簡単な方法
    「ギャラリーブロック」「カラムブロック」
  2. 画像とテキストを横並びさせる簡単な方法
    「カラムブロック」「文章とメディアブロック」

以下の記事でこれら2パターンについて詳しく解説しています。

カラムブロックのレスポンシブ対応を簡単に実現

横並びレイアウトはカラムブロックを使うのが便利です。

プラグインを使用して、カラムブロックのレスポンシブ対応や、スマホ、パッド、PCといった端末に応じた配置数の設定を自由自在に行う方法を以下の記事で解説しています。

プラグイン「Snow Monkey Blocks」の「項目ブロック」を利用します。

再利用ブロックの使い方

再利用ブロックは記事作成の効率化に役立ちますが、再利用ブロックや通常ブロックへの変換など、分かりにくい部分が多いです。

なかなかうまくいかないことがあるので、私はAddQuicktag(プラグイン)と併用しています。

以下の記事で再利用ブロックについて詳しく解説しています。

ブロックエディターで表を作成するおすすめの方法

ブロックエディターには「テーブルブロック」がありますが、細かな設定がほとんどできません。

その代わりに「クラッシックブロック」で表を作成するのがおすすめです。
表の罫線の変更や、背景色を部分的につける、テキストのセンタリングなどが簡単にできるようになります。

プラグイン「TinyMCE Advanced」のインストールが必要です。

詳しくは以下の記事で解説しています。

ブロックエディターの小技、その他

ページ内リンクの設定方法(スムーススクロールの実装も)

ブロックエディタ―では、ページ内リンクを超簡単に設定できます。

詳しくは以下の記事で解説しています。

ブロックエディタ―用の吹き出しプラグイン

テーマに吹き出しブロックが付いていない方向けにおすすめ以下のプラグインとプラグインを使わない(CSS使用)の方法を紹介しています。

  1. LIQUID SPEECH BALLOON
  2. VK Blocks
  3. Snow Monkey Blocks

詳しくは以下の記事で解説しています。

ブロックエディタ―専用お問合わせフォーム「Snow Monkey Forms」

「Snow Monkey Forms」は、ブロックエディタ―専用のお問合わせフォーム(無料)です。
確認画面付きで、設定も簡単なのでおすすめです。

以下の記事で「Snowmonkey Forms」の基本的な使い方、設定方法を解説しています。

以下の記事で「Snowmonkey Forms」で作成したメールフォームに同意のチェックボックスを設置する方法を解説しています。

長い利用規約や同意書等はテキストが長い場合が多いので、スクロールバーを表示してコンパクトにまとめる方法も解説します。

当サイトで使用中のWordPessテーマ

SWELL ロゴ

WordPressテーマの国内人気シェアNo.1テーマ(2023年1月・マニュオン調べ)

おすすめ度

SWELL のメリット
  • 効率的、時短
    ブロックエディタ完全対応。使いやすく、効率的に記事作成ができる。
  • おしゃれ、美しいサイト
    コードを書かずに本格的なデザイン、おしゃれなサイトができる
  • 高速表示
    サイトの表示速度が高速
  • アフィリエイトに最適!
    アフィリエイトに便利な機能が豊富。購入者限定アフィリエイトもあり!
SWELLのデメリット
  • 利用者が多く、デザインが被る可能性がある

ブログが楽しくなるテーマ

複数サイトで利用でき、コスパも最高

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次