Press "Enter" to skip to content

初心者が絶対つまづくGutenberg(ブロック)エディターの使い方

WordPress最大の壁はエディター

はい、いそっぷです。

WordPress初心者にとって最初の壁は、一見使いにくいであろうGutenberg(グーテンベルク)エディターでしょう。これは固定ページと投稿機能を使う際に必ず使う、WordPressのデフォルトエディターです。

このエディターで画像や動画などを盛り込んだ文章を書いたりできるわけですが、なんといっても最初は使いにくい・わかりにくいの一言。

そこで今回はGutenbergエディターについて書いていきたいと思います。

投稿でテスト

固定ページ機能だとレイアウトを決めたりしてちょっと解説が煩雑になるので、投稿機能(ブログ)でエディターの使い方を勉強していきましょう。

WordPressの投稿

ダッシュボードの[サイト]>[投稿]をクリックしましょう。

これでブログ記事を書くことができます。

WordPressの新規投稿を追加

右端にある赤いボタン[新規投稿を追加]をクリックしましょう。

WordPressのタイトルを追加

まず目に飛び込んでくるのは3つの要素かと思います。

  1. タイトル欄
  2. 文章入力欄/ブロック選択欄
  3. サイドツールバー

タイトル欄から見ていこう!

タイトル欄はシンプルです。これから執筆するブログのタイトルを入力する欄です。一言で解説終わっちゃいますね。

文章入力欄/ブロック選択欄

ここから少し複雑になっていきます。

文章入力欄

一番左にあるプラスマークが[ブロック追加]です。(よく使います)

そしてその右にある空欄部分が[文章入力欄]です。(よく使います)

一番右にある3つのブロックアイコンが[おすすめブロック一覧]みたいな感じです。(時々使います)

文章(段落ブロック)を書きたい方はこのまま空白部分にカーソルを合わせクリックして文章(段落として)を入力していくことができます。

さっそく文章入力からエディターの世界へ入っていきましょう

適当に文章を入力してみましょう。

WordPressのブロックツールバー

適当に書くだけでこんなに意味不明なボタンが並んだツールバーが表示されます。ここで私が重要視しているのは①の「ブロックタイプを変更」です。

他の要素は、左寄せとか太字にするとか、ハイパーリンク付けるとかMicrosoft OfficeのWordや他のブログサービスのエディターでも見かけることでしょう。
しかし①の「ブロックタイプを変更」はWordPressだけです。

ここが重要なんです。

ブロックタイプを変更してみよう。

ブロックタイプの変更

適当な文章を書いて、ブロックタイプを変更してみましょう。
ブロックツールバーの一番左をクリックします。

WordPress Gutenberg 見出し

展開された変換メニューの中から[見出し]をクリックします。

これでただの「文章(段落)」から「見出し」へと変換されます。

僕がよく使うブロックを紹介

数えてみたところ、5種類あることに気づきました。

  1. 段落
  2. 見出し
  3. 画像
  4. カバー
  5. カラム

それぞれ詳しく見ていきましょう。

1.段落

まず一つ目の「段落」ですが、これはわかりやすいと思います。
普通に文章を入力できるブロックです。
ですがブロック共通の癖がありますので、解説していきます。

Enterキーを押す場合

WordPress 改行の仕方

普通にEnterを押すだけだと次の文章入力欄が現れます。そのまま文章を入力すると新しい段落ブロックができます。
この方法は段落を分けたいときに使います。

Shift+Enterキーを押す場合

WordPress 改行の仕方 方法 段落

ShiftとEnterキー同時押しの場合は段落ブロック内で改行されます。
この方法は段落を分けたくない場合に使います。

2.見出し

これはそのものズバリ見出しですね。
ある程度の文量を区切りたい時によく使います。
使い方は簡単で、よく使う方法は2種類です。

段落ブロックを見出しブロックに変換

WordPress 見出し 変換

ブロックツールバーの一番左にある[ブロックタイプを変更]をクリックし、出てきたメニューから[見出し]を選択します。

WordPress 本文 見出し 変換

これで見出しができました。段落ブロックで書いちゃったけど、見出しにしたいという時によく使います。

ブロックを追加

WordPress ブロックの追加

画面左にある[+]ボタンをクリックし、

WordPress 見出しブロック

[見出し]をクリックします。

これで見出しブロックができるので、見出しを書くことができます。

WordPress 一般ブロック 見出し

見つからない場合は追加メニューを下の方にスクロールして[一般ブロック]>[見出し]とクリックしましょう。

3.画像

基本的に画像の挿入は[ブロックを追加]からやります。

WordPress ブロック追加 画像

[+]ボタンをクリックし、[一般ブロック]>[画像]をクリックします。

WordPress 画像 アップロード

次に、画像をアップロードするか、メディアライブラリ(既にアップした画像)、または画像ファイルのURLを追加します。
私は基本的に画像をアップロードするか、ライブラリに保存してある画像を再利用しています。

4.カバー

カバーというのは、

こういうもののことです

私は個人的にカバー機能を気に入っています。寂しい記事でも少し華やかになる感じがするので。

さて「カバー」ですが、これは画像と同じく[ブロックを追加]から利用することができます。

WordPress ブロックの追加 カバー

[+]ボタンをクリックして、[一般ブロック]>[カバー]をクリックします。

WordPress カバー 挿入

次に、画像や動画をアップロードするか、ライブラリから選択、あるいは塗りつぶしを選択することができます。今回は画像をアップロードしてみましょう。

WordPress カバー 段落ブロック

すると、アップロードした画像の中央に段落ブロックが用意されます。
こういうやり方で私はいつも画像の上になにか文章、キーワードを書き込んでいるわけです。

5.カラム

カラムとはざっくり言えば列のことです。

WordPress カラム機能

左の列に画像を挿入して、右の列で文章を書く。

こういったことが[カラム]機能で行なえます。

使い方は[ブロックを追加]から行います。

WordPress ブロック追加 カラム レイアウト

[+]ボタンをクリックして、ブロック追加メニューを開きます。

[レイアウト要素]>[カラム]をクリックします。

WordPress カラム

そして列の割合などを決めるんですが、私は左側3つしか基本的に使いません。
今回は一番左の[2カラム:均等割]をクリックしてみましょう。

WordPress カラム 均等割

すると、ブロックが2つに分かれます。それぞれ[+]ボタンがあり、ブロックを追加することができます。これで[画像ブロック]を挿入したり[段落ブロック]を挿入して文章を書き込んでいくわけです。

番外編:ブロックの移動と削除

Gutenbergエディターでは、作成したブロックを上下に移動させることで順序を変えることが簡単にできます。

ここでは例として段落ブロックを3つ用意しました。黄色い背景の段落ブロックを選択し、左側に表示されている[上へ移動]ボタンをクリックします。

これで簡単にブロックを移動させることができます。下へ移動させるときは下矢印のボタンをクリックすればOKです。

削除の仕方

次にブロックの削除方法を見ていきましょう。

ブロックを選択した状態で、[詳細設定]をクリックします。そして展開されたメニューから[ブロックを削除]をクリックすると、そのブロックは削除されます。

終わり

これでGutenbergエディターについての解説を終わりとさせていただきたいと思います。どうでしたでしょうか。少しは慣れることができたでしょうか。

このエディターは初見だとわかりにくくて使いにくいかもしれません。

ですが、慣れると結構使い勝手も良いんですよ。ブロックを上下に動かしたり、[スペーサー]を入れて余白を作ったり、[カラム]で画像と文章を並列に書き込んだり…。

「サイドツールバー」のことをすっかり忘れてしまいましたが、あれはエディターとは少し離れた機能なので、今回は触れないことにします。

皆様がGutenbergエディター(ブロックエディター)に慣れることを祈りつつ、終わりたいと思います。

次はこちらから。

関連記事

Be First to Comment

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください