【前編】WordPressで投稿しよう！グーテンベルグの使い方

グーテンベルグ（Gutenberg）とは、WordPressのバージョン5.0から実装された、新しいテキストエディタのことです。
WordPress従来のテキストエディタとは異なるため、旧エディタを使い慣れていた方は戸惑ったのではないでしょうか？
グーテンベルグの操作方法を習得してしまえば、使いやすく、初めての方でも簡単に記事の作成が可能です。
そこで今回は、前編と後編に分けてWordPressのグーテンベルグの使い方をご紹介いたします。

編集画面について

投稿する際に使用する、編集画面の使い方をご説明していきます。

タイトル

投稿画面を開くと、画像では「テスト」と入力されている部分が記事のタイトルになります。
未入力の場合は「タイトルを追加」と表示されていますので、記事のタイトルを入力しましょう。

本文

続いて、投稿の記事になる部分です。
グーテンベルグでは、本文にカーソルを合わせると右端に「＋」のマークが出てきて、見出しや画像の追加、表の追加などたくさんの機能が存在します。
こちらでは、基本的な機能について順番にご紹介いたします。

1.段落

文字を入力する機能で、記事の文章となる部分を入力しましょう。
「文章を入力、または／でブロックを選択」と表示されている箇所をクリックすれば、そのまま文字を打ち込むことができます。

2.見出し

名前の通り、記事に見出しを追加できる機能です。
基本的にはH2で選択されていますが、見出しブロック上部の「H2」をクリックするとH1からH6まで変更することが可能です。

3.画像

記事に画像を追加できる機能です。
追加方法には3つあります。用途に合わせて使い分けましょう。

1.ご自身のPCから画像を追加する「アップロード」
2.すでにWordPress上にアップされた画像を追加する「メディアライブラリ」
3.画像のURLを使用して追加する「URLから挿入」

4.リスト

記事にリストを追加できる機能です。

5.カラム

記事にカラムを追加できる機能です。
例えば、次の段落で左に文章、右に画像など分けて表示したい時に使用します。
クリックすると出てくるパターンで分割比率を選べるので用途に合わせて選択しましょう。

6.テーブル

テーブルとは、記事中に表を追加する機能です。
テーブルをクリックすると、まず表示されるカラム数と行数についてご説明します。

カラム数→表の横軸となる数（列）
行数→表の縦軸となる数（行）

デフォルトで入っている、「カラム→2」「行数→2」で作成すると、横2列・縦2行の表が作成されます。

装飾編（ブロック）

文章や文字に行える装飾についてご説明します。

1.文字を太くしたい

文章の一部分だけ文字を太くしたい場合は、太くしたい部分を選択してブロックの上部に表示されるメニューバーの中から「B」をクリックしましょう。

2.文章を中央揃えにしたい
文章を中央揃えや右揃えにしたい場合は、ブロック上部の三本線をクリックして、用途に合わせて選択しましょう。

3.文字の大きさを変更したい

段落をクリックすると、画面右側にブロックタブが表示されるので「フォントサイズ」下のタブを選択して、小から特大まで選択できます。
カスタムにすると、任意の文字サイズに変更可能です。
また、行の高さも指定できるので変更したい場合は数値を入力しましょう。

4.文章の色を変更したい

文章の色を変更したい場合は、画面右側のブロックから色設定のタブを開き、任意の色を設定します。
文章の一部分のみを変更することはできませんので、文章全体の色を変更したい場合に有効です。

5.文章の背景色を変更したい

文章の背景色を変更したい場合は、画面右側ブロックから色設定タブを開き、任意の色を選択します。
一部分のみ背景を変更することはできませんので、文章全体の背景を変更したい場合に有効です。
※リストとカラムでは、背景色のみグラデーションを選ぶことができます。

6.先頭の文字を大きくしたい

段落のみとなりますが、文章の一番最初の文字を大きくできる機能です。
画面右側のブロックからテキスト設定タブを開き、ドロップキャップをONにします。
強調したい文章を作成したい時に使うと効果的です。

7.写真の角を丸くしたい

写真を追加して、角を丸くする機能です。
写真を追加した後に、写真を選択した状態で画面右側のブロックからスタイルの「角丸」を選択します。
写真の印象を変えたい場合に有効です。

8.表のスタイルを変更したい

表のスタイルを変更したい場合は、表を追加した後に選択した状態で画面右側ブロックのスタイルから「ストライプ」を選択します。
ストライプにすると、行に交互に色をつけることが可能です。
表にメリハリをつけて見せたい場合に効果的です。

9.表に色をつけたい

表全てに色をつけたい場合は、表を選択した状態で画面右側ブロックの色設定タブをクリックします。
表示された色から任意の色を選択しましょう。

10.文字を斜めにしたい

文章中で文字を斜めにして強調したい場合は、斜めにしたい部分を選択してブロックの上部に表示されるメニューバーの中から「/」をクリックしましょう。

11.リンクを追加したい

詳しくはこちらなどの文字を追加した後に、リンクを追加したい部分を選択してブロックの上部に表示されるメニューバーの中から11番のボタンをクリックしましょう。

ブロックを削除

文章や見出し、画像などを削除をしたい場合は、削除したい対象をクリックすると上部にメニューバーが表示されます。
一番右の縦に点が3つ並んだ「︙」をクリックします。
その中の一番下の「ブロックを削除」をクリックすると、対象のブロックが削除されます。

コピー／複製

文章や見出し、画像などをコピーや複製をしたい場合は、対象をのブロックをクリックすると上部にメニューバーが表示されます。
一番右の縦に点が3つ並んだ「︙」をクリックします。
コピーがしたい場合は、その中の「コピー」をクリックすると、対象のブロックがコピーされます。
複製したい場合は、その中の「複製」をクリックすると、対象のブロックが複製されます。

再利用ブロック

再利用ブロックとは、同一のブロックを同じページ内や違うページで使用したい場合に有効です。

1.再度使いたいブロックをまとめて選択し、一番右の縦に点が3つ並んだ「︙」から「再利用ブロックに追加」をクリックします。
画面右側に再利用ブロックの名前が表示されるので、任意のわかりやすい名前を付けましょう。

2.再利用ブロックを使用する際は、「＋」のマークをクリックして、ブロックの検索で「再利用」と入力します。
すると、作成した再利用ブロックが表示されるので使いたい再利用ブロックを選択します。
文章や写真を変更しない場合はそのままで大丈夫ですが、文章の一部分を変更したい場合には、必ず上部に表示されたメニューバーの中から四角がふたつ重なったマーク（通常のブロックへ変換）をクリックして編集を行いましょう。
この作業を行わないと、元のブロックまで編集されてしまうので注意が必要です。

まとめ

今回は、WordPressのグーテンベルグの使い方（前編）についてご紹介いたしました。
まだまだ、たくさんの機能があるので後編では応用編として使い方をご紹介いたします。
初めてWordPressで投稿を行う方は、ぜひ参考にして下さいね。