今回もサイト型フロントページ向けに、画像やカバーブロックで作ったセクションの境界線をアレンジする内容です。
なみなみ、ギザギザが新登場！
他に、区切り線として使える直線・なみなみ・ギザギザのパターンも用意しました。
サイトのイメージに合わせてご活用いただければと思います。
①画面幅いっぱいに広げた画像・カバーブロックの上下を、なみなみ、ギザギザの形に切り抜くことが可能
②画像・カバーブロックの上下を直接斜めに切り抜いたり、円弧で切り抜くことが可能
※これまで紹介しているパターン＆CSSではできませんでした。
③横方向の直線などの区切り線を追加可能
【参考サイト】以下の素敵なサイトのコードを参考にさせていただきました。
CSSだけで色々な形状を実現できることが分かります。こんなに色々できるんだー！と感動間違いなし！
是非一度ご覧になってみてください〜♪
気に入ったコードがあったら自分で追加CSSクラスを作って、試してみるのもGOOD！
いつもの事前連絡
これまでもサイト型カスタマイズの記事では同じことを何回も書いておりますが、以下についてご覧になってからお試しいただければと思います。
各形状のCSSについては、記事内にコピペ用も載せておりますが、これまで案内してきたプラグインgrayish-cstmpat-cssをこの記事の内容に合わせてバージョンアップしていますので、良かったらご利用ください。
HTML/CSSよく分からない、でも試してみたい、という初心者の方ほど、プラグインご利用がおすすめです。
プラグインgrayish-cstmpat-cssは、ver1.0.5以降が今回の記事の対応版です。
今回紹介するブロックも、エディタ上では表示確認ができません。
実際の表示はプレビューで確認してください。
これまでもしつこく書いておりますが、ページ設定を１カラムに設定することをお忘れなく…（この記事も1カラム（広い）にして書いています）
CSSのプラグインや紹介済みのパターンについては、前記事をご覧ください
この記事でNewPost等のデモに使用しているカバーブロックのパターンの使用方法や、CSSプラグイン（grayish-cstmpat-css）のインストール方法については前の記事を是非ご覧になってください。
プラグインのアップデート方法は、インストール方法と同じく、「新規プラグインを追加」で行います。
すでに前のバージョンをインストールしている場合、自動的にアップデートが行われます。
※プラグインはzip形式のままインストールします。解凍しないようにご注意ください。
※削除して入れ直すという作業は不要です。
デモに使用する画像ブロック＆追加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クラス名を付け足します。
cstm-blk-fullwide cstm-blk-img-height cstm-XXX-XXX
cstm-XXX-XXX：以降で紹介している、各追加CSSクラス名
デモに使用するカバーブロック＆追加CSSクラスの書き方
カバーブロックのデモとして、前の記事で紹介済みのNewPostのパターンを使用します。
パターン名：grayish-cstm-pat-2-newpost.json
NewPostのカバーブロックは、デフォルトで追加CSSクラスに以下を設定しています。
cstm-pat-2 cstm-blk-fullwide-inner
画像と同様に、カバーブロックの上下になみなみ・ギザギザなどを行う追加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クラス名
なみなみ（上・下・上下）
①画像に使う
画像の上下が、以下のように「なみなみ」で切り抜かれます。
なみなみ：上
追加CSSクラス名：cstm-wave-top
.cstm-wave-top {
--mask:
radial-gradient(3.05vmin at 50% 4.3vmin, #000 99%, #0000 101%) calc(50% - 4vmin) 0/8vmin 100%,
radial-gradient(3.05vmin at 50% -2.3vmin, #0000 99%, #000 101%) 50% 2vmin/8vmin 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
プラグイン（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(3.05vmin at 50% 4.3vmin, #000 99%, #0000 101%) calc(50% - 4vmin) 0/8vmin 100%,
radial-gradient(3.05vmin at 50% -2.3vmin, #0000 99%, #000 101%) 50% 2vmin/8vmin 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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
.cstm-wave-bottom {
--mask:
radial-gradient(3.05vmin at 50% calc(100% - 4.3vmin), #000 99%, #0000 101%) calc(50% - 4vmin) 0/8vmin 100%,
radial-gradient(3.05vmin at 50% calc(100% + 2.3vmin), #0000 99%, #000 101%) 50% calc(100% - 2vmin)/8vmin 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
なみなみ：上下
追加CSSクラス名：cstm-wave-top-bottom
.cstm-wave-top-bottom {
--mask:
radial-gradient(3.05vmin at 50% 4.3vmin, #000 99%, #0000 101%) calc(50% - 4vmin) 0/8vmin 51% repeat-x,
radial-gradient(3.05vmin at 50% -2.3vmin, #0000 99%, #000 101%) 50% 2vmin/8vmin calc(51% - 2vmin) repeat-x,
radial-gradient(3.05vmin at 50% calc(100% - 4.3vmin), #000 99%, #0000 101%) calc(50% - 4vmin) 100%/8vmin 51% repeat-x,
radial-gradient(3.05vmin at 50% calc(100% + 2.3vmin), #0000 99%, #000 101%) 50% calc(100% - 2vmin)/8vmin calc(51% - 2vmin) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
②カバーブロックに使う
NewPostなどのカバーブロックについて、追加CSSクラスに上記画像の場合と同じクラス名を追加することで「なみなみ」の境界線にすることが可能です。
【ご注意】すでにSVGの境界線パターンや、斜めや三角などのクリップパスのパターンを前後につけている場合は、それらを削除してからお試しください。
なみなみ：上下の場合についてのデモです。※上、下のみは省略。
追加CSSクラス名：cstm-wave-top-bottom
ギザギザ（上・下・上下）
①画像に使う
画像の上下が、以下のように「ギザギザ」で切り抜かれます。
ギザギザ：上
追加CSSクラス名：cstm-zig-top
.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
.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
.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
円弧（上・下・上下）
境界線を円弧にするパターンとして以前の記事でSVGのパターンを前後に追加する方法をご紹介しました。
この方法では画像ブロックやカバーブロックを直接円弧の形にする、ということはできませんでした。
以下の追加CSSクラスを使用することで、ブロックの上下を円弧の形状に切り抜くことが可能です。
（※ただし、上下内側にカーブがくるパターンのみ）
カバーブロックの場合は、今回の例のように背景色だけでなく、任意の素材を繰り返し使用して模様付きにしていたり、背景画像を設定している場合に使用することがあるかな？と思います。
カバーブロックで背景色だけ付けている場合は、今回のCSSを新たに使用する必要はないですよー！
①画像に使う
円弧：上
追加CSSクラス名：cstm-curved-edge-top
.cstm-curved-edge-top {
--c: 7vmin;
mask: radial-gradient(60% var(--c) at top, #0000 calc(100% - 1px), #000);
}円弧：下
追加CSSクラス名：cstm-curved-edge-bottom
.cstm-curved-edge-bottom {
--c: 7vmin;
mask: radial-gradient(60% var(--c) at bottom, #0000 calc(100% - 2px), #000);
}円弧：上下
追加CSSクラス名：cstm-curved-edge-top-bottom
.cstm-curved-edge-top-bottom {
--c: 7vmin;
mask: radial-gradient(60% var(--c) at 50% var(--c), #0000 calc(100% - 2px), #000) 0 calc(-1*var(--c));
}②カバーブロックに使う
NewPostのカバーブロックの使用例です。
円弧：上下の場合についてのデモです。※上、下のみは省略。
追加CSSクラス名：cstm-curved-edge-top-bottom
円弧のCSSを追加する場合、カバーブロックの上下が内側に切り抜きされるため、余白が足りなくなる場合があります。
必要に応じて「NewPost」の見出しH2ブロックの上や、一番下にあるMoreの段落ブロック下にスペーサーブロックを追加してください。
※以下のデモでは上下にスペーサーブロックを追加しています。
以下のNewPostのカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。
斜め（上・下・上下）
円弧の場合と同様に、画像とカバーブロックを直接斜めに切り抜き可能です。
①画像に使う
斜め：上
追加CSSクラス名：cstm-clip-top
.cstm-clip-top {
clip-path: polygon(0 0, 100% 7vmin, 100% 100%, 0 100%);
}斜め：下
追加CSSクラス名：cstm-clip-bottom
.cstm-clip-bottom {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 7vmin));
}斜め：上下
追加CSSクラス名：cstm-clip-top-bottom
.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のカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。
斜め-右タイプ（上・下・上下）
右方向の斜めタイプです。
①画像に使う
斜め：上
追加CSSクラス名：cstm-clip-top-r
.cstm-clip-top-r {
clip-path: polygon(0 7vmin, 100% 0, 100% 100%, 0% 100%);
}斜め：下
追加CSSクラス名：cstm-clip-bottom-r
.cstm-clip-bottom-r {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7vmin), 0 100%);
}斜め：上下
追加CSSクラス名：cstm-clip-top-bottom-r
.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」の見出しH2ブロックの上や、一番下にあるMoreの段落ブロック下にスペーサーブロックを追加してください。
※以下のデモでは上下にスペーサーブロックを追加しています。
以下のNewPostのカバーブロックは、素材サイトからダウンロードしてきた模様のパターンを繰り返し背景として設定しています。
区切り線として使用できるカバーブロックの紹介
以降は、セクション間に線を引くだけのカバーブロックのご紹介です。
パターンは以下よりダウンロード可能です。是非使ってみてください。
このパターンに、画像ブロックのデモ用パターンも一緒に入っています。
（パターン名：cstm-blk-img-sample.json）
ダウンロードしたパターンの使い方は過去記事参照。
今までと同様ですが念の為。
パターンだけ配置してもこの記事で紹介している見た目になりません。CSSもセットで必要です。
以降の各パターンごとのCSSを各自の子テーマのstyle.cssにコピペか、プラグインgrayish-cstmpat-cssをインストールしてご利用ください。
装飾用のため、区切り線カバーブロック内に文章を書いたりすることはしないでください。
線の色変更はカバーブロックのオーバーレイの色変更で可能です。
シンプルな直線
横方向の直線です。
当サイトのフロントページでも、使用しています。（※実装方法は異なります）
パターン名：cstm-simple-line.json
追加CSSクラス名：cstm-simple-line
.cstm-simple-line {
height: 1px;
padding: 0;
min-height: 0 !important;
}線の色は、カバーブロックのオーバーレイでお好みの色に変更可能です。
以下に、カラー変更例を載せます。※カラーの名前はgrayishのカラーパレットにある物です。
オーバーレイでシェイドブルーS50を設定
オーバーレイでRedT50を設定
オーバーレイでライトブルーT0を設定
なみなみの区切り線
なみなみの区切り線です。
パターン名：cstm-wave-line.json
追加CSSクラス名：cstm-wave-line
.cstm-wave-line {
--s: 3vmin;
/* 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;
}線の色は、直線と同様に、カバーブロックのオーバーレイでお好みの色に変更可能です。
オーバーレイでシェイドブルーS50を設定
オーバーレイでRedT50を設定
オーバーレイでライトブルーT0を設定
ギザギザの区切り線
ギザギザの区切り線です。
パターン名：cstm-zig-zag-line.json
追加CSSクラス名：cstm-zig-zag-line
.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
通常のカバーブロック
（背景画像を設定）
プラグイン（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){
/*必要ならばここにコードを書く*/
}
今回は以上です。
