Gutenberg Style 投稿日：2019年01月04日

インライン要素

インライン画像

改行無し寄せ

左寄せ

中央寄せ

右寄せ

改行有り寄せ

改行して左寄せ（画像の上）

改行して左寄せ（画像の下）

改行して中央寄せ（画像の上）

改行して中央寄せ（画像の下）

改行して右寄せ（画像の上）

改行して右寄せ（画像の下）

長い文章の場合

このように文章が長い場合、自然改行されると画像の下にテキストが流れてしまうので、長い文章の場合は、上記「改行有り寄せ」のように改行（Shiftキー + Enterキー）するのがおすすめです。

※ブロック「レイアウト要素」の「メディアと文章」を使うとよりスマートに表現可能です。

一般ブロック

見出し

H2

H3

H4

H5

H6

段落ブロック

段落ブロックです。
段落ブロックの下には、Enterキーを押して 空 のPタグを３つ挿入しスペースを空けています。

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

リスト

UL

• A AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
• B BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
• C CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

UL UL

• AAA
  • A-1
  • A-2
  • A-3
• BBB
  • A-1
  • A-2
  • A-3
• CCC
• DDD
• EEE
• FFF

OL

1. A AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
2. B BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
3. C CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

OL OL

1. AAA
   1. A-1
   2. A-2
   3. A-3
2. BBB
   1. A-1
   2. A-2
   3. A-3
3. CCC
4. DDD
5. EEE
6. FFF

OL UL

1. AAA
   • A-1
   • A-2
   • A-3
2. BBB
   • A-1
   • A-2
   • A-3
3. CCC
4. DDD
5. EEE
6. FFF

DL

カスタムHTML で表示

TITLE

CONTENTS

ソースコード

<dl>
	<dt>TITLE</dt>
	<dd>CONTENTS</dd>
</dl>

画像

寄せなし

いろはにほへと ちりぬるを　わかよたれそ つねならむ　うゐのおくやま けふこえて　あさきゆめみし ゑひもせすん

左寄せ

いろはにほへと ちりぬるを　わかよたれそ つねならむ　うゐのおくやま けふこえて　あさきゆめみし ゑひもせすん


ブロック「画像」の下に「段落」を配置し「左寄せ」を適用しています。
ブロック「スペーサー」を下に配置し、段落以下の回り込みを解除しています。
※通常スペーサーを配置しても回り込みを解除できませんがスタイルを追加し実現しています。（右揃えも同様）
※ スペーサー にfloat: none; clear: both; を追加

中央揃え

いろはにほへと ちりぬるを　わかよたれそ つねならむ　うゐのおくやま けふこえて　あさきゆめみし ゑひもせすん

右寄せ

いろはにほへと ちりぬるを　わかよたれそ つねならむ　うゐのおくやま けふこえて　あさきゆめみし ゑひもせすん

カバー

画像寄せ無し・テキスト寄せ無し

画像左寄せ・テキスト寄せ無し

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

画像中央揃え・テキスト寄せ無し

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

画像右寄せ・テキスト寄せ無し

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

画像寄せ無し・テキスト左寄せ

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

画像寄せ無し・テキスト右寄せ

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

ギャラリー

• 

• 

• 

• 

ファイル

左寄せ

中央揃え

右寄せ

引用

引用（通常）

引用【通常】ああああああああああああああああああああああああ

引用元

引用（大）

引用【大】あああああああああああああああああああ

引用元

フォーマット

カスタムHTML

テーブル

寄せ無し

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テキスト（テーブル下のブロック）は回り込みません。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

左寄せ

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テーブルの右側にテキストが表示されます。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。
テーブル下のブロックを回り込み解除するには、ブロック「スペーサー」を追加します。

中央揃え

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テキスト（テーブルの下の要素）は回り込みません。
段落ブロックのテキストを「中央寄せ」にしてみました。

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

右寄せ

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テーブルの左側にテキストが表示されます。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

テーブル下の文章を回り込み解除するには、ブロック「スペーサー」を追加します。

ストライプ

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テキスト（テーブル下のブロック）は回り込みません。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

左寄せ

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テーブルの右側にテキストが表示されます。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。
テーブル下の文章を回り込み解除するには 、ブロック「スペーサー」を追加します。

中央揃え

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テキスト（テーブルの下の要素）は回り込みません。
段落ブロックのテキストを「中央寄せ」にしてみました。

あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。

右寄せ

A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

テーブルの左側にテキストが表示されます。
あああああああああああああああああああああああああ。
いいいいいいいいいいいいいいいいいいいいいいいいい。
ううううううううううううううううううううううううう。
えええええええええええええええええええええええええ。
おおおおおおおおおおおおおおおおおおおおおおおおお。
テーブル下の文章を回り込み解除するには 、ブロック「スペーサー」を追加します。

通常 ： カスタム1（thead th 追加）

セルの先頭行を見出しに変更しています。
ソースコードをご参照ください。

A	B
A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

ソースコード

<table class="wp-block-table">
	<thead>
		<tr>
			<th>A</th>
			<th>B</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A-1</td>
			<td>B-1</td>
		</tr>
		<tr>
			<td>A-2</td>
			<td>B-2</td>
		</tr>
		<tr>
			<td>A-3</td>
			<td>B-3</td>
		</tr>
		<tr>
			<td>A-4</td>
			<td>B-4</td>
		</tr>
		<tr>
			<td>A-5</td>
			<td>B-5</td>
		</tr>
	</tbody>
</table>

通常 ： カスタム2（thead th ／ tbody th 追加）

セルの先頭行を見出しに変更しています。
ソースコードをご参照ください。

※ブロック「カスタムHTML」を作成し、ソースコードの内容をコピーして貼り付けて作成可能です。

A	B
A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

ソースコード

<table class="wp-block-table">
	<thead>
		<tr>
			<th>A</th>
			<th>B</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>A-1</th>
			<td>B-1</td>
		</tr>
		<tr>
			<th>A-2</th>
			<td>B-2</td>
		</tr>
		<tr>
			<th>A-3</th>
			<td>B-3</td>
		</tr>
		<tr>
			<th>A-4</th>
			<td>B-4</td>
		</tr>
		<tr>
			<th>A-5</th>
			<td>B-5</td>
		</tr>
	</tbody>
</table>

ストライプ：カスタム3（thead th 追加）

セルの先頭行を見出しに変更しています。
ソースコードをご参照ください。

※ブロック「カスタムHTML」を作成し、ソースコードの内容をコピーして貼り付けて作成可能です。

A	B
A-1	B-1
A-2	B-2
A-3	B-3
A-4	B-4
A-5	B-5

ソースコード

<table class="wp-block-table is-style-stripes">
	<thead>
		<tr>
			<th>A</th>
			<th>B</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>A-1</td>
			<td>B-1</td>
		</tr>
		<tr>
			<td>A-2</td>
			<td>B-2</td>
		</tr>
		<tr>
			<td>A-3</td>
			<td>B-3</td>
		</tr>
		<tr>
			<td>A-4</td>
			<td>B-4</td>
		</tr>
		<tr>
			<td>A-5</td>
			<td>B-5</td>
		</tr>
	</tbody>
</table>

整形済み

いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん

詩

 いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん 

プルクオート（無地）

プルクオート（無地）

引用元

プルクオート（通常）

プルクオート（通常）

引用元

レイアウト要素 １

カラム

カラム2

カラム3

カラム4

カラム5

ボタン

寄せ無し

スタイル：角丸（初期設定）

スタイル：角丸

スタイル：角

スタイル：アウトライン

左寄せ

左寄せ

中央揃え

中央揃え

右寄せ

右寄せ

メディアと文章

区切り

短い線

---

幅広線

---

ドット

---

ウィジェット

アーカイブ

カテゴリー

最新の記事

【リストビュー】並び順：投稿日時・カテゴリー：すべて・項目数：5・投稿日を表示

• （追記あり）人口が増えると環境破壊だけでなくマナーも悪くなるのか？2018年1月8日
• 田舎の家電量販店で売られているパソコンでどれを選んだら良いか調べてきたよ！（後編）2018年1月6日
• 田舎の家電量販店で売られているパソコンでどれを選んだら良いか調べてきたよ！（前編）2018年1月5日
• パソコン周りでトラブった時は慌てないのが吉2018年1月4日
• 仕事を好きになることって、そんなに難しいことなのか2018年1月3日

【グリッドビュー】並び順：投稿日時・カテゴリー：すべて・項目数：9・投稿日を表示

• （追記あり）人口が増えると環境破壊だけでなくマナーも悪くなるのか？2018年1月8日
• 田舎の家電量販店で売られているパソコンでどれを選んだら良いか調べてきたよ！（後編）2018年1月6日
• 田舎の家電量販店で売られているパソコンでどれを選んだら良いか調べてきたよ！（前編）2018年1月5日
• パソコン周りでトラブった時は慌てないのが吉2018年1月4日
• 仕事を好きになることって、そんなに難しいことなのか2018年1月3日
• 初日の出をきっかけに日本の伝統と宗教観を考えてみる2018年1月2日
• 2017年の災害を振り返って2018年1月1日
• Gutenberg Style2019年1月4日

埋め込み

twitter

寄せ無し

先週の金曜日、お客様の工事現場事務所へ防犯カメラの設置を行ってきました。https://t.co/d2j39iWr6m

— 株式会社モバトス (@movatoss) December 11, 2018

左寄せ

先週の金曜日、お客様の工事現場事務所へ防犯カメラの設置を行ってきました。https://t.co/d2j39iWr6m

— 株式会社モバトス (@movatoss) December 11, 2018

いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん

中央揃え

先週の金曜日、お客様の工事現場事務所へ防犯カメラの設置を行ってきました。https://t.co/d2j39iWr6m

— 株式会社モバトス (@movatoss) December 11, 2018

中央揃えの場合テキスト（埋め込みブロック下の要素）は回り込みません。
段落ブロックのテキストを「中央寄せ」にしてみました。

いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん

右揃え

先週の金曜日、お客様の工事現場事務所へ防犯カメラの設置を行ってきました。https://t.co/d2j39iWr6m

— 株式会社モバトス (@movatoss) December 11, 2018

いろはにほへと ちりぬるを
わかよたれそ つねならむ
うゐのおくやま けふこえて
あさきゆめみし ゑひもせすん

レイアウト要素２

改ページ

1つの記事を複数ページに分ける事が出来る機能です。

ブロック「続きを読む」の説明を分けてありますので、２ページ目もご覧ください。