ブロックエディターのブロック仕上がり一覧【Gutenberg】

スポンサーリンク

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

ブロック仕上がり一覧

全部ではありませんが、主なブロックの仕上がりイメージを一覧にしました。

段落

①と②の間は改行で、②と③の間は段落です。ブロック追加しなくてもEnterで段落を追加できます。


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

③これは段落です。


見出し

H2〜H4の見出しが選択できます。


リスト

  • リストは
  • 今までと
  • 一緒です
  1. 数字の
  2. パターンも
  3. もちろん
    1. さらに
    2. インデントも
    3. できます
さらに見出しをつけて
  • 枠を付けたりして
  • オリジナルなリストも
  • いいですよね
  1. カスタマイズ方法は
  2. 参考にできるサイトがたくさんあるので
  3. 是非チェックしてみてください

ギャラリー

画像ギャラリーは新しいですね。オシャレ。

カバー

引用

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

※引用元 Unity Right

プルクオート

引用は他人の文章を挿入しますが、プルクオートは自分の文章の一部分を目立たせる「抜粋」みたいです。

Pull Quote はデザイン的な要素としても利用されます。記事中の重要なポイント・興味を惹くフレーズを目立たせる事によって、読者にアピールをしている訳です

私の調べた限りですが・・

音声

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

メディアと文章

画像と文章を並べるやつ

クラシック

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

クラシック

ボタン

カラム

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

カラム①です

カラム②です

最大で

6コまで

カラムを

追加

する事が

できます

カテゴリー・最新記事

それぞれ簡単に挿入できます。一度入れておけば内容は自動的に更新されていくので、見た目をカスタマイズしておけばかなり使えると思います。

↓カテゴリー記事

↓最新記事

埋め込み

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

↓Instagram の埋め込み

↓twitter の埋め込み

↓Youtubeの埋め込み

【ドクターマリオ】難関3Cを星3つクリア

スペーサー

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

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

マーカー【黄色】

マーカー【青色】

マーカー【赤色】

アンダーライン【黄色】

アンダーライン【青色】

アンダーライン【赤色】

Cocoon

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

吹き出しとか

ボックス

案内ボックス

見出し

これ欲しかったです!

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

Comment

  1. Arnold より:

    参考になりました。
    最近のアップデートでFirefoxがTwitterブロック表示しなくなったことと
    IEやEdge、Chome系のブラウザでは問題なく表示されていることがが改めて確認できました。
    とはいえどうしたものか・・・。

    • sarten より:

      Arnoldさん

      コメントありがとうございます!

      やはりブラウザによって色々と問題があるんですね。。私もアップデートの度にドキドキしていますww

    • sarten より:

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

      • クボヒロ より:

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

        • sarten より:

          クボヒロ 様

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

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

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

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