ブロックエディターのブロック仕上がりイメージ【Gutenberg】

はじめに

何となく使い辛さを感じていたブロックエディターですが、思っていたより便利な機能がたくさんありました。もちろん問題もあるんですけど、そこは割り切って使える時は使おうかなみたいな。

ブロック仕上がりイメージ

段落

①と②の間は改行で、②と③の間は段落です。


①これは改行です。
②これは改行です。

③これは段落です。


ブロック追加しなくてもEnterで段落を追加できます。

見出し

旧エディターと同じ見出しが選択できます。


スマホで旧エディターを使う場合、いちいちサイトの最上部まで戻らないと見出し等を選択出来ません。私の様なスマホ編集メインの方はブロックエディターの方が作業効率は良いですね。

リスト

  • リストは
  • 今までと
  • 一緒です
  1. 数字の
  2. パターンも
  3. もちろん
    1. さらに
    2. インデントも
    3. できます

ギャラリー

画像ギャラリーは便利ですね。新しい。

PCとスマホでは配置が異なります。※そりゃそうだ

カバー

この様に画像に文字を挿入し、
さらにリンクを貼る事も可能(^ω^ )

引用

この様なヤツです。引用です。

※引用元 Unity Right

プルクオート

引用は他人の文章を挿入しますが、プルクオートは自分の文章の一部分を目立たせる用途みたいです。「インタビュー記事の一言を強調して見出しみたいにする」という情報もあって、それが一番しっくりきました。

これがプルクオート

音声

音声を追加する事もできます。ここでは割愛(特に音声データ無いので・・)

メディアと文章

画像と文章を並べるやつ

クラシック

そのブロックだけ旧エディターが使えるという。斬新。

クラシック

ボタン

カラム

PCだと横並びになりますが、スマホで閲覧するとカラムは縦1列に並びます。

カラム①です

カラム②です

最大で

6コまで

カラムを

追加

する事が

できます

カテゴリー・最新記事

■カテゴリーや

■最新記事など

を簡単に追加する事ができます。

埋め込み

SNSなどを色々埋め込みできます

スペーサー

例えば段落をたくさん追加しても、その分スペースが広がる訳ではありません。そんな時はスペーサー。直観的にスペースをあけることができます。

ブロックの移動

各ブロックを直観的に移動させる事ができます。上から3番めのブロックを一番上に持ってきたりとか。これも便利ですね。

マーカーとアンダーライン

知らぬ間に機能が追加されていました

マーカー【黄色】

マーカー【青色】

マーカー【赤色】

アンダーライン【黄色】

アンダーライン【青色】

アンダーライン【赤色】

Cocoon

さすがです。ありがとうございます!旧エディターで多用していたものがブロックエディターでも使える様になっていました。

白抜きボックス

アイコンボックス

案内ボックス

付箋風ボックス

タブボックス

見出し

見出しブロック

見出し

タブ見出しブロック(^ω^ )

ラベルブロック見出し

ラベルブロック

マイクロコピーバルーン
マイクロコピーテキスト

コメント

    • sarten より:

      紹介までしていただき有難う御座います!クボヒロさんのサイトめちゃめちゃ見やすいですねww
      もっと私も頑張ります!

      • クボヒロ より:

        sarten 様
        コメントしていただいているの分からず、お礼が遅れました。
        まことに勝手ながら、自分のブログへ掲載させてさせていただきました!!(遅い)
        このブログが一番、わかりやすいGutenbergブロックの説明をされていたので参考にさせていただきました。ありがとうございます!こちらこそ頑張らなければなりませんね・・^^;w

        • sarten より:

          クボヒロ 様

          いつもお世話になっております。

          クボヒロさんのサイトのリンクを貼りたいなーと思ってずっと迷ってましたが、やっぱ貼りますねw

          またお時間あれば時に遊びにきてください(^ω^ )