SWELL風の波境界線を追加する方法

はじめに

フルワイドブロックを使う際、SWELL風の「波」デザインのような上下の境界線を追加したい場面はよくあります。

以下の記事では、「カバー」ブロックを使って上下の境界線を「波」デザインにする方法を紹介しています。

サイト型のフロントページ向け：滑らかな曲線の境界線ブロックをつくる（円弧・波）※カバーブロック利用で簡単に使えるように改良！

１カラムのサイト型フロントページなので装飾として使える、滑らかな曲線のブロックを紹介します。セクションの境界を円弧や波の形で表示することができます。カバーブロック利用で簡単に使用可能に改良しました。grayishに限らず、Cocoonのスキ...

cocoon-grayish.na2-factory.com

そこで今回は、「カバー」ブロックではなく「カラム」ブロックを使用し、同様の境界線デザインを実現します。

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

ダウンロード

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

<!-- wp:columns {"className":"wide","textColor":"key-color"} -->
<div class="wp-block-columns wide has-key-color-color has-text-color"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<div class="up-wave">
<svg viewBox="0 0 2000 100" preserveAspectRatio="none">
  <path d="M500.625 0C247.562 1.59193e-09 142.869 32.1725 0 48.2587V100H2000V3.48259C1869.47 18.0763 1755.94 49.2537 1500.38 49.2537C1234.81 49.2537 753.688 1.59275e-09 500.625 0Z" />
</svg>
</div>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"wide","backgroundColor":"key-color"} -->
<div class="wp-block-columns wide has-key-color-background-color has-background"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|cocoon-white"}}}},"textColor":"cocoon-white"} -->
<p class="has-cocoon-white-color has-text-color has-link-color">コンテンツ</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"wide","textColor":"key-color"} -->
<div class="wp-block-columns wide has-key-color-color has-text-color"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<div class="low-wave">
<svg viewBox="0 0 2000 100" preserveAspectRatio="none">
  <path d="M1499.37 100C1752.44 100 1857.13 67.8275 2000 51.7413V0H-0.00012207V96.5174C130.533 81.9237 244.061 50.7463 499.625 50.7463C765.191 50.7463 1246.31 100 1499.37 100Z" />
</svg>
</svg>
</div>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:html -->
<style data-wp-block-html="css">
.body {
  .wide {
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);

    /* 境界線は余白なし */
    &:has(.up-wave, .low-wave) {
      padding: 0;
    }

    /* 境界線上の余白を除去 */
    &:has(.up-wave) + .wide {
      margin-top: -1px;
    }
  }
}

/* 境界線 */
[class*="wave"] {
  svg {
    display: block;
    fill: currentColor;
    height: 5vmin;
    width: 100%;
  }
}
</style>
<!-- /wp:html -->

完成イメージ