【WordPress】Gutenberg入門③ブロック:フォーマット

前回は一般ブロックについてでした。
今回はフォーマットについて見ていきたいと思います。

フォーマット

プルクオート

  • サイドバーでの説明:テキストの引用に特別な視覚的強調を加えます。
  • タグ:figure.wp-block-pullquoteとblockquote、引用(p)、引用元(cite)
  • できる:ブロック(左寄せ、中央揃え、右寄せ、幅広、全幅)、太字、イタリック、リンク、打ち消し
  • サイドバーでできる:スタイル(通常、無地)、色設定(メインカラー、文字色)、追加CSSクラス

エディタ
20190118_yanagimachi_01.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_02.png

HTML

<figure class="wp-block-pullquote"><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p><cite>「<em>吾輩は猫である</em>」<strong>1905年</strong><del>夏目金之助</del><a href="/">夏目漱石</a></cite></blockquote></figure>

<figure class="wp-block-pullquote alignleft"><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p><cite>「<em>吾輩は猫である</em>」<strong>1905年</strong><del>夏目金之助</del><a href="/">夏目漱石</a></cite></blockquote></figure>

<figure class="wp-block-pullquote alignright"><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p><cite>「<em>吾輩は猫である</em>」<strong>1905年</strong><del>夏目金之助</del><a href="/">夏目漱石</a></cite></blockquote></figure>

<figure class="wp-block-pullquote alignwide"><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p><cite>「<em>吾輩は猫である</em>」<strong>1905年</strong><del>夏目金之助</del><a href="/">夏目漱石</a></cite></blockquote></figure>

<figure class="wp-block-pullquote alignfull"><blockquote><p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p><cite>「<em>吾輩は猫である</em>」<strong>1905年</strong><del>夏目金之助</del><a href="/">夏目漱石</a></cite></blockquote></figure>

カスタムHTML

  • サイドバーでの説明:カスタム HTML コードを追加します。編集しながらプレビューが可能です。
  • タグ:自由入力

エディタ
20190118_yanagimachi_03.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_04.png

HTML

<h2>カスタムHTMLタイトル</h2>
<p>カスタムHTML本文</p>

クラシック

  • サイドバーでの説明:従来の WordPress エディターを使用します。
  • タグ:自由入力
  • できる:テキスト(左寄せ、中央寄せ、右寄せ)、太字、イタリック、リンク、打ち消し、番号なしリスト、番号付きリスト、引用、「続きを読む」タグの挿入、メディアの追加、横ライン、テキスト色、テキストとしてペースト、書式設定をクリア、特殊文字、インデントを減らす、インデントを増やす、取り消し、やり直し

エディタ
20190118_yanagimachi_05.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_06.png

HTML

<h1>h1</h1>
<h3>h2</h3>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>段落<strong>太字</strong><em>イタリック</em><a href="/">リンク</a><del>打ち消し</del></p>
<pre>&lt;h2&gt;h2&lt;/h2&gt;</pre>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<ol>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ol>
<blockquote>
<p>引用</p>
</blockquote>
<p><img class="alignnone size-medium wp-image-63" src="http://localhost/wp-content/uploads/2018/12/500x300-5-300x180.png" alt="" width="300" height="180" srcset="http://localhost/wp-content/uploads/2018/12/500x300-5-300x180.png 300w, http://localhost/wp-content/uploads/2018/12/500x300-5.png 500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<hr />
<p style="padding-left: 30px;">インデント</p>

ソースコード

  • サイドバーでの説明:余白やタグを考慮したコードスニペットを表示します。
  • タグ:pre.wp-block-codeとcode
  • サイドバーでできる:追加CSSクラス

エディタ
20190118_yanagimachi_07.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_08.png

HTML

<pre class="wp-block-code"><code>&lt;h2>ソースコードタイトル&lt;/h2>
&lt;p>ソースコード本文&lt;/p></code></pre>

整形済み

  • サイドバーでの説明:スペースやタブを含むテキストを追加し、スタイリングして表示します。
  • タグ:pre.wp-block-preformattedとcode
  • できる:太字、イタリック、リンク、打ち消し
  • サイドバーでできる:追加CSSクラス

エディタ
20190118_yanagimachi_09.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_10.png

HTML

<pre class="wp-block-preformatted"><code>&lt;p></code>整形済み<strong>整形済み</strong><em>整形済み</em><a href="/">整形済み</a><del>整形済み</del><code>&lt;/p></code></pre>

テーブル

  • サイドバーでの説明:表の挿入。チャートとデータの共有に最適です。
  • タグ:table.wp-block-tableとtbody、tr、td
  • できる:ブロック(左寄せ、中央揃え、右寄せ、幅広、全幅)、太字、イタリック、リンク、打ち消し、上に行を追加、下に行を追加、行の削除、左に列を追加、右に列を追加、列の削除
  • サイドバーでできる:スタイル(通常・ストライプ)、固定幅のテーブルセル、追加CSSクラス
  • できない?:thead,th,tfootを使う

エディタ
20190118_yanagimachi_11.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_12.png

HTML

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

  • サイドバーでの説明:詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。
  • タグ:pre.wp-block-verse
  • できる:テキスト(左寄せ、中央寄せ、右寄せ)、太字、イタリック、リンク、打ち消し
  • サイドバーでできる:追加CSSクラス

エディタ
20190118_yanagimachi_13.png

フロントでの表示(Twenty Nineteen)
20190118_yanagimachi_14.png

HTML

<pre class="wp-block-verse">つれづれ<strong>なるまゝに</strong>、<em>日暮らし</em>、<a href="/">硯にむかひて</a></pre>

<pre style="text-align:left" class="wp-block-verse">つれづれ<strong>なるまゝに</strong>、<em>日暮らし</em>、<a href="/">硯にむかひて</a></pre>

<pre style="text-align:center" class="wp-block-verse">つれづれ<strong>なるまゝに</strong>、<em>日暮らし</em>、<a href="/">硯にむかひて</a></pre>

<pre style="text-align:right" class="wp-block-verse">つれづれ<strong>なるまゝに</strong>、<em>日暮らし</em>、<a href="/">硯にむかひて</a></pre>

フォーマットも長くなってしまいました・・・
ブロックはまだまだ「レイアウト要素」「ウィジェット」「埋め込み」「インライン要素」もありますので、このあとまとめていきたいと思います。

Source: SEO