Gutenberg

【Gutenberg】ブログ初心者におすすめ!ブロックエディタの基本的な使い方

【Gutenberg】ブログ初心者におすすめ!ブロックエディタの基本的な使い方
こんにちは! Webデザイナーのアズサ(@azusascom)です。

ブロックエディタを普及させようと、3月はGutenberg記事を4つアップしました。

しかし、4月5月は0記事、6月は1記事という状態。

普及させる気があるとは思えないw

しかも、Gutenbergの使い方についてまだ書いてなかったんですよね。

そこで今回は、ブロックエディタ「Gutenberg」の基本的な使い方についてご紹介します。

Gutenbergの編集画面

まずは、Gutenbergの編集画面を見てみましょう。

Gutenbergの編集画面

クラシックエディタに比べると、だいぶスッキリした印象ですね。

画面中央は記事を書く場所。

Gutenbergの編集画面の記事を書く場所

文章や画像の見た目を確認しながら執筆できるようになってます。

画面右側のサイドメニューでは、記事全体の設定が可能。

Gutenbergの編集画面右側のサイドメニュー

「文書」メニューが選択されてる場合、公開状態やアイキャッチ、カテゴリーなどを設定できます。

クラシックエディタと似てるので、すぐに慣れるはず。

なお、サイドメニューは、選択してるブロックによって変化するんです。

段落ブロックを選択したときのサイドメニュー

上記画像は、通常の文章を入力する「段落ブロック」を選択したときのもの。「ブロック」というサイドメニューが選択されてますね。

段落ブロックのサイドメニューでは、文字サイズや文字の色を変更できるんです。

文章のカスタマイズができるメニュー内容になってます。

下記は、画像ブロックを選択したときのもの。

画像ブロックを選択したときのサイドメニュー

サイドメニューは同じ名前の「ブロック」ですが、内容が変わりました。

代替テキストの入力や画像サイズの変更など、画像に特化したメニューになってるんです。

ブロックエディタで記事を書いてみよう

ここからは、文章を書いて記事を公開するまでの基本操作を説明していきます。

基本的にやることは以下です。

  1. タイトルを入力する
  2. 文章を入力・ブロックを追加する
  3. ブロックを編集する
  4. サイドメニューで各種設定をする
  5. 公開する

1.タイトルを入力する

編集画面のいちばん上に入力欄があるので、記事タイトルを入力します。

タイトル入力欄

タイトルを選択するとパーマリンクの編集も可能になるので、ついでに決めておくといいですね。

2.文章を入力する・ブロックを追加する

記事本文を入力していきます。

「文章を入力、または / でブロックを選択」という部分を選択して、文字を入力していくだけです。

文章を入力、または / でブロックを選択

「Enter」キーを押すと次のブロックが出てくるので、クラシックエディタと同じように文章を書き進められますよ。

リストを使ったり画像を挿入するときは、ブロックを追加します。

何も入力してないブロックを選択すると、左側に「+」マークが表示されるのでクリックします。

ブロック一覧

すると、ブロック一覧が表示されます。カテゴリ別に分類されてるんです。

では、リストをつくってみますね。

一般ブロックのリスト

「一般ブロック」の「リスト」をクリックします。

リストの「●」が表示されるので、文字を入力していきます。

リストブロック

「Enter」キーを押せば次の「●」が出てきます。

画像も追加してみますね。

一般ブロックの画像

「一般ブロック」の「画像」をクリックします。

画像ブロックが表示されました。

画像ブロック

アップロード方法はいくつかありますが、画像をドラッグするのがいちばん簡単です。

画像ブロックにファイルをアップロード
画層アップロード完了

画像がアップロードされました。

種類が多いので、他のブロックについては別の記事で書きますね。

3.ブロックを編集する

必要に応じて、ブロックを編集します。

画像には代替テキストの入力が必要。例として、先ほど追加した画像ブロックに設定してみますね。

画像を選択し、サイドメニューに表示される「代替テキスト」を入力します。

画像ブロックのサイドメニュー
代替テキストを入力

代替テキストの入力は、クラシックエディタより簡単になりました。

他にも、強調したい部分を太字にしたり、記事が読みやすくなるように編集します。

文字装飾については「【Gutenberg編】絶対使う!WordPressの文字装飾5選」という記事があるので、よかったら読んでみてくださいね。

4.サイドメニューで各種設定する

サイドメニューにある項目で、最低限設定しておくのは以下3つです。

  • パーマリンク
  • カテゴリー
  • アイキャッチ

パーマリンク

パーマリンクとはURLの末尾部分のこと。

サイドメニューのパーマリンク

この記事の場合「gutenberg-how-to-use」の部分です。

タイトル入力とのきにパーマリンクを決めなかった場合、公開前に設定しておきます。

カテゴリー

サイドメニューのカテゴリー

クラシックエディタと同様に、設定したいカテゴリーにチェックを入れるだけ。

もし、まだカテゴリーを決めてない場合は、「WordPressのカテゴリーを設定して記事を分類しよう」という記事を参考に設定してみてくださいね。

アイキャッチ

サイドメニューのアイキャッチ

こちらもクラシックエディタと同じ。「アイキャッチ画像を設定」をクリックし、画像を選択します。

「代替テキスト」を入力し、「選択」ボタンを押します。

アイキャッチ選択画面
アイキャッチ設置完了

サイドバーに画像が表示されればアイキャッチ設置完了です。

5.公開する

設定が終わったら、プレビュー画面で最終チェック。

サイドメニューのステータスと公開状態

問題なければ画面右上の「公開する」をクリックします。

予約投稿日時設定画面

予約投稿をする場合は、「ステータスと公開状態」の「今すぐ」をクリックします。

予約投稿ボタン

日時を設定したら、右上の「予約投稿」ボタンを押します。

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

意外と使いやすいGutenberg

今回は、ブロックエディタ「Gutenberg」の基本的な使い方についてご紹介しました。

  • サイドメニューは、選択してるブロックによって変化する。
  • クラシックエディタと同じように文章を書き進められる。
  • Gutenbergは簡単に画像を追加できる。
  • パーマリンク・カテゴリー・アイキャッチは必ず設定する。

クラシックエディタと同じように操作できる部分も多く、使ってみると意外と大丈夫だったりします。

また、ブログ初心者さんこそ、ブロックエディタ「Gutenberg」は使いやすいはず。直感的に操作できるので。

パソコンに苦手意識がある女性には特におすすめです。

まずは1記事、Gutenbergを使ってみてはいかがでしょうか。

ではでは。

稼ぐ力を身につけて運命を変えよう!
ビジネスの勉強、試してみる価値あるかも。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です