(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PL2SQSQ');

2019年 06月 25日

Gutenberg に含まれるデフォルトブロック

Gutenbergは様々なブロックを組み合わせることで記事を作成していきます。
ブロックは5つのカテゴリーに分かれているのでそれぞれ紹介していきます。

一般ブロック

一般ブロックは11種類あり、記事を作成するにあたり
基本となるブロックです。

1.段落
2.見出し
3.ギャラリー
4.会話
5.画像
6.リスト
7.引用
8.音声
9.カバー
10.ファイル
11.動画

ブロック名とアイコン説明
文章を書く時に使います。一番使用されるブロックかと思います。
見出しを作成できます。
見出し設定で<H1>~<H6>を選択できます。
複数の画像を並べて表示するギャラリーを作成できます。

会話形式の吹き出しが作成できるブロックです。
【詳しいマニュアルはこちらから】

画像を挿入するブロックです。画像の周囲に表示される青丸をドラッグするだけでサイズを簡単に変更できます。
【詳しいマニュアルはこちらから】

Youtubeなどの動画ではなく、自分のサーバーにアップロードした
mp4などの動画ファイルをアップロードするためのブロックです。
箇条書きのリストを作成するブロックです。
ブロック入力後でも数字リストか黒丸リストかを切替えできます。
引用を挿入するときに使用するブロックです。
音声データを埋め込むブロックです。「自動再生」「ループ」の設定ができます。
カバーブロックでは背景画像を設定し、その上に文章を表示することができます。
PDFなどのファイルをダウンロードするリンクを設置するブロックです。
ファイル名、ボタンの文言を設定できます。

フォーマット

フォーマットのカテゴリーには7種類のブロックがあります。
少し高度なブロックが用意されています。

1.ソースコード
2.クラシック
3.カスタムHTML
4.整形済み
5.プルクオート
6.テーブル
7.詩

ブロック名とアイコン説明
テーブルブロックを使用することでコンテンツに表を追加することができます。
行数・列数の設定や追加が簡単にできるようになってます。
【詳しいマニュアルはこちらから】
何かのソースコードを利用したいときに使用するブロックです。
従来のエディター(クラシックエディター)を利用したいときに使用するブロックです。
HTMLで記述したいときに使用するブロックです。
整形済みテキストを利用したいときに使用するブロックです。
引用をさらに装飾したブロックです。
詩的な文章を作成するときに使えるブロックです。

レイアウト要素

レイアウトカテゴリーには7種類のブロックがあります。

1.ボタン
2.カラム
3.メディアと文章
4.続きを読む
5.改ページ
6.区切り
7.スペーサー

ブロック名とアイコン説明
ボタンブロックを使用してボタンの追加、リンクURL設定ができます。
ブロックを横並びにすることができます。
横並びにする数を2~6カラムで設定できます。
画像とテキストを横並びでレイアウトするブロックです。
文章の途中に以下のような文言を挿入できるブロックです。
長文を区切って複数のページに分ける際に使用します。
水平線の区切り線を挿入できます。
短い線、幅広線、ドットなどの複数のデザインがあります。
スペーサーブロックを使用することでコンテンツに空白を追加することができます。
青丸をドラッグするだけで簡単に高さを調整できます。

 

ウィジェット

ウィジェットには、次の9種類のブロックがあります。

1.ショートコード
2.アーカイブ
3.カレンダー
4.カテゴリー
5.最新のコメント
6.最新の記事
7.RSS
8.検索
9.タグクラウド

 

埋め込み

埋め込みブロックはYouTube、Twitter、Facebook、Instagramなど、様々なウェブサイトのURLを貼ることで、埋め込みができます。
埋め込みブロックは、33種類も用意されています。

 

 

フリーワード検索で探す