楽しく学ぶ!ブロックエディタ(グーテンベルク)の使い方ガイド:WordPress

ブロックエディタ(グーテンベルク)の使い方を楽しく学ぼう!初めて使う人でも理解できるように導入から優しくガイドします。超初心者編からコアブロック、AFFINGER6固有ブロックの解説まで。。

ブロックエディタ(グーテンベルク)の全体像

まず最初にブロックエディタとはどんなものか大まかに説明します。どんな風にして記事を作成するのか?各パネルの役割は?これを知っておけばブロックエディタの理解が一気に進みますよ!

アフィンガーラボ

ブロックエディタの全体像


まず最初にマスターすべき必須のブロック5つを紹介します。特に最初の3つはこれさえマスターすれば最低限の記事はできてしまうという超必須のブロックです。初心者でも理解できるように冒頭で簡単な使い方の解説も行なっています。

「見出し」ブロック

「見出し」は記事の中のリーダー的存在です。つまり記事の大黒柱!記事の骨組みを形成するなくてはならない存在です。

AFFINGER6ブロックエディタ見出しブロックの使い方

「見出し」ブロックの使い方

「段落」ブロック(テキスト)

「段落」は記事の大部分を占める文章のことです。いわば記事の中の主役的な存在にあたります。

AFFINGER6ブロックエディタ段落ブロックの使い方

「テキスト」と「段落」ブロックの使い方

「画像」ブロック

「画像」は記事に彩りを与える華やかな存在です。いわば記事のビジュアル担当です。単なるお飾りではなくSEO的にも大事な要素です。

AFFINGER6ブロックエディタ画像ブロックの使い方

「画像」ブロックの使い方

「リスト」ブロック

リストは箇条書きするときに使います。

アフィンガーラボ

「リスト」ブロックの使い方

「テーブル」ブロック

準備中


ここではAFFINGER6のオリジナルブロックの使い方を紹介します。

会話ふきだし

アイコン画像の横にマンガのようなふきだしを付けます。アイコンの設定方法から使い方まで紹介しています。

アフィンガーラボ

「会話ふきだし」の使い方


ここではブロックエディタの操作方法について紹介します。

記事を公開する

ここでは記事を公開する前にやること7つを紹介しています。

ブロックエディタで記事を公開する。公開前に必要な作業7つ:AFFINGER6(アフィンガー6)

記事を公開する

ブロックの操作方法まとめ

ここではブロックの基本的な操作について紹介しています(変更、移動、コピー、複製)。そして最後にグループ化について紹介しています。これらをマスターすれば編集作業の効率が大幅にアップしますよ。

アフィンガーラボ

ブロックの操作まとめ

段落間の余白を広げる方法

ここでは段落間の余白を広げる方法を3つ紹介しています(スペーサー、ブロック下の余白、CSS追加)。

AFFINGER6(アフィンガー6)で段落間の余白を広げる方法3つを紹介

段落間の余白を広げる方法3つ