簡単に、比較表を作成する方法

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

Cocoon 2.7.1でサポート

はじめに

WordPress標準の「テーブル」ブロックを活用して、比較表を作成します。

この記事では、この方法について説明します。

完成イメージ

項目製品A製品B
項目1mark約35.9×23.9mm
最大約2010万画素
mark約22.3×14.8mm
最大約3250万画素
項目2markメカシャッター:1/200秒markメカシャッター:1/250秒

実装手順

以下の手順で実装します。

  • ラベル
    メディアへの画像登録
    メディア

    以下の手順で記号画像をメディア登録します。

    1. あらかじめ記号を、背景透明な画像で作成します。
    2. 記号画像は比較表などで何度も再利用されるため、画像が検索しやすいようにタイトルを設定します。
    3. 記号画像の代替テキストは、全てmarkと入力します。

    画像の大きさは、行の高さに合わせ、幅40×高さ40pxとします。

  • ラベル
    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を呼び出して利用することができます。

Gutenbergエディター

表1にインライン画像とテンプレート機能の、メリットとデメリットを示します。

メリット・デメリット
方法メリットデメリット
インライン画像視覚的にわかりやすく、直接挿入可能。メディアから毎回検索する必要がある。
テンプレート機能メニューから簡単に選択可能。ショートコードのみで記号がわかりにくい。

さいごに

今回紹介した方法を使えば、簡単に比較表を作成することができます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。

タイトルとURLをコピーしました