Learning site for website creation

WordPressのブロックとコード

公開日:2022年09月02日 更新日:2022年09月02日

テキストカテゴリー

見出し1

<h1>見出し1</h1>

見出し2

<h2>見出し2</h2>

見出し3

<h3>見出し3</h3>

見出し4

<h4>見出し4</h4>
見出し5
<h5>見出し5</h5>
見出し6
<h6>見出し6</h6>

段落ブロック太字太字段落ブロック斜体斜体段落ブロック

<p>段落ブロック<strong>太字太字</strong>段落ブロック<em>斜体斜体</em>段落ブロック</p>

段落テキスト左寄せ

<p class="has-text-align-left">段落テキスト左寄せ</p>

段落テキスト中央寄せ

<p class="has-text-align-center">段落テキスト中央寄せ</p>

段落テキスト右寄せ

<p class="has-text-align-right">段落テキスト右寄せ</p>

リンク文字

<p>
<a href="https://jobtech.jp/" target="_blank" rel="noopener">リンク文字</a>
</p>
  • 番号なしリストブロック
  • 番号なしリストブロック
  • 番号なしリストブロック
<ul>
  <li>番号なしリストブロック</li>
  <li>番号なしリストブロック</li>
  <li>番号なしリストブロック</li>
</ul>
  1. 番号つきリストブロック
  2. 番号つきリストブロック
  3. 番号つきリストブロック
<ol>
  <li>番号つきリストブロック</li>
  <li>番号つきリストブロック</li>
  <li>番号つきリストブロック</li>
</ol>
  • リストの入れ子
  • リストの入れ子
    • 入れ子になったリスト
    • 入れ子になったリスト
  • リストの入れ子
<ul>
  <li>リストの入れ子</li>
  <li>リストの入れ子<ul>
      <li>入れ子になったリスト</li>
      <li>入れ子になったリスト</li>
    </ul>
  </li>
  <li>リストの入れ子</li>
</ul>

引用文ブロック

引用元
<blockquote class="wp-block-quote">
  <p>引用文ブロック</p>
  <cite>引用元</cite>
</blockquote>
コードブロック
<pre class="wp-block-code">
  <code>コードブロック</code>
</pre>

メディアカテゴリー

通常の画像

キャプション
<figure class="wp-block-image size-full">
  <img alt="画像" src="https://jobtech.jp/smallimage.png">
  <figcaption>キャプション</figcaption>
</figure>

左寄せの画像

左寄せ
コード
<div class="wp-block-image">
  <figure class="alignleft size-full">
    <img alt="画像" src="https://jobtech.jp/smallimage.png">
    <figcaption>左寄せ</figcaption>
  </figure>
</div>

中央寄せの画像

中央寄せ
コード
<div class="wp-block-image">
  <figure class="aligncenter size-full">
    <img alt="画像" src="https://jobtech.jp/smallimage.png">
    <figcaption>中央寄せ</figcaption>
  </figure>
</div>

右寄せの画像

右寄せ
コード
<div class="wp-block-image">
  <figure class="alignright size-full">
    <img loading="lazy" width="640" height="426"
      src="https://jobtech.jp/wp-content/uploads/002-1.jpg" alt="" 
      class="wp-image-6941"
      srcset="https://jobtech.jp/wp-content/uploads/002-1.jpg 640w, 
      https://jobtech.jp/wp-content/uploads/002-1-300x200.jpg 300w"
      sizes="(max-width: 640px) 100vw, 640px" />
    <figcaption>右寄せ</figcaption>
  </figure>
</div>

テーブル

セル幅を固定する

ヘッダーラベルヘッダーラベルヘッダーラベル
通常セル通常セル通常セル
通常セル通常セル通常セル
フッターラベルフッターラベルフッターラベル
キャプション
<figure class="wp-block-table">
  <table class="has-fixed-layout">
    <thead>
      <tr>
        <th>ヘッダーラベル</th>
        <th>ヘッダーラベル</th>
        <th>ヘッダーラベル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>通常セル</td>
        <td>通常セル</td>
        <td>通常セル</td>
      </tr>
      <tr>
        <td>通常セル</td>
        <td>通常セル</td>
        <td>通常セル</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>フッターラベル</td>
        <td>フッターラベル</td>
        <td>フッターラベル</td>
      </tr>
    </tfoot>
  </table>
  <figcaption>キャプション</figcaption>
</figure>

セル幅を固定しない

ヘッダーラベルヘッダーラベルヘッダーラベル
通常セル通常セル通常セル
通常セル通常セル通常セル
フッターラベルフッターラベルフッターラベル
キャプション

<figure class="wp-block-table">
  <table>
    <thead>
      <tr>
        <th>ヘッダーラベル</th>
        <th>ヘッダーラベル</th>
        <th>ヘッダーラベル</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>通常セル</td>
        <td>通常セル</td>
        <td>通常セル</td>
      </tr>
      <tr>
        <td>通常セル</td>
        <td>通常セル</td>
        <td>通常セル</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>フッターラベル</td>
        <td>フッターラベル</td>
        <td>フッターラベル</td>
      </tr>
    </tfoot>
  </table>
  <figcaption>キャプション</figcaption>
</figure>