WordPress ブロック 表示確認

引用

引用する文字

引用先

<blockquote class="wp-block-quote">
  <p>引用する文字</p>
  <cite>引用先</cite>
</blockquote>

ギャラリー

• 

• 

<ul class="wp-block-gallery columns-2 is-cropped">
  <li class="blocks-gallery-item">
    <figure>
      <img src="https://*url*/image-12.png" alt="" data-id="266" data-link="https://*url*" class="wp-image-266"/>
      <figcaption>キャプション</figcaption>
    </figure>
  </li>
  <li class="blocks-gallery-item">
    <figure>
      <img src="https://*url*/*filename*" alt="代替テキスト" data-id="267" data-link="https://*url*" class="wp-image-267"/>
      <figcaption>キャプション</figcaption>
    </figure>
  </li>
</ul>

カバー

<div class="wp-block-cover has-background-dim" style="background-image:url(https://*url*/*filename*)">
  <p class="wp-block-cover-text">タイトル。</p>
</div>

ファイル

<div class="wp-block-file">
  <a href="https://*url*/*filename*">googleAdSense</a>
  <a href="https://*url*/*filename*" class="wp-block-file__button" download>ダウンロード</a>
</div>

音声と動画は ファイルが無いので割愛。後日アップ

フォーマット

カスタムHTMLとクラシック 割愛。

ソースコード

print "hello world!"

<pre class="wp-block-code">
  <code>print "hello world!"</code>
</pre>

整形済み

鳴かぬなら 鳴かせてみせよう ホトトギス

<pre class="wp-block-preformatted">鳴かぬなら 鳴かせてみせよう ホトトギス</pre>

プルクオート

プルクオート?

引用元

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

テーブル

列1 – 行1	列2 – 行1
列1 – 行2	列2 – 行2

<table class="wp-block-table">
  <tbody>
    <tr>
      <td>列1 - 行1</td>
      <td>列2 - 行1</td>
    </tr>
    <tr>
      <td>列1 - 行2</td>
      <td>列2 - 行2</td>
    </tr>
  </tbody>
</table>

詩

ここ

どっかに行こうと私が言う
どこ行こうかとあなたが言う
ここもいいなと私が言う
ここでもいいねとあなたが言う
言ってるうちに日が暮れて
ここがどこかになっていく

<pre class="wp-block-verse">
  ここ<br><br>
  どっかに行こうと私が言う<br>
  どこ行こうかとあなたが言う..
</pre>

レイアウト

区切り文字

---

<hr class="wp-block-separator"/>

続きを読む

<span id="more-301"></span>

投稿個別ページを開いている時点で “もっと読む” が選択された状態なので 本ページではデザイン確認できず

メディアと文章

<p class="has-large-font-size">コンテント</p>

ボタン

<div class="wp-block-button">
  <a class="wp-block-button__link" href="https://*url*">ボタン</a>
</div>

カラム

改ページ