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

はじめに

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

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

段落

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


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

③これは段落です。


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

見出し

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


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

リスト

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

ギャラリー

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

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

カバー

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

引用

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

※引用元 Unity Right

プルクオート

引用と似ていますが違うみたいです。調べたけどはっきりしませんでした。”quote”自体が”引用”という意味なので、何でしょうかね。「インタビュー記事の一言を強調して見出しみたいにする」という情報もあって、それが一番しっくりきました。

これがプルクオート

音声

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

メディアと文章

画像と文章を並べるやつ

クラシック

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

クラシック

ボタン

カラム

カラム①です

カラム②です

最大で

6コまで

カラムを

追加

する事が

できます

PCとスマホではかなり見た目が違います

カテゴリー・最新記事

■カテゴリーや

■最新記事など

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

埋め込み

色々埋め込みできます

View this post on Instagram

#シンデレラ #白雪姫 #ディズニー #qposket

A post shared by Sarten (@sarten_ur) on

スペーサー

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

ブロックの移動

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

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

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

マーカー【黄色】

マーカー【青色】

マーカー【赤色】

アンダーライン【黄色】

アンダーライン【青色】

アンダーライン【赤色】

Cocoon

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

白抜きボックス

アイコンボックス

案内ボックス

付箋風ボックス

タブボックス

見出し

見出しブロック

見出し

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

ラベルブロック見出し

ラベルブロック

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

コメント

    • sarten より:

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