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

WordPress
悩む人
悩む人

WordPressの新エディターのGutenberがうまく使えません。詳しく教えてください。

 

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

 

本記事の内容
  1. Gutenbergとは?
  2. Gutenbergの基本的な使い方
  3. エディター画面の使い方
  4. ブロック機能の使い方

 

yato
yato

今回はWordPressの初心者でもGutenbergの操作が理解できるように画像を使って解説します。

スポンサーリンク

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

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

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

 

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

 

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

 

スポンサーリンク

Gutenbergとは?

Gutenbergとは?

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

 

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

 

  1. HTMLやCSSの知識なしでリッチなサイトが作れる
  2. 定型文などが再利用できて効率よく執筆できる

 

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

 

スポンサーリンク

Gutenbergの基本的な使い方

Gutenbergの基本的な使い方

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

 

  1. 記事タイトルを入力する
  2. 記事を作成する
  3. 投稿設定をする
  4. プレビューする
  5. 記事を公開する

 

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

 

記事タイトルを入力する

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

 

記事を作成する

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

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

 

段落を追加する

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

同じ段落内で改行したい場合は「shift+enter」で改行ができます。

 

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

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

 

見出しを挿入する

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

 

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

 

リストを挿入する

 

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

 

画像を挿入する

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

 

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

 

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

 

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

 

投稿設定をする

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

 

パーマリンクを設定する

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

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

 

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

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

 

※カテゴリーやタグを新規作成した時は、スラッグ(URL)の部分が日本語表記になっているので ダッシュボード > 投稿 > カテゴリー / タグ で修正します。

 

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

アイキャッチ画像を記事に設定します。
アイキャッチは記事一覧のページなどで表示される画像のことで、読者の目を惹く効果があります。
 
アイキャッチにしたい画像を選択します。
 
アイキャッチが設定されました。
 

プレビューする

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

 

記事を公開する

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

 

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

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

 

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

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

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

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

 

  1. ヘッダーエリア
  2. 投稿エリア
  3. サイドバーエリア

 

ヘッダーエリア

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

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

 

投稿エリア

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

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

 

サイドバーエリア

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

 

文書タブ

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

 

ブロックタブ

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

 

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

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

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

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

 

ブロックタブ

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

 

パターンタブ

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

 

ブロックの再利用

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

 

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

 

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

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

 

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

 

まとめ

まとめ

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

 

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

 

今回は以上です。

WordPress
スポンサーリンク
Skill no manabi – スキルノマナビ –
タイトルとURLをコピーしました