斜め背景工房v1.0.1
全幅のグループの背景を、色の境目が斜めに横切る2色にする道具です。工房が出すのは数行の CSS。グループブロックの「追加CSS」の欄に貼るだけで、見出しや文章はいつものブロックのまま上に置けます。
体験版設定をさわると、見本がその場で変わります。コードの表示とコピーは製品版でできます。別の画面で開く
体験版は、パソコンで開くと設定と見本を並べてさわれます。スマホでも開けます（設定が上、見本が下に並びます）。
体験版を開く決めてある所
同じ角度のまま
傾きは1〜12度。画面の幅に関係なく、決めた角度のまま出ます。
境目の高さを選べる
境目が左右の中央でどの高さを通るかを、25〜75%で決められます。
上下のグループとつなぐ
上と下のグループの色をそろえる CSS も出ます。つなぎ目が消えて、1枚の景色になります。
プリセットから始める
「やさしい斜め」「標準」「大胆」「紺×白」の4つ。押したあとで1つずつ直せます。
CSS だけの作り
JavaScript を使いません。見本も、実際に貼る CSS で描いています。
スマホの見え方も確かめられる
見本の「スマホ」を押すと、幅の狭い画面での傾き方を確かめられます。
使う手順は3つ
- 色と傾きを決める（迷ったらプリセットから）
- 「斜めのCSSをコピー」を押す
- グループブロックの「追加CSS」の欄に貼る
こんな方に向いています
- トップページや LP の区切りに、動きのある背景を入れたい方
- 画像を作らずに、セクションの切り替わりを見せたい方
- いつものブロックの並びを崩さずに、背景だけを変えたい方
貼る場所と動作環境
| 貼る場所 | AFFINGER のグループブロックの「追加CSS」の欄（「ワイドにする」をオン） |
|---|---|
| 確認したテーマ | AFFINGER |
| 工房を開く環境 | パソコンのブラウザ（Google Chrome の最新版で確認） |
| 中身 | ZIP（工房の HTML 1枚と使い方ガイド）。インストールは要りません |
※ 貼る欄は AFFINGER のグループブロックにある欄です。WordPress の標準テーマ（Twenty Twenty-Five）のグループブロックには、この欄がありません。
使える範囲
購入した方ご本人が運営するサイトなら、数の制限なく使えます。
お客様のサイトを制作するときに使うこともできます。
※ 工房の HTML や ZIP そのものをほかの方へ渡すこと、再配布・転売はできません。
返品について
ダウンロード商品のため、購入後のお客様都合による返品・返金はお受けしていません。
※ 動かない・表示が崩れるなどの不具合は、修正版をお届けして対応します。
よくある質問
- 体験版と製品版の違いは
- 設定と見本は同じです。製品版だけ、作ったものを貼る CSS を表示・コピーできます。
- 背景が出ません
- 貼った欄が「追加CSS」かを確かめてください。すぐ上にある「追加CSSクラス」の欄は、クラス名だけを書く欄です。
- 作った設定は残りますか
- 同じブラウザで開き直すと、前回の設定とマイパレットが残っています。
4本まとめて 7,980円
1本ずつ買うより 1,940円 安くなります。
- 追従バナー工房（3,980円）
- 発光ドット工房（2,980円）
- 境界線デザイン工房（1,980円）
- 斜め背景工房（980円）
AFFINGER を当サイトから購入した方は、購入特典としてこの工房を使えます。受け取りの条件は特典ページで確かめてください。