境界線をなみなみ、ギザギザにしてみよう。直線などの区切り線もご紹介。※24/12/24 なみなみや円弧についてプラグインとCSS修正

カスタマイズ

2024.06.042024.12.24

記事内に広告が含まれています。

24/12/24

なみなみ、円弧、なみなみラインについて、MacPCのSafariや、iOS端末（iPhoneやiPadなど）で画面幅を変えた場合に表示が崩れる現象を確認した為、プラグインgrayish-cstmpat-cssをver1.1.0にバージョンアップしました。

プラグインをご利用の方は、お手数ですがGithubより最新版をダウンロードしてアップデートをお願いいたします。

追加CSSクラス名の変更はありません。プラグインのアップデートのみ、行っていただければと思います。

ただし、本記事の本文中に載せているCSSを子テーマのstyle.cssにコピペした場合はご自身でコード修正が必要となりますのでご注意ください。

本文中に載せているCSSもプラグインと同様な動作になるように合わせて修正しております。
こちらはCSSコピペのミス削減のため、メディアクエリにまたがる記述ではなく、CSSネストを使用して書いています。
CSSネストはSafari/iOSではver16.5以上対応の比較的新しい書き方のため、iOSのverを気にされる場合はプラグインを使用してください。
また、CSSネストで書いた部分は、検証ツール上で試しに変更するということが現状できませんのでご注意ください。

今回もサイト型フロントページ向けに、画像やカバーブロックで作ったセクションの境界線をアレンジする内容です。

なみなみ、ギザギザが新登場！

他に、区切り線として使える直線・なみなみ・ギザギザのパターンも用意しました。

サイトのイメージに合わせてご活用いただければと思います。

今回の記事でできること

①画面幅いっぱいに広げた画像・カバーブロックの上下を、なみなみ、ギザギザの形に切り抜くことが可能

②画像・カバーブロックの上下を直接斜めに切り抜いたり、円弧で切り抜くことが可能
※これまで紹介しているパターン＆CSSではできませんでした。

③横方向の直線などの区切り線を追加可能

【参考サイト】以下の素敵なサイトのコードを参考にさせていただきました。

CCSS Generator for Wavy Shapes & Patterns

Create CSS-only Wavy Shapes & Patterns using mask. Get an optimized & modern code in no time.

CSS Generator for Custom Borders (Zig-Zag, Wavy, and more)

Create a Zig-Zag, Scooped, Scalloped and Wavy borders using CSS. Get an optimized & modern code in n...

CSSだけで色々な形状を実現できることが分かります。こんなに色々できるんだー！と感動間違いなし！

ハート

是非一度ご覧になってみてください〜♪
気に入ったコードがあったら自分で追加CSSクラスを作って、試してみるのもGOOD！

Index

いつもの事前連絡
- CSSのプラグインや紹介済みのパターンについては、前記事をご覧ください
デモに使用する画像ブロック＆追加CSSクラスの書き方
デモに使用するカバーブロック＆追加CSSクラスの書き方
なみなみ（上・下・上下）※24/12/24 CSS修正あり
- ①画像に使う
- ②カバーブロックに使う
New Post
ギザギザ（上・下・上下）
- ①画像に使う
- ②カバーブロックに使う
New Post
円弧（上・下・上下）※24/12/24 CSS修正あり
- ①画像に使う
- ②カバーブロックに使う
New Post
斜め（上・下・上下）
- ①画像に使う
- ②カバーブロックに使う
New Post
斜め-右タイプ（上・下・上下）
- ①画像に使う
- ②カバーブロックに使う
New Post
区切り線として使用できるカバーブロックの紹介
通常の2カラムの投稿・固定ページでも使用可能です
- 区切り線パターンは追加CSSを編集すれば使用可能
- モバイル時だけ画面幅にしたいとき

いつもの事前連絡

これまでもサイト型カスタマイズの記事では同じことを何回も書いておりますが、以下についてご覧になってからお試しいただければと思います。

各形状のCSSについては、記事内にコピペ用も載せておりますが、これまで案内してきたプラグインgrayish-cstmpat-cssをこの記事の内容に合わせてバージョンアップしていますので、良かったらご利用ください。

HTML/CSSよく分からない、でも試してみたい、という初心者の方ほど、プラグインご利用がおすすめです。

プラグインgrayish-cstmpat-cssは、~~ver1.0.5以降~~が今回の記事の対応版です。
24/12/24 ver1.1.0以降を使用してください。

今回紹介するブロックも、エディタ上では表示確認ができません。
実際の表示はプレビューで確認してください。

これまでもしつこく書いておりますが、ページ設定を１カラムに設定することをお忘れなく…（この記事も1カラム（広い）にして書いています）

CSSのプラグインや紹介済みのパターンについては、前記事をご覧ください

この記事でNewPost等のデモに使用しているカバーブロックのパターンの使用方法や、CSSプラグイン（grayish-cstmpat-css）のインストール方法については前の記事を是非ご覧になってください。

Cocoonの新機能でパターンデータをシェア可能に！作例のパターンをシェア&使い方

サイト型のフロントページに使えるようなブロックの作例を前の記事でご紹介しましたが、ブロックの作成、追加CSSクラス名の入力など作業が割と多く、もっと手軽にシェアしたいと思ってました。Cocoon ver2.7.1より追加されたパターン機能で、パターンデータのエクスポート＆インポートが可能になった為、各自でインポート可能なデータを用意することにしました。これによってブロックに関しては簡単に作例と同じ構成で使用可能です。専用のCSSを追加することでデザインを再現できます。 WordPress6.5ではパターンの場所が変更になり、タイトルの変更ができなくなっていますが、コードエディターに切り替えることで変更可能です。この手順も追記しています。 ※WordPress6.6では、管理画面上にある管理メニューの中に、6.5までの「パターン一覧」があります。こちらについて追記しています。

フロントページ向けのブロックパターン詰め合わせ(デモページあり）※プラグインとPickupパターンを修正

ブログのフロントページによくあるセクション（About、Pickup、NewPost、Rankingなど）別にすぐに使えるパターンデータを用意しました。パターンと合わせて手軽にデザインを再現できるCSSプラグインも配布します。今回紹介したパターンで、デモのフロントページを作ってみたので是非ご覧になってください。パターンをペタペタと貼り付けるだけで作れます。記事内にあるご利用の注意事項をよくご確認の上、ご利用ください。

CSSプラグインのダウンロードは　Githubからどうぞ

GitHub - Na2-factory/grayish-cstmpat-css: WordPressテーマCocoonのSkin grayishのサンプルパターン用CSS

WordPressテーマCocoonのSkin grayishのサンプルパターン用CSS. Contribute to Na2-factory/grayish-cstmpat-css developm...

プラグイン（grayish-cstmpat-css）は今回の記事に対応してバージョンアップしています。
上記Githubより、最新版のv1.0.5以降を入手してご利用ください。
24/12/24 ver1.1.0以降を使用してください。

プラグインのアップデート方法は、インストール方法と同じく、「新規プラグインを追加」で行います。
すでに前のバージョンをインストールしている場合、自動的にアップデートが行われます。

※プラグインはzip形式のままインストールします。解凍しないようにご注意ください。
※削除して入れ直すという作業は不要です。

デモに使用する画像ブロック＆追加CSSクラスの書き方

画像ブロックのデモとして、以下の画面幅に広げた画像を使用します。

この画像ブロックは、デフォルトで追加CSSクラスに以下を設定しています。

画像ブロックのデフォルト追加CSSクラス

cstm-blk-fullwide cstm-blk-img-height

cstm-blk-img-heightで画像の高さが大きくなりすぎないように調整している為、必要に応じてcstm-blk-img-heightを削除してご利用ください。（cstm-blk-img-heightの詳細は過去記事のこちら）

デモ用画像ブロックは、パターンとして配布しています。
お願いご利用になる際は、必ずご自身のメデイアにある画像に置換してください。

以降の区切り線パターンのダウンロードデータに含まれています。ダウンロードはこちらから
パターン名：cstm-blk-img-sample.json

ハート

この画像の上下になみなみ・ギザギザなどを行う追加CSSクラスを設定していきます！

画像ブロックの追加CSSクラスの書き方

デフォルトのクラス名の後に半角スペースを開けて、以降で紹介している追加CSSクラス名を付け足します。

cstm-blk-fullwide cstm-blk-img-height cstm-XXX-XXX

cstm-XXX-XXX：以降で紹介している、各追加CSSクラス名

デモに使用するカバーブロック＆追加CSSクラスの書き方

カバーブロックのデモとして、前の記事で紹介済みのNewPostのパターンを使用します。

パターン名：grayish-cstm-pat-2-newpost.json

NewPostのカバーブロックは、デフォルトで追加CSSクラスに以下を設定しています。

NewPostのデフォルト追加CSSクラス

cstm-pat-2 cstm-blk-fullwide-inner

ハート

画像と同様に、カバーブロックの上下になみなみ・ギザギザなどを行う追加CSSクラスを設定していきます！

カバーブロックの追加CSSクラスの書き方

NewPostなどのカバーブロックの場合、パターンで設定してある追加CSSクラス名の後に、半角スペースを開けて以降で紹介している追加CSSクラス名を付け足します。

例）NewPostのパターン（grayish-cstm-pat-2-newpost.json）に追加する場合

cstm-pat-2 cstm-blk-fullwide-inner cstm-XXX-XXX

cstm-XXX-XXX：以降で紹介している、なみなみやギザギザの追加CSSクラス名

なみなみ（上・下・上下）※24/12/24 CSS修正あり

①画像に使う

画像の上下が、以下のように「なみなみ」で切り抜かれます。

なみなみ：上

追加CSSクラス名：cstm-wave-top

CSSを見る

.cstm-wave-top {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
        radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
    }
  }

  @media (max-width: 480px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
  }
}

子テーマのCSSの追加場所が分からない方へ

プラグイン（grayish-cstmpat-css）を使用せず、子テーマのstyle.cssに追加して使用したい場合は以下の位置に紹介しているCSSを追加してください。※事前に子テーマのstyle.cssのバックアップをお取りください。

以下には、NewPostなどのカバーブロックのCSSは含んでいません。

例）画像ブロックのCSSと、なみなみ：上のCSSを子テーマのstyle.cssに追加する場合

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 画像ブロックは以下で画面幅に */
.cstm-blk-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/*参考 画像ブロックの高さ調整 */
.cstm-blk-fullwide.cstm-blk-img-height img {
  height: 50vmin;
}

/* mask なみなみ 上 */
.cstm-wave-top {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px 100% repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
        radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
    }
  }

  @media (max-width: 480px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px 100% repeat-x;
  }
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

以降の他のCSSについても同様になります。

なみなみ：下

追加CSSクラス名：cstm-wave-bottom

CSSを見る

.cstm-wave-bottom {
  --mask:
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 0/72px 100%,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px 100% repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
        radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
    }
  }

  @media (max-width: 480px) {
    --mask:
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 0/40px 100%,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px 100% repeat-x;
  }

}

なみなみ：上下

追加CSSクラス名：cstm-wave-top-bottom

CSSを見る

.cstm-wave-top-bottom {
  --mask:
    radial-gradient(33.6px at 50% 47px, #000 99%, #0000 101%) calc(50% - 40px) 0/80px 51% repeat-x,
    radial-gradient(33.6px at 50% -27px, #0000 99%, #000 101%) 50% 20px/80px calc(51% - 20px) repeat-x,
    radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 100%/80px 51% repeat-x,
    radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px calc(51% - 20px) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);

  @media (max-width: 1023px) {
    --mask:
      radial-gradient(30.24px at 50% 42.3px, #000 99%, #0000 101%) calc(50% - 36px) 0/72px 51% repeat-x,
      radial-gradient(30.24px at 50% -24.3px, #0000 99%, #000 101%) 50% 18px/72px calc(51% - 18px) repeat-x,
      radial-gradient(30.24px at 50% calc(100% - 42.3px), #000 99%, #0000 101%) calc(50% - 36px) 100%/72px 51% repeat-x,
      radial-gradient(30.24px at 50% calc(100% + 24.3px), #0000 99%, #000 101%) 50% calc(100% - 18px)/72px calc(51% - 18px) repeat-x;

    @media (max-height: 500px) {
      --mask:
        radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
        radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
        radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
        radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
    }
  }

  @media (max-width: 480px) {
    --mask:
      radial-gradient(16.01px at 50% 22.5px, #000 99%, #0000 101%) calc(50% - 20px) 0/40px 51% repeat-x,
      radial-gradient(16.01px at 50% -12.5px, #0000 99%, #000 101%) 50% 10px/40px calc(51% - 10px) repeat-x,
      radial-gradient(16.01px at 50% calc(100% - 22.5px), #000 99%, #0000 101%) calc(50% - 20px) 100%/40px 51% repeat-x,
      radial-gradient(16.01px at 50% calc(100% + 12.5px), #0000 99%, #000 101%) 50% calc(100% - 10px)/40px calc(51% - 10px) repeat-x;
  }
}

②カバーブロックに使う

NewPostなどのカバーブロックについて、追加CSSクラスに上記画像の場合と同じクラス名を追加することで「なみなみ」の境界線にすることが可能です。

【ご注意】すでにSVGの境界線パターンや、斜めや三角などのクリップパスのパターンを前後につけている場合は、それらを削除してからお試しください。

なみなみ：上下の場合についてのデモです。※上、下のみは省略。

追加CSSクラス名：cstm-wave-top-bottom

CSSは画像ブロックの方に載せているものをご参照ください。

New Post

新着記事

①画像に使う

画像の上下が、以下のように「ギザギザ」で切り抜かれます。

ギザギザ：上

追加CSSクラス名：cstm-zig-top

CSSを見る

.cstm-zig-top {
  --mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50%/4vmin 100%;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

ギザギザ：下

追加CSSクラス名：cstm-zig-bottom

CSSを見る

.cstm-zig-bottom {
  --mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/4vmin 100%;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

ギザギザ：上下

追加CSSクラス名：cstm-zig-top-bottom

CSSを見る

.cstm-zig-top-bottom {
  --mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/4vmin 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/4vmin 51% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

②カバーブロックに使う

NewPostのカバーブロックの使用例です。

ギザギザ：上下の場合についてのデモです。※上、下のみは省略。

追加CSSクラス名：cstm-zig-top-bottom

CSSは画像ブロックの方に載せているものをご参照ください。

New Post

新着記事

円弧（上・下・上下）※24/12/24 CSS修正あり

境界線を円弧にするパターンとして以前の記事でSVGのパターンを前後に追加する方法をご紹介しました。

この方法では画像ブロックやカバーブロックを直接円弧の形にする、ということはできませんでした。

以下の追加CSSクラスを使用することで、ブロックの上下を円弧の形状に切り抜くことが可能です。
（※ただし、上下内側にカーブがくるパターンのみ）

カバーブロックの場合は、今回の例のように背景色だけでなく、任意の素材を繰り返し使用して模様付きにしていたり、背景画像を設定している場合に使用することがあるかな？と思います。

ハート

カバーブロックで背景色だけ付けている場合は、今回のCSSを新たに使用する必要はないですよー！

①画像に使う

円弧：上

追加CSSクラス名：cstm-curved-edge-top

CSSを見る

.cstm-curved-edge-top {
  --c: 78px;
  mask: radial-gradient(60% var(--c) at top, #0000 calc(100% - 1px), #000);

  @media (max-width: 1023px) {
    --c: 58px;

    @media (max-height: 500px) {
      --c: 33px;
    }
  }

  @media (max-width: 480px) {
    --c: 33px;
  }

}

円弧：下

追加CSSクラス名：cstm-curved-edge-bottom

CSSを見る

.cstm-curved-edge-bottom {
  --c: 78px;
  mask: radial-gradient(60% var(--c) at bottom, #0000 calc(100% - 2px), #000);

  @media (max-width: 1023px) {
    --c: 58px;

    @media (max-height: 500px) {
      --c: 33px;
    }
  }

  @media (max-width: 480px) {
    --c: 33px;
  }
}

円弧：上下

追加CSSクラス名：cstm-curved-edge-top-bottom

CSSを見る

.cstm-curved-edge-top-bottom {
  --c: 78px;
  mask: radial-gradient(60% var(--c) at 50% var(--c), #0000 calc(100% - 2px), #000) 0 calc(-1*var(--c));

  @media (max-width: 1023px) {
    --c: 58px;

    @media (max-height: 500px) {
      --c: 33px;
    }
  }

  @media (max-width: 480px) {
    --c: 33px;
  }
}

②カバーブロックに使う

NewPostのカバーブロックの使用例です。

円弧：上下の場合についてのデモです。※上、下のみは省略。

追加CSSクラス名：cstm-curved-edge-top-bottom

カバーブロックの場合の注意

円弧のCSSを追加する場合、カバーブロックの上下が内側に切り抜きされるため、余白が足りなくなる場合があります。
必要に応じて「NewPost」の見出しH2ブロックの上や、一番下にあるMoreの段落ブロック下にスペーサーブロックを追加してください。

※以下のデモでは上下にスペーサーブロックを追加しています。

以下のNewPostのカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。

New Post

新着記事

斜め（上・下・上下）

円弧の場合と同様に、画像とカバーブロックを直接斜めに切り抜き可能です。

①画像に使う

斜め：上

追加CSSクラス名：cstm-clip-top

CSSを見る

.cstm-clip-top {
  clip-path: polygon(0 0, 100% 7vmin, 100% 100%, 0 100%);
}

斜め：下

追加CSSクラス名：cstm-clip-bottom

CSSを見る

.cstm-clip-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vmin));
}

斜め：上下

追加CSSクラス名：cstm-clip-top-bottom

CSSを見る

.cstm-clip-top-bottom {
  clip-path: polygon(0 0, 100% 7vmin, 100% 100%, 0 calc(100% - 7vmin));
}

②カバーブロックに使う

追加CSSクラス名：cstm-clip-top-bottom

カバーブロックの場合の注意

円弧の場合と同様に、カバーブロックの上下が斜めに切り抜きされるため、余白が足りなくなる場合があります。
必要に応じて「NewPost」の見出しH2ブロックの上や、一番下にあるMoreの段落ブロック下にスペーサーブロックを追加してください。

※以下のデモでは上下にスペーサーブロックを追加しています。

以下のNewPostのカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。

New Post

新着記事

斜め-右タイプ（上・下・上下）

右方向の斜めタイプです。

①画像に使う

斜め：上

追加CSSクラス名：cstm-clip-top-r

CSSを見る

.cstm-clip-top-r {
  clip-path: polygon(0 7vmin, 100% 0, 100% 100%, 0% 100%);
}

斜め：下

追加CSSクラス名：cstm-clip-bottom-r

CSSを見る

.cstm-clip-bottom-r {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vmin), 0 100%);
}

斜め：上下

追加CSSクラス名：cstm-clip-top-bottom-r

CSSを見る

.cstm-clip-top-bottom-r {
  clip-path: polygon(0 7vmin, 100% 0, 100% calc(100% - 7vmin), 0 100%);
}

②カバーブロックに使う

追加CSSクラス名：cstm-clip-top-bottom-r

カバーブロックの場合の注意

※以下のデモでは上下にスペーサーブロックを追加しています。

以下のNewPostのカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。

New Post

新着記事

区切り線として使用できるカバーブロックの紹介

以降は、セクション間に線を引くだけのカバーブロックのご紹介です。

パターンは以下よりダウンロード可能です。是非使ってみてください。
このパターンに、画像ブロックのデモ用パターンも一緒に入っています。
（パターン名：cstm-blk-img-sample.json）

grayish_pattern_mask-main ダウンロード

ダウンロードしたパターンの使い方は過去記事参照。

今までと同様ですが念の為。
パターンだけ配置してもこの記事で紹介している見た目になりません。CSSもセットで必要です。
以降の各パターンごとのCSSを各自の子テーマのstyle.cssにコピペか、プラグインgrayish-cstmpat-cssをインストールしてご利用ください。

装飾用のため、区切り線カバーブロック内に文章を書いたりすることはしないでください。

線の色変更はカバーブロックのオーバーレイの色変更で可能です。

シンプルな直線

横方向の直線です。

当サイトのフロントページでも、使用しています。（※実装方法は異なります）

パターン名：cstm-simple-line.json

追加CSSクラス名：cstm-simple-line

CSSを見る

.cstm-simple-line {
  height: 1px;
  padding: 0;
  min-height: 0 !important;
}

線の色は、カバーブロックのオーバーレイでお好みの色に変更可能です。

以下に、カラー変更例を載せます。※カラーの名前はgrayishのカラーパレットにある物です。

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

なみなみの区切り線 ※24/12/24 CSS修正あり

なみなみの区切り線です。

パターン名：cstm-wave-line.json

追加CSSクラス名：cstm-wave-line

CSSを見る

/* なみなみライン */
.cstm-wave-line {
  --s: 30px;
  /* size of the wave */
  --b: 1px;
  /* thickness of the line */
  --m: 0.8;
  /* curvature of the wave [0 2] */

  --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
  height: calc(2*var(--R));
  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)), var(--_g)) 50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
  padding: 0;
  min-height: 0 !important;

  /* CSSネスト */
  @media (max-width: 1023px) {
    --s: 24px;

    @media (max-height: 500px) {
      --s: 14px;
    }
  }

  @media (max-width: 480px) {
    --s: 14px;
  }

}

線の色は、直線と同様に、カバーブロックのオーバーレイでお好みの色に変更可能です。

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

ギザギザの区切り線

ギザギザの区切り線です。

パターン名：cstm-zig-zag-line.json

追加CSSクラス名：cstm-zig-zag-line

CSSを見る

.cstm-zig-zag-line {
  --a: 90deg;
  /* control the angle */
  --s: 4vmin;
  /* size of the zig-zag */
  --b: 2px;
  /* control the thickness */

  height: calc(var(--b) + var(--s)/(2*tan(var(--a)/2)));
  --_g: var(--s) repeat-x conic-gradient(from calc(var(--a)/-2) at bottom,
      #0000, #000 1deg calc(var(--a) - 1deg), #0000 var(--a));
  mask: 50% calc(-1*var(--b))/var(--_g) exclude, 50%/var(--_g);
  padding: 0;
  min-height: 0 !important;
}

線の色は、直線と同様に、カバーブロックのオーバーレイでお好みの色に変更可能です。

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

通常の2カラムの投稿・固定ページでも使用可能です

なみなみ・ギザギザ・円弧・斜めのCSSは、通常の投稿の画像ブロックやカバーブロックの追加CSSクラスにも使用可能ですので、よかったらお試しください。

以下は画像ブロックの追加CSSクラスに円弧上のcstm-curved-edge-topを入力した例です。

以下は通常のカバーブロックの追加CSSクラスになみなみ上下のcstm-wave-top-bottomを入力した例です。

通常のカバーブロック
（背景画像を設定）

セクション間に少し変わった変化があると、閲覧者の方にも「おっ？」と思っていただけるかもしれませんね！

区切り線パターンは追加CSSを編集すれば使用可能

直線やなみなみ・ギザギザの区切り線パターンを使用する際は以下の注意事項をご覧になってからお試しください。

【ご注意ください】
区切り線パターンを通常の投稿や固定ページで利用の際は、追加CSSクラスからcstm-blk-fullwideを削除してください。
cstm-blk-fullwideは画面幅いっぱいに広げるCSSなので、これが含まれたままだとおかしな表示になってしまいます。

モバイル時だけ画面幅にしたいとき

通常の2カラムの投稿・固定ページに画像ブロックやカバーブロックを配置した場合、画面幅1023px以下のモバイル時に、左右に余白がつくと思います。

画面幅1023px以下で画像・カバーブロックを画面幅に広げて表示したい場合は、各ブロックの追加CSSクラスに以下を入力します。（※プラグインをインストールしている場合）

画像ブロック・区切り線パターンの追加CSSクラス名：cstm-blk-fullwide-mbonly

カバーブロックの追加CSSクラス名：cstm-blk-fullwide-inner-mbonly

通常のカバーブロック
（背景画像を設定）

子テーマのstyle.cssに追加する場合

プラグイン（grayish-cstmpat-css）を使用せず、モバイル時だけ画面幅にするCSSを子テーマのstyle.cssに追加する場合は以下の位置に紹介しているCSSを追加してください。
※事前に子テーマのstyle.cssのバックアップをお取りください。

全角スペースを入れてしまったり、プロパティ値の最後にセミコロンが無かったり、括弧の数があっていない等のミスをしないようにご注意ください。

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

  /* モバイル時のみ　画像ブロックなど画面幅 */
  .cstm-blk-fullwide-mbonly {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }

  .cstm-blk-fullwide-inner-mbonly {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
  }
	
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

今回は以上です。

いつもの事前連絡

CSSのプラグインや紹介済みのパターンについては、前記事をご覧ください

デモに使用する画像ブロック＆追加CSSクラスの書き方

デモに使用するカバーブロック＆追加CSSクラスの書き方

なみなみ（上・下・上下）※24/12/24 CSS修正あり

①画像に使う

なみなみ：上

なみなみ：下

なみなみ：上下

②カバーブロックに使う

New Post

ギザギザ（上・下・上下）

①画像に使う

ギザギザ：上

ギザギザ：下

ギザギザ：上下

②カバーブロックに使う

New Post

円弧（上・下・上下）※24/12/24 CSS修正あり

①画像に使う

円弧：上

円弧：下

円弧：上下

②カバーブロックに使う

New Post

斜め（上・下・上下）

①画像に使う

斜め：上

斜め：下

斜め：上下

②カバーブロックに使う

New Post

斜め-右タイプ（上・下・上下）

①画像に使う

斜め：上

斜め：下

斜め：上下

②カバーブロックに使う

New Post

区切り線として使用できるカバーブロックの紹介

シンプルな直線

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

なみなみの区切り線 ※24/12/24 CSS修正あり

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

ギザギザの区切り線

オーバーレイでシェイドブルーS50を設定

オーバーレイでRedT50を設定

オーバーレイでライトブルーT0を設定

通常の2カラムの投稿・固定ページでも使用可能です

区切り線パターンは追加CSSを編集すれば使用可能

モバイル時だけ画面幅にしたいとき