はじめに
WordPress標準の「テーブル」ブロックを活用して、比較表を作成します。
この記事では、この方法について説明します。
完成イメージ
| 項目 | 製品A | 製品B |
|---|---|---|
| 項目1 | 約35.9×23.9mm最大約2010万画素 | 約22.3×14.8mm最大約3250万画素 |
| 項目2 | メカシャッター:1/200秒 | メカシャッター:1/250秒 |
実装手順
以下の手順で実装します。
- ラベルメディアへの画像登録

メディア 以下の手順で記号画像をメディア登録します。
- あらかじめ記号を、背景透明な画像で作成します。
- 記号画像は比較表などで何度も再利用されるため、画像が検索しやすいようにタイトルを設定します。
- 記号画像の代替テキストは、全て
markと入力します。
- ラベルGutenbergエディターでの設定

Gutenbergエディター ブロックツールーのインライン画像から、記号画像を挿入します(図2参照)。
- ラベルCSSを追加
以下のコードをstyle.cssに追加します。
.entry-content { td { position: relative; z-index: 1; } img[alt="mark"] { inset: 0; margin: auto; position: absolute; z-index: -1; } }
参考:テンプレート機能を利用
Cocoonの場合、テンプレート機能(Cocoon設定→テンプレート)を利用する方法もあります。
図3に示すように、あらかじめ登録しておいた記号のHTMLを呼び出して利用することができます。

表1にインライン画像とテンプレート機能の、メリットとデメリットを示します。
| 方法 | メリット | デメリット |
|---|---|---|
| インライン画像 | 視覚的にわかりやすく、直接挿入可能。 | メディアから毎回検索する必要がある。 |
| テンプレート機能 | メニューから簡単に選択可能。 | ショートコードのみで記号がわかりにくい。 |
さいごに
今回紹介した方法を使えば、簡単に比較表を作成することができます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。

約35.9×23.9mm
約22.3×14.8mm
メカシャッター:1/200秒
メカシャッター:1/250秒

