【初心者向け】Gutenbergの使い方を画像付きで詳しく解説

 

こんなお悩みにお答えします。

 

 

【初心者向け】Gutenbergの使い方を画像付きで詳しく解説

Gutenberg（グーテンベルグ）のエディターには「ブロック」という概念が新たに加わったので、従来のエディターのような直感的な操作が難しくなりました。

 

とはいえGutenbergの機能を使いこなせれば、HTMLを記述しなくてもオシャレな装飾が実装できたり、定型文を再利用できたりと便利なのも事実です。

 

ぶっちゃけ、僕自身も初心者の頃はGutenbergのエディターをうまく使えなかったので、今回は初心でも簡単に使えるようにGutenbergの使い方を画像付きで詳しく解説していきます。

 

Gutenbergとは？

Gutenbergはブロックエディターとも呼ばれ、WordPress5.0から標準エディターとして実装されました。従来までのテキストエディターとは違い、文章や画像などをブロック単位で編集・管理しながら執筆します。

 

ブロックエディターの特徴は以下の2つです。

 

 

上記のことからGutenbergは従来よりも高機能なエディターに進化を遂げています。

 

Gutenbergの基本的な使い方

Gutenbergの基本的な使い方は以下の5つです。

 

 

上記をマスターすれば初心者でも問題なく記事を投稿することができます。

 

記事タイトルを入力する

「自動下書き」とデフォルトで入力されているので、好きなタイトルに差し替えます。

 

記事を作成する

Gutenbergは上記のメニューバーを使いながら記事を作成します。よく使用するのは「11」と「13」です。

※使用テーマによって項目に違いがあります。

 

段落を追加する

段落は「enter」で改行すると追加できます。

 

フォントサイズ・文字色を変更する

右側のメニューバーで「フォントサイズ」や「テキストの色」を変更します。

 

見出しを挿入する

段落アイコンをから「見出し」をクリックします。

 

指定したテキストを見出しに変換することができます。

 

リストを挿入する

 

項目によって「箇条書き」や「番号付き」を使い分けましょう。

 

画像を挿入する

左上の「+」をクリックして、メディアブロックから「画像」を選択します。

 

画像ボックスが追加されるので3つのボタンの中から選んで使用します。

 

エディタ上で画像を編修することができます。

 

「Altテキスト」「画像サイズ」を必要に応じて追加、変更します。

 

投稿設定をする

記事を作成したら公開するための設定をします。

 

パーマリンクを設定する

パーマリンクとはページに付与されるURLのことです。

※基本的には英語表記で使用します。

 

カテゴリー・タグの設定をする

記事を分類しやすくするために、「カテゴリー」「タグ」を選択・追加をします。

 

 

アイキャッチ画像を設定する

プレビューする

エディターの画面とブログ記事の画面では装飾やレイアウトが違って見えるので、プレビュー機能を使ってこまめに確認しましょう。

 

記事を公開する

「公開」をクリックすると記事がネット上に公開されます。

 

以上がGutenbergの基本的な使い方です。

ここまでマスターすれば初心者でも問題なく記事を投稿することができます。

 

Gutenbergのエディター画面の使い方

ここからはGutenbergのエディター画面の使い方を解説します。

Gutenbergのエディターには以下の3つのエリアがあります。

 

 

ヘッダーエリア

ヘッダーエリアには、ブロックの追加や下書き保存などのボタンがあります。

よく使われるのは「2」「8～10」のボタンです。

 

投稿エリア

投稿エリアは文章を入力、装飾して記事を作成していきます。

投稿エリアについては「Gutenbergの基本的な使い方」で機能の説明をしたので省きます。

 

サイドバーエリア

サイドバーエリアには「文書」と「ブロック」のタブがあり、記事に対して細かい設定ができます。

 

文書タブ

基本的に文書タブは上記の7つが使えれば問題ないです。

 

ブロックタブ

ブロックタブは、各ブロックに対して変更を加えます。

 

Gutenbergのブロック機能の使い方

さいごに解説するのは、Gutenbergのブロック機能の使い方です。

ブロック機能には「ブロック」と「パターン」タブがあり、簡単に記事内にコードの記述なしで機能を持たせることができます。「ブロックの再利用」の機能も優秀なので併せて解説します。

 

ブロックタブ

左上の「+」ボタンをクリックすると、ブロックが表示されるので必要に応じて使用してください。

 

パターンタブ

パターンタブではボタンブロックなど既に出来上がっているデザインが利用できるので、ユーザーに行動を促すときなどに使えて便利です。

 

ブロックの再利用

同じブロックを再利用したい場合は、いつでも簡単に呼び出せるように赤枠の詳細設定から登録します。

 

「再利用ブロックに追加」をクリックします。

 

再利用ブロックにわかりやすい名前を登録します。

※入力しないと「無題の再利用ブロック」になります。

 

「再利用可能」タブから登録したブロックをいつでも呼び出せます。テキストなどの定型文にも利用できるのでとても便利です。

 

まとめ

今回はWordPressの初心者でもGutenbergの操作が理解できるように「基本的な使い方」「エディター画面の使い方」「ブロック機能の使い方」を画像付きで解説しました。

 

従来のテキストエディターに慣れている人は、Gutenbergの操作に違和感を感じると思いますが「とりあえず触ってみて慣れる」のが大事なのでいろいろ使ってみましょう。知らないだけでGutenbergには便利な機能がたくさんありますよ。

 

今回は以上です。