簡単に、ブロックを使用して順序を比較できるリストボックスを作成する方法

はじめに

以下のデザインを、Cocoon標準のブロックのみを使って実現します。

上下の比較ができるリストボックスを作る【コピペカスタマイズ】

比較ができる箇条書きをHTMLとCSSで作りました。WordPressユーザーで初心者の方でも使えるようにコピペでできるようになっています。画像で比較表を作るのが面倒なときに使ってください！

ponhiro.com

ダウンロード

以下のデータをコピーし、そのまま「段落」ブロックに貼り付けます。

<!-- wp:cocoon-blocks/caption-box-1 {"className":"my-compare-box"} -->
<div class="wp-block-cocoon-blocks-caption-box-1 caption-box block-box not-nested-style cocoon-block-caption-box my-compare-box"><div class="caption-box-label block-box-label box-label"><span class="caption-box-label-text block-box-label-text box-label-text">見出し</span></div><div class="caption-box-content block-box-content box-content"><!-- wp:paragraph {"className":"unit top"} -->
<p class="unit top">上テキスト</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>リストボックス</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"metadata":{"name":""},"className":"unit bottom"} -->
<p class="unit bottom">下テキスト</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cocoon-blocks/caption-box-1 -->

<!-- wp:html -->
<style data-wp-block-html="css">
:root {
  --my-bgcolor: #fff6f2;       /* 背景カラー */
  --my-title-bgcolor: #ffa883; /* タイトル背景カラー */
}

.my-compare-box {
  &.caption-box {
    background-color: var(--my-bgcolor);
    border: 0;
  }

  .caption-box-label {
    .body & {
      background-color: var(--my-title-bgcolor);
      color: #fff;
      font-weight: bold;
      justify-content: center;
    }
  }

  ul {
    .body & {
      padding: 0 0 0 calc(40px + 1.5em);
      position: relative;
    }

    &::before {
      background-color: var(--my-title-bgcolor);
      content: '';
      display: block;
      height: calc(100% + 2em);
      left: calc(1em - 1px);
      position: absolute;
      top: -1em;
      width: 2px;
    }
  }

  .unit {
    position: relative;

    &::before {
      background-color: var(--my-title-bgcolor);
      content: '';
      display: block;
      height: calc(1em / 2 * tan(60deg));
      left: 0.5em;
      position: absolute;
      width: 1em;
    }

    &.top::before {
      bottom: -1em;
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    &.bottom::before {
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      top: -1em;
    }
  }
}
</style>
<!-- /wp:html -->

完成イメージ

実装手順

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

さいごに

今回紹介した方法を使えば、上下の比較ができるリストボックスを簡単に作成できます。
Gutenbergエディターを活用し、CSSでスタイルを調整することで、視覚的に魅力的なデザインが実現できるでしょう。