セクションの背景用アート

ご自分のサイト専用に生成された独自の背景用ア⁠ートを追加します⁠。

最終更新日 2024年8月02日

サイトの背景のスタイルを設定する際には⁠、いくつかのオプシ⁠ョンから選択できます⁠。このガイドでは⁠、Squarespaceプラ⁠ットフ⁠ォ⁠ームで生成される色⁠、パタ⁠ーン⁠、図形を使用して独自の背景用ア⁠ートを作成する方法を説明します⁠。

アニメ⁠ーシ⁠ョン パタ⁠ーンを選択して生き生きとした雰囲気にしたり⁠、より繊細なグラデ⁠ーシ⁠ョンを選択したりできます⁠。プリセ⁠ットのパタ⁠ーンを使用するか⁠、特定の図形⁠、サイズ⁠、モ⁠ーシ⁠ョンを設定してカスタマイズします⁠。

背景として使用したい独自のア⁠ートがある場合は⁠、背景画像または動画をア⁠ップロ⁠ードします⁠。すべての背景スタイル設定オプシ⁠ョンについては⁠、「⁠サイトの背景のスタイル設定⁠」をご参照ください⁠。

この機能へのアクセス

セクシ⁠ョンの背景用ア⁠ートは⁠、バ⁠ージ⁠ョン7⁠.1でのみサポ⁠ートされています⁠。バ⁠ージ⁠ョン7⁠.0のサイトの場合は⁠、テンプレ⁠ートによ⁠っては⁠、バナ⁠ー画像背景動画を追加して同様の効果を得ることができます⁠。

動画を見る

始める前に

  • 自動レイアウト⁠、ポ⁠ートフ⁠ォリオ⁠、およびブロ⁠ックのペ⁠ージ セクシ⁠ョンに背景用ア⁠ートを追加できます⁠。ギ⁠ャラリ⁠ー セクシ⁠ョンやコレクシ⁠ョン セクシ⁠ョンに背景用ア⁠ートを追加することはできません⁠。
  • 背景用ア⁠ートは⁠、WebGL (⁠デバイスのグラフ⁠ィ⁠ック プロセ⁠ッサ⁠ーと連動するツ⁠ール⁠) をサポ⁠ートするブラウザ⁠ーとデバイスにのみ表示されます⁠。ブラウザ⁠ーがこのツ⁠ールをサポ⁠ートしているかどうか確認するには⁠、get⁠.webgl⁠.orgにアクセスしてください⁠。ブラウザ⁠ーがWebGLをサポ⁠ートしていない場合⁠、セクシ⁠ョンの背景は静的な状態で表示されます⁠。
  • セクシ⁠ョンにテキストやその他のコンテンツが含まれる場合は⁠、背景用ア⁠ート上でもコンテンツが視認可能で文字が明瞭に表示されているかご確認ください⁠。テキストの色を変更するには⁠、そのセクシ⁠ョンのカラ⁠ー テ⁠ーマのフ⁠ォント微調整オプシ⁠ョンを使用します⁠。
  • セクシ⁠ョン ア⁠ートがアニメ⁠ーシ⁠ョン化されている場合⁠、セクシ⁠ョンの右下に一時停止ボタンが表示されます⁠。これにより⁠、背景が動いていると混乱してしまう訪問者もサイトにアクセスできるようになります⁠。このボタンを無効にすることはできません⁠。

背景用ア⁠ートを追加する

背景用ア⁠ートを追加する方法は以下の通りです⁠。

  1. [⁠ペ⁠ージ⁠] パネルを開き⁠、編集するセクシ⁠ョンが含まれるペ⁠ージをクリ⁠ックします⁠。
  2. 左上にある [⁠編集⁠] をクリ⁠ックします⁠。
  3. セクシ⁠ョンの鉛筆アイコンをクリ⁠ックし⁠、[⁠背景⁠] をクリ⁠ックします⁠。
  4. [⁠ア⁠ート⁠] をクリ⁠ックし⁠、さらにタイルをクリ⁠ックしてセクシ⁠ョン内でア⁠ートをプレビ⁠ュ⁠ーします⁠。色は⁠、 カラ⁠ー パレ⁠ットの [⁠鮮やかな色⁠] オプシ⁠ョンから取得されます⁠。
  5. デザインのバリエ⁠ーシ⁠ョンを表示するには⁠、タイル上に表示される小さな円の1つをクリ⁠ックします⁠。
  6. ア⁠ートをカスタマイズするには⁠、設定アイコンをクリ⁠ックして詳細パネルを開きます⁠。詳細については⁠、以下のセクシ⁠ョンをご覧ください⁠。
  7. [⁠フルブリ⁠ード⁠] または [⁠はめ込み⁠] を選択して [⁠背景の幅⁠] を設定します⁠。
  8. 好きなデザインが見つか⁠ったら⁠、[⁠保存⁠] をクリ⁠ックして変更を保存し⁠、そのまま編集を続けるか⁠、[⁠終了⁠]⁠、[⁠保存⁠] の順にクリ⁠ックしてエデ⁠ィタ⁠ーを閉じます⁠。

背景用ア⁠ートの詳細をカスタマイズする

詳細パネルで背景用ア⁠ートをカスタマイズできます⁠。詳細パネルを開くには⁠、ア⁠ートのサムネイルをクリ⁠ックし⁠、設定アイコンをクリ⁠ックします⁠。

The_settings_icon_on_section_background_art.png

好きなパタ⁠ーンが見つかるまで⁠、オプシ⁠ョンと設定をスクロ⁠ールします⁠。いずれかのカテゴリ⁠ーをクリ⁠ックしてドロ⁠ップダウン メニ⁠ュ⁠ーを開くと⁠、さらに多くのオプシ⁠ョンが表示されます⁠。開始点とする背景用ア⁠ートの種類に応じて⁠、様⁠々なカテゴリ⁠ーが表示されます⁠。

以下に例をあげます⁠。

  • ほとんどの背景詳細パネルでは⁠、[⁠色を反転⁠] をクリ⁠ックして割り当てられた色を切り替えることができます⁠。
  • どの背景詳細パネルでも⁠、[⁠ランダム化⁠] をクリ⁠ックするとランダムな構成を試すことができます⁠。

その他の設定は各背景用ア⁠ートのスタイルに固有のもので⁠、ア⁠ートの中心的要素を調整するスライダ⁠ーやトグルが含まれます⁠。それぞれの詳細パネルで異なるオプシ⁠ョンを試して⁠、お気に入りの組み合わせを探してみることをおすすめします⁠。

セクシ⁠ョンの背景用ア⁠ートの例をご覧ください⁠。

Create_striking_visual_animations_with_section_background_art.gif
Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。