Gutenbergのフォーマット(整形)のリスト（HTMLコード付き）

コーディング・プログラミング系/
このエントリーをはてなブックマークに追加

第二弾。この記事は、Gutenberg のプラグインを有効化して書いています。

Gutenberg 5.8.0で確認しています。（2019/6/10追記）

目次

今回はあまりバリエーションがなさそうでさくっと終わりそうです。

コード

.hoge {
    color: #000;
}
<pre class="wp-block-code"><code>.hoge {
    color: #000;
}</code></pre>

クラシック

クラシック

クラシックブロックを選択すると、WYSIWYGエディターで書けます。なつかしいですね。
クラシックを選択したら特に特定のクラスのついたブロックが吐き出されるわけではなく、WYSIWYGで書いたソースコードがそのまま出力されます。

カスタムHTML

てすと
てすととはほにゃららがほにゃららでほにゃららのことです

ブロック内で自由にHTMLが書けます。
こちらもクラシックブロックと同様、特定のクラスのついたブロックが吐き出されるわけではなく、カスタムHTMLで書いたソースコードがそのまま出力されます。

整形済みテキスト

整形済みテキストのブロック
<pre class="wp-block-preformatted">整形済みテキストのブロック</pre>

プルクオート

デフォルト

プルクオート

引用元はここです
<figure class="wp-block-pullquote">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

左寄せ

プルクオート

引用元はここです
<figure class="wp-block-pullquote alignleft">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

右寄せ

プルクオート

<figure class="wp-block-pullquote alignright">
<blockquote>
<p>プルクオート</p>
</blockquote>
</figure>

引用元が未入力でもciteタグがないだけで特に構成は変わらずです。

幅広

プルクオート

引用元はここです
<figure class="wp-block-pullquote alignwide">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

全幅

プルクオート

<figure class="wp-block-pullquote alignfull">
<blockquote>
<p>プルクオート</p>
</blockquote>
</figure>

無地を選択

プルクオート

引用元はここ
<figure class="wp-block-pullquote is-style-solid-color">
<blockquote>
<p>プルクオート</p>
<cite>引用元はここ</cite>
</blockquote>
</figure>

スタイル：色設定のメインカラーを設定（デフォルト）

プルクオート

引用元はここ
<figure class="wp-block-pullquote" style="border-color:#f78da7">
<blockquote class="has-text-color has-luminous-vivid-amber-color">
<p>プルクオート</p>
<cite>引用元はここ</cite>
</blockquote>
</figure>

デフォルトだとfigureにメインカラーが入ります。
テーマによってボーダーが消えていたら表示されませんが、そんな場合はそもそもスタイル設定を組み直したほうが「あれ？」ってならなくてよさそうですね。

スタイル：色設定のメインカラーを設定（無地）

プルクオート

引用元はここです
<figure class="wp-block-pullquote has-pale-pink-background-color is-style-solid-color">
<blockquote class="has-text-color has-vivid-red-color">
<p>プルクオート</p>
<cite>引用元はここです</cite>
</blockquote>
</figure>

スタイルを無地に変えると、デフォルトではボーダーについていたカラーが背景色になります。

テーブル

デフォルト

テーブルテーブル
テーブルテーブル
<table class="wp-block-table">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td><s>テーブル</s></td>
</tr>
</tbody>
</table>

インライン要素として、太字、イタリック、リンク、インライン画像、コード、取り消し線が使えます。

テーブルのセル内の一部だけを右寄せにするなどといった高度なことはできないのと、Gutenberg 5.5現在、thはまだ設定できません。（ゆくゆく入る予定とか？）

左寄せ

テーブルテーブル
テーブルテーブル
<table class="wp-block-table alignleft">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

中央寄せ

テーブルテーブル
テーブルテーブル
<table class="wp-block-table aligncenter">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

右寄せ

テーブルテーブル
テーブルテーブル
<table class="wp-block-table alignright">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

幅広

テーブルテーブル
テーブルテーブル
<table class="wp-block-table alignwide">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

全幅

テーブルテーブル
テーブルテーブル
<table class="wp-block-table alignfull">
<tbody>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
<tr>
<td>テーブル</td>
<td>テーブル</td>
</tr>
</tbody>
</table>

スタイル：ストライプ

ストライプのテーブルストライプのテーブル
ストライプのテーブルストライプのテーブル
ストライプのテーブルストライプのテーブル
<table class="wp-block-table is-style-stripes">
<tbody>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
<tr>
<td>ストライプのテーブル</td>
<td>ストライプのテーブル</td>
</tr>
</tbody>
</table>

テーブル設定：固定幅

固定幅のテーブル固定幅のテーブル
固定幅のテーブル固定幅のテーブル
<table class="wp-block-table has-fixed-layout">
<tbody>
<tr>
<td>固定幅のテーブル</td>
<td>固定幅のテーブル</td>
</tr>
<tr>
<td>固定幅のテーブル</td>
<td>固定幅のテーブル</td>
</tr>
</tbody>
</table>

Gutenbergのテーブルは固定幅かそうじゃないかは書いてる人に委ねています。

確実に固定幅しか使わないならCSSで設定しておけばいいかもしれませんが、基本的にテーマ側でデフォルトの設定を当てない方がよさそうですね。

色設定（デフォルト）

色設定したテーブル色設定したテーブル
色設定したテーブル色設定したテーブル
<table class="wp-block-table has-subtle-light-gray-background-color has-background">
<tbody>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
</tbody>
</table>

デフォルトだと、tableタグに背景色が入ります。

色設定（ストライプ）

色設定したテーブル色設定したテーブル
色設定したテーブル色設定したテーブル
色設定したテーブル色設定したテーブル
<table class="wp-block-table has-subtle-pale-green-background-color has-background is-style-stripes">
<tbody>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
<tr>
<td>色設定したテーブル</td>
<td>色設定したテーブル</td>
</tr>
</tbody>
</table>

ストライプを設定した場合、奇数が色設定で設定した色の背景がつきます。

詩

いったいいつ使うんだ・・・
<pre class="wp-block-verse">いったいいつ使うんだ・・・</pre>

使い所がイマイチわからない詩のブロック。きっといつか使うんでしょう。

このエントリーをはてなブックマークに追加