Gutenberg Style 投稿日:

イメージフォト
Gutenberg Style

インライン要素

インライン画像

改行無し寄せ

サンプル画像1左寄せ

サンプル画像1中央寄せ

右寄せサンプル画像

改行有り寄せ

改行して左寄せ(画像の上)
サンプル画像1
改行して左寄せ(画像の下)

改行して中央寄せ(画像の上)
サンプル画像1
改行して中央寄せ(画像の下)

改行して右寄せ(画像の上)
サンプル画像1
改行して右寄せ(画像の下)

長い文章の場合

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

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

一般ブロック

見出し

H2

H3

H4

H5
H6

段落ブロック

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

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

リスト

UL

  • A AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  • B BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
  • C CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC

UL UL

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
  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

カスタムHTML

使用頻度:低

既存スタイルでは表現しにくいデザイン・レイアウト・機能などを実現する際に使用します。

使いこなすには「HTMLタグ・CSS・JavaScript」などの知識が必要です。

画面画像及びこのアイコン表示の箇所はこのカスタムHTMLを使っています。

テーブル

寄せ無し

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

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

左寄せ

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

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

中央揃え

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

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

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

右寄せ

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

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

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

ストライプ

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

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

左寄せ

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

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

中央揃え

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

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

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

右寄せ

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

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

通常 : カスタム1(thead th 追加)

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

AB
A-1B-1
A-2B-2
A-3B-3
A-4B-4
A-5B-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」を作成し、ソースコードの内容をコピーして貼り付けて作成可能です。

AB
A-1B-1
A-2B-2
A-3B-3
A-4B-4
A-5B-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」を作成し、ソースコードの内容をコピーして貼り付けて作成可能です。

AB
A-1B-1
A-2B-2
A-3B-3
A-4B-4
A-5B-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>

整形済み

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

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

プルクオート(無地)

プルクオート(無地)

引用元

プルクオート(通常)

プルクオート(通常)

引用元

レイアウト要素 1

カラム

カラム2

Column1

Column2

カラム3

Column1

Column2

Column3

カラム4

Column1

Column2

Column3

Column4

カラム5

Column1

Column2

Column3

Column4

Column5

ボタン

寄せ無し

スタイル:角丸(初期設定)
スタイル:角丸
スタイル:角
スタイル:アウトライン

左寄せ

左寄せ

中央揃え

中央揃え

右寄せ

右寄せ

メディアと文章

ギャラリー1

文字サイズ

特大

標準

区切り

短い線


幅広線


ドット


ウィジェット

アーカイブ

ドロップダウン + 投稿数を表示

カテゴリー

ドロップダウン + 階層を表示 + 投稿数を表示

最新の記事

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

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

埋め込み

twitter

寄せ無し

弊社のツイートを埋め込んだ状態。

左寄せ

弊社のツイートを埋め込んだ状態。

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

中央揃え

弊社のツイートを埋め込んだ状態。

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

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

右揃え

弊社のツイートを埋め込んだ状態。

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

レイアウト要素2

改ページ

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

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