WordPressのブロックとコード
公開日: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>
- 番号つきリストブロック
- 番号つきリストブロック
- 番号つきリストブロック
<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>
同じカテゴリーのコンテンツ