kazu-designkazu-design

境界線デザイン工房（WordPress用・動く波と斜めの区切りのコードを作る）

  • ダウンロード商品
    ¥ 1,980

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

「ギフトとして贈る」とは

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