Gutenberg(ブロックエディター)の使い方!重要な部分だけ

gutenbergの使い方 ブログ

2018年末にWordPressが5.0にバージョンアップしてから、記事を書くエディターが「Gutenberg」という新しいものになりました。

これからWordPressを使っていく方は、Gutenbergを用いて記事を作成することになります。

しかし、以前のクラシックエディターに慣れていた方は、プラグイン「Classic Editor」を使い、従来の入力方式を使っています。

何を隠そう、私もその一人です。

プラグイン「Classic Editor」は2021年12月31日まで有効です。

いずれは「Gutenberg」を使わなければならないので、新しくWordPressで記事を書く方にも役に立つよう、「Gutenbergの使い方」を説明します。

なお、このブログで使っているのは無料テーマ「Cocoon」です。

1.Gutenberg(ブロックエディター)の使い方

プラグイン「Classic Editor」を無効化します。

すると、「ブロックエディターへようこそ」という画面が表示されます。

ブロックエディター

「次」を押します。

ブロックをカスタマイズ

「各ブロックには色、幅、配置などを変更するための独自のコントロールが付属しています」と表示されます。

図の挿入は「画像」と書いてあるところを選択します。

右側メニューの画像設定のところで画像サイズが選べます。ここでは「中」にしました。

段落の上部にはメニューが示されて、文字の色マーカー太字、リンクなどが

装飾できるようになっています。

「次」を押します。

「ブロックライブラリをもっと知る」と表示されます。

「次」を押すと「ブロックエディターの使い方を学ぶ」となります。

そして詳細ガイドへ飛ぶことができます。

ではブロックエディターを始めてみましょう。

2.フルスクリーンモードの停止、パーマリンク

まずエディターを開くとフルスクリーンモードになっていて面くらいます。

フルスクリーンモードを停止するには、右上の縦3つのマークをクリックして、「フルスクリーンモード」のチェックを外します。

そしてまず「タイトルを追加」と書かれているところに記事のタイトルを入力します。

次に「パーマリンク」の設定です。右側メニューの「文書」から「パーマリンク」を開いても編集画面になりません。

そこで、タイトルを書いた後に下書き保存をします。

すると、右側メニューのパーマリンクの欄に「URLスラッグ」という表示が出て編集可能になります。

次にカテゴリー。これは従来のものと変更がありませんので、適切なカテゴリーにチェックをいれます。

3.アイキャッチ画像

私はタグを使っていません。そこで次にアイキャッチ画像の設定です。

右側メニューの「アイキャッチ画像」を押すと「アイキャッチ画像を設定」と出ます。

そうすると「ファイルをアップロード」となりますので、前もって作成しておいたアイキャッチ画像をアップロードして、設定します。

4.冒頭文、見出し、本文、画像

続いて冒頭文の入力です。画面上のプラスマークをクリックします。

そして「段落」を選びます。

前もってパソコンのメモ帳やテキストエディターに入力しておいた冒頭文をコピペします。

冒頭文が終わったら1番目の見出しです。

先ほどの「段落」のマークの下にある見出しマークをクリックします。

そして見出しがh2になっていることを確認して、見出し文をコピペします。

見出しのレベルの選択は、右側メニューからh2、h3などが選べます。

図の挿入は「画像」と書いてあるところを選択します。

右側メニューの画像設定のところで画像サイズが選べます。ここでは「中」にしました。

5.Cocoon特有のメニュー、吹き出しやタブつきの設定

Cocoon特有の吹き出しは、まず左上のプラスマークを押して、下にスクロールさせていき、

「Cocoonブロック」というところを選びます。そして「吹き出し」を選択します。

父さん
父さん

どうやらワシらも生き延びられたようだな

母さん
母さん

Gutenbergも時代の流れですからね

タブボックスを選択し、右側のメニューから「ポイント」を選びます。色も緑色にします。

サンプル

6.まとめ Gutenbergに慣れるのは必須

ここまで、Gutenberg(ブロックエディター)の使い方を見てきました。

はっきり言って非常に疲れました(笑)

これ以降の機能は折りにふれて紹介いたします。

ブログランキングに登録しました。1日1回、ぽちっと応援よろしくお願いします。

備忘録・雑記ランキング
ブログ
スポンサーリンク
スポンサーリンク
ヒロハッピーをフォローする
スポンサーリンク
ありがとうログ

コメント

タイトルとURLをコピーしました