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

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

<!-- 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><!-- 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>
:root {
  --my-my-bgcolor: #fff6f2;       /* 背景カラー */
  --my-title-bgcolor: #ffa883;    /* タイトル背景カラー */
}

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

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

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

.body .my-compare-box ul {
  padding: 0 0 0 calc(40px + 1.5em);
  position: relative;
}

.my-compare-box .unit {
  position: relative;
}

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

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

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

はじめに

以下の内容をブロックを使って実現します。

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

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

ponhiro.com

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

完成イメージ

実装手順

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

さいごに

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