境界線デザイン工房v1.6.1
セクションの境目を、動く波・斜めの線・下へ差し込む三角にする道具です。できあがったコードは、2つのグループの間のカスタムHTMLブロックに貼るだけです。サイドバーのないページでは画面の端から端まで、サイドバーのあるページでは記事の幅にぴったり収まります。
体験版は、パソコンで開くと設定と見本を並べてさわれます。スマホでも開けます（設定が上、見本が下に並びます）。
体験版を開く決めてある所
形は3つ
動く波、斜めの線、下のセクションへ差し込む吹き出しの三角。上と下の背景色を決めるだけで、色の切り替わりに境目ができます。
ページの形に合わせる
サイドバーのない1列のページでは、記事の幅で止まらず画面の端から端まで広がります（ページが横に揺れることもありません）。サイドバーのある2列のページでは、記事の幅に収めてサイドバーに重ねません。
波は3枚まで重ねられる
2枚目と3枚目は、色と横のずれを1枚ずつ決められます。山と谷を反転することもできます。
スマホで波をつぶさない
スマホでは波の数を減らして、波1つの幅がパソコンと同じに見えるようにしています。
動きを選べる
左へ・右へ・止める、の3つから選び、速さも決められます。端末で「動きを減らす」設定をしている人には止めて見せることもできます。
前後のグループにつなぐ
テーマが入れるブロックの間のすき間を消して、上と下のグループに境目をぴったり付けます。下が写真や模様の背景なら「透明（写真用）」を選びます。
使う手順は3つ
- 形を選び、上と下の背景色を決める
- 右の見本で、高さと動きを確かめる
- 「コードをコピー」して、2つのグループの間のカスタムHTMLブロックに貼る
こんな方に向いています
- セクションの区切りを、まっすぐな線よりやわらかく見せたい方
- LP やトップページの、背景の色が切り替わる所に動きを入れたい方
- 画像を作らずに、波や三角の区切りを入れたい方
貼る場所と動作環境
| 貼る場所 | WordPress の記事や固定ページのカスタムHTMLブロック。2つのグループの間に置きます |
|---|---|
| 確認したテーマ | AFFINGER・WordPress の標準テーマ（Twenty Twenty-Five） |
| 工房を開く環境 | パソコンのブラウザ（Google Chrome の最新版で確認） |
| 中身 | ZIP（工房の HTML 1枚と使い方ガイド）。インストールは要りません |
※ 工房は HTML 1枚で動き、外のサーバーへ何も送りません。できあがるコードは SVG と CSS だけで、JavaScript を使いません。
使える範囲
購入した方ご本人が運営するサイトなら、数の制限なく使えます。
お客様のサイトを制作するときに使うこともできます。
※ 工房の HTML や ZIP そのものをほかの方へ渡すこと、再配布・転売はできません。
返品について
ダウンロード商品のため、購入後のお客様都合による返品・返金はお受けしていません。
※ 動かない・表示が崩れるなどの不具合は、修正版をお届けして対応します。
よくある質問
- 体験版と製品版の違いは
- 設定と見本は同じです。製品版だけ、作ったものを貼るコードを表示・コピーできます。
- 境目の上や下にすき間が出ます
- 「前後のグループへ接続」で、上と下のすき間を消せます。消す大きさは、テーマが入れているすき間に合わせて決めます。
- 斜め背景工房との違いは
- 境界線デザイン工房は、2つのグループの間に置く区切りの部品です。斜め背景工房は、グループの背景そのものを斜めの2色にします。AFFINGER 以外のテーマで使えるのは、境界線デザイン工房です。
4本まとめて 7,980円
1本ずつ買うより 1,940円 安くなります。
- 追従バナー工房（3,980円）
- 発光ドット工房（2,980円）
- 境界線デザイン工房（1,980円）
- 斜め背景工房（980円）
AFFINGER を当サイトから購入した方は、購入特典としてこの工房を使えます。受け取りの条件は特典ページで確かめてください。