ブロックエディタGutenbergのブロックまとめ【JINブロック含む】

よく使うGutenbergブロック要素

まずGutenbergで記事更新する際には
ダッシュボード→投稿→新規追加　で
上記のような画面から記事を書いて行きます！

「タイトル追加」の部分に記事タイトルを入力
（自動的にh1要素となります。）

上記画像のように各ブロックを「段落」「見出し付きボックス」「リスト」「リッチボタン」などブロック要素ごとに積み上げて行き記事を作成致します。

一般ブロック

一番ポピュラーで使用頻度の多いブロック要素が集まってます。

段落

一番基本のブロックになり文章を書く際に使います。
（文章を入力、またはブロックを選択できる）
（1段落が1ブロック）

見出し

大見出しh2、中見出しh3、小見出しh4選択可能です。
必ず使う要素になりますね。

画像

直接アップロードするか既にアップロード済みの画像（メディアライブラリ）から選択して記事内に画像を表示させます！

リスト

箇条書きをリスト表示する際に使います。
通常のリストと番号付きリストは切り替え可能です。

引用

引用文であることを明確にするため、「引用タグ」を使って表示してくれます。
コピーコンテンツと間違われないように正しく使いましょう。

フォーマット

カスタムHTMLや表の作成などタグを使うような要素が多いです。

カスタムHTML

広告で使うHTMLタグを入力することが多いですね。

プレビューボタンでエディタ内でどのように表示されるか確認出来ます。

バナー画像含む広告タグを入力する際に必ず使用致します。

表

列数、行数変更して「表を作成」をクリック

枠内にテキストを入力

表の設定など変更可能
「表のセル幅固定」と「背景色選択」を変更してみる。

簡単な表ならすぐに作成可能です！

レイアウト要素・ウィジェット

レイアウトに関連したボックスとカレンダーなどの「ウィジェット」要素ですが現状ではあまり使用してません。

レイアウト要素では現状よく使うボックスはありません。
※「スペーサー」「ボタン」「区切り」はJINオリジナルブロックが使いやすいので使用してません。

ウィジェットも現状ではよく使うボックスありません。

埋め込み

Twitterやyoutube、インスタなど外部コンテンツを簡単に埋め込めるボックスとなります。

Twitter

埋め込みたいTwitterURLを入力します。

埋め込みをクリックでTwitterのページが簡単に表示されます。
実際の埋め込みはこちら↓

ブログ記事更新致しました🥟

✅eBookJapan（イーブックジャパン）をお得に使う３つのポイントhttps://t.co/3W3X2pq5A7

・国内最大級をほこる電子書籍サービス
・月額利用料金などはかからず会員登録も無料#ブログ #ブログ初心者 #ブログ書け#ebookjapan #イーブックジャパン

— 餃子はサラダ＠40～50代の希望になりたい🥟 (@GyouzaSarada) August 3, 2020

JINブロック

有料テーマJINオリジナルのボックス要素
記事を書く上で便利な物が多く、また見た目も整うので大変便利です！

シンプルボックス

15種類のシンプルなボックスです。
中に入れ子でリスト表示することも可能。
（色の変更、文言の変更も可能）

表示例はこちら↓

見出し付きボックス

見出しが付いた6種類のボックスです。
こちらもポイントなどをまとめて見せる時によく使います！

入力してある文字を後からリストにすることも可能です。

改行されたテキストを選択して

左上の変換→リストをクリック

このボックスはリストにすると区切り線が入るのでよく使います！

その他サンプルはこちら↓

吹き出し

画像を選択→「アイコン名を入力」→忘れずに書き換え
吹き出しの中に文章を入力

吹き出しの枠色、背景色も変更可能！

左右の配置も変更可能

上記のような吹き出しが簡単に作成可能です！

リッチボタン

動きやアクションがついたボタンがカスタマイズ可能

ボタンの種類、色の変更

光るボタンなど動きの選択

ボタンの丸み、数字大きくするほど丸くなります。

押し込む、膨らむなどのアクション選択

サンプルボタンはこちら↓

余白

スペーサーと機能は変わらないのですが枠線がある為、余白が入っていることがわかりやすいので「スペーサー」ではなく「余白」を使ってます。

サイズを数字で変更可能！

ランキング

ランキング表示などに便利なボックス

ワンタッチでボタンを消せます。

王冠が1位は金、2位は銀、3位は銅と切り替え可能

比較やランキングに最適ですね！

ブログカード

自分のサイト内リンクを画像付きで簡単に表示
JINの機能で自サイトの記事URLを直接入力するとこのブログカードで表示されます↓

ブログ初心者が最初に読んで欲しい記事7選 40~50代のblog初心者 ブログ初心者向けの記事が30を越えていてどこから読んでいいのかわからない…どの記事から読んだらいい？ ...

シンプルボタン・横並びボタン

リッチボタンに対してシンプルなタイプのボタン
テキストと2パターンの色、カスタム2つだけ選択可能です。

区切り線

カスタマイズ可能な区切り線

実際の表示はこちら↓

アイコンボックス

16個のシンプルなアイコンボックス
サンプルはこちら↓

JINブロック要素カスタマイズ方法

ダッシュボード→外観→カスタマイズ→ボックスデザイン設定

良い例→メリット
悪い例→デメリット
参考→あわせて読みたい　に自分は変更してます。
※このボックスタイトルは変更するとサイト内全部変更されてしまいますので気を付けて下さい。

ボックスの色はカラーコード直接入力することも出来ます。

Gutenbergパーマリンク変更方法

パーマリンクの設定が「投稿名　sample-post/」の場合

Gutenbergの場合は一旦、下書き保存をしないと
パーマリンク→URLスラッグが表示されません

URLスラッグが日本語を含む「記事タイトル」になっているのでアルファベットのみに変更します。

URLの変更とカテゴリの選択は忘れやすいので
公開する前に必ず確認した方がいいです！

Gutenbergのブロックまとめ