キャリカク岡山

コアブロックの使い方詳細

WordPressは、表示する時に、

文章や画像、表、引用、コードなどを

「ブロック」という部品として扱います。

その中でも、

WordPress本体に最初から用意されている

基本ブロックを「コアブロック」と呼びます。

この記事では、よく使うコアブロックを、

実際にHTMLとして書く形で紹介します。

なお、WordPressのコードエディターに直接貼り付ける場合は、

通常のHTMLタグだけでなく、

次のようなブロックコメントも一緒に使います。

<!-- wp:paragraph -->
<p>ここに本文を書きます。</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph --> のような部分は、

WordPressに「ここから段落ブロックです」と伝えるための目印です。

段落ブロック paragraph

段落ブロックは、本文を書くときに一番よく使うブロックです。

普通の文章は、基本的にこの段落ブロックで作ります。

実際の書き方

<!-- wp:paragraph -->
<p>これは段落ブロックです。本文を書くときに使います。</p>
<!-- /wp:paragraph -->

使いどころ

• 通常の本文を書くとき
• 説明文を書くとき
• 短い案内文を書くとき

文章を読みやすくするためには、

長い文章を1つの段落に詰め込まず、

意味のまとまりごとに段落を分けると見やすくなります。

見出しブロック heading

見出しブロックは、記事の内容を区切るために使います。

見出しがあると、読者が「ここから何の話なのか」をすぐに理解しやすくなります。

WordPressの記事では、

記事タイトルがすでに大きな見出しとして扱われることが多いので、

本文では h2 から使うと分かりやすいです。

h2の例

<!-- wp:heading {"level":2} -->
<h2 class="wp-block-heading">大きな見出し</h2>
<!-- /wp:heading -->

h3の例

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">小見出し</h3>
<!-- /wp:heading -->

見出しレベルの目安

level は、見出しの階層を指定する属性です。

たとえば {"level":3} と書くと、

WordPressには「これはh3の見出しです」と伝わります。

リスト(箇条書き)ブロック list

リスト(箇条書き)ブロックは、項目を並べて説明したいときに使います。

箇条書きにすると、文章だけで説明するよりも

読みやすくなります。

順番なしリスト

<!-- wp:list -->
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
<!-- /wp:list -->

ul は順番のないリストです。

買い物リストや特徴の一覧など、

順番が重要ではない項目に向いています。

番号付きリスト

<!-- wp:list {"ordered":true} -->
<ol>
<li>最初に行うこと</li>
<li>次に行うこと</li>
<li>最後に行うこと</li>
</ol>
<!-- /wp:list -->

ol は番号付きリストです。

手順やランキングのように、順番が大切な説明に向いています。

引用ブロック quote

引用ブロックは、他の文章や発言を引用するときに使います。 本文とは少し違う見た目になるため、「ここは引用です」と分かりやすくなります。

<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p>これは引用文です。</p>
<cite>引用元の名前</cite>
</blockquote>
<!-- /wp:quote -->

blockquote が引用全体を表し、

cite は引用元を表します。

引用元が分からない場合は、cite を省略しても構いません。

画像ブロック image

画像ブロックは、記事の中に画像を表示するときに使います。

WordPressでは、画像をアップロードしてから

メディアライブラリのURLを指定する形が一般的です。

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="https://example.com/sample.jpg" alt="画像の説明"/>
<figcaption class="wp-element-caption">画像の説明文です。</figcaption>
</figure>
<!-- /wp:image -->

画像では、特に alt が大切です。

見た目だけでなく、読み上げソフトや検索エンジンに対しても、

画像の内容を伝える役割があります。

表ブロック table

表ブロックは、項目を比較したり、

一覧として整理したいときに使います。

タグ名と意味、料金表、対応表などに向いています。

<!-- wp:table -->
<figure class="wp-block-table">
<table>
<thead>
<tr><th>項目</th><th>説明</th></tr>
</thead>
<tbody>
<tr><td>HTML</td><td>文章の構造を表します</td></tr>
<tr><td>CSS</td><td>見た目を整えます</td></tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->

WordPressの表ブロックでは、

figure class="wp-block-table" の中に

table を入れる形がよく使われます。

コードブロック code

コードブロックは、HTMLやPythonなどのプログラムコードを表示したいときに使います。

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;h2&gt;見出し&lt;/h2&gt;
&lt;p&gt;本文です。&lt;/p&gt;</code></pre>
<!-- /wp:code -->

コードを表示するときは、< や

> をそのまま書かないように注意します。

HTMLタグとして処理されないように、次のように置き換えます。

短いコードであれば、段落の中に <code> を入れて表示する方法もあります。

<!-- wp:paragraph -->
<p>段落は <code>&lt;p&gt;</code> タグで作ります。</p>
<!-- /wp:paragraph -->

区切り線ブロック separator

区切り線ブロックは、話題の切れ目を分かりやすくしたいときに使います。

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->
hr は、HTMLで区切り線を表すタグです。

WordPressでは、テーマによって線の色や太さが変わることがあります。

スペーサーブロック spacer

スペーサーブロックは、上下に余白を入れたいときに使います。

文章と文章の間を少し広げたい場合に便利です。

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

ただし、制限が強いWordPressでは style 属性が削除される場合があります。

その場合は、WordPressの画面上でスペーサーブロックを追加する方が安定します。

ボタンブロック buttons

ボタンブロックは、

リンクをボタンのように見せたいときに使います。

お問い合わせページや詳しい説明ページへの誘導に向いています。

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button" href="https://example.com">詳しく見る</a>
</div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

ボタンは便利ですが、

テーマや権限によって表示が変わることがあります。

安全寄りにする場合は、

普通のリンクブロックとして出力する方法もあります。

HTMLブロック html

HTMLブロックは、

自分でHTMLを書きたいときに使います。

通常の段落や見出しでは表現しにくい内容を入れるときに便利です。

<!-- wp:html -->
<div>
<p>これはHTMLブロックの中に書いた段落です。</p>
</div>
<!-- /wp:html -->
ただし、HTMLブロックでは何でも自由に使えるわけではありません。

WordPressの安全設定によって、

危険と判断されたタグや属性は保存時に削除されることがあります。

避けた方がよいもの

• <script>
• <iframe>
• <style>
• onclick=""
• javascript: から始まるリンク

制限が強い環境では、

HTMLブロックを多用するよりも、

段落ブロック、

見出しブロック、

表ブロック、

コードブロックなどの

基本ブロックを使う方が安定します。

埋め込みブロック embed

埋め込みブロックは、

YouTubeやX、TikTokなどの外部サービスのURLを

記事に埋め込むために使います。

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=example","type":"video","providerNameSlug":"youtube"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube">
<div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=example</div>
</figure>
<!-- /wp:embed -->

ただし、制限が強いWordPressでは、

埋め込みがうまく残らない場合があります。

その場合は、埋め込みではなく普通のリンクとして表示する方が安全です。

<!-- wp:paragraph -->
<p>動画はこちらです。<a href="https://www.youtube.com/watch?v=example" target="_blank" rel="noopener">YouTubeで見る</a></p>
<!-- /wp:paragraph -->

コアブロックでよく使う属性

ブロックコメントの中にある {"level":2} や {"ordered":true} のような指定は、

ブロックの設定情報です。

HTMLタグの中にある href、src、alt、class などは、HTMLの属性です。ブロックコメント内の設定と、HTMLタグ内の属性は、似ていますが少し役割が違います。

初心者がまず覚えるとよいコアブロック

最初からすべてのブロックを覚える必要はありません。

まずは、
・段落、
・見出し、
・リスト、
・画像、
・表
の5つを使えるようになるだけでも、かなり記事を作りやすくなります。

まとめ

コアブロックは、WordPressの記事を作るための基本部品です。

• 本文は paragraph
• 区切りは heading
• 箇条書きは list
• 画像は image
• 表は table
• コード表示は code

このように役割を分けて考えると、

WordPressのブロックエディター(ビジュアルエディターとコードエディターの総称)

はかなり分かりやすくなります。

HTMLタグだけを見ると難しく感じますが、

コアブロックは「文章の部品」と考えると理解しやすくなります。

・文章を段落にする、
・見出しを付ける、
・表で整理する、
・画像を入れる。

その一つひとつが、WordPressではブロックとして扱われています。

もし、わかりづらい場合、以前のページで

できるだけ、わかりやすく書いているので、

ご参照頂けたら幸いです。

・ホームページを表示するには？
・HTMLって、どうやって使うの？
・主なHTMLタグ一覧
・WordPressって、どういうもの？
・WordPressとHTMLの対応は？

キャリカク岡山：F.K.