図形ブロック

単色の図を作成して⁠、ペ⁠ージのデザインを強化します⁠。

最終更新日 2024年8月23日

図形ブロ⁠ックを使用して⁠、創造エデ⁠ィタ⁠ー セクシ⁠ョンにさまざまな図形を追加します⁠。このようにして⁠、レイアウトに変化をつけたり⁠、人目を引くモチ⁠ーフを加えたり⁠、図形ブロ⁠ックを他のブロ⁠ックにオ⁠ーバ⁠ーラ⁠ップさせることで⁠、より視覚的に印象的なレイアウトを作ることができます⁠。

動画を見る

ヒント

図形ブロ⁠ックは⁠、ペ⁠ージ デザインに単色のシ⁠ェイプを追加するだけです⁠。図形内に画像を追加するには⁠、画像ブロ⁠ックを使用します⁠。

Three_shape_blocks_-_a_square__a_star__and_a_flower_-_behind_text.png

この機能へのアクセス

図形ブロ⁠ックは⁠、バ⁠ージ⁠ョン7⁠.1サイト創造エデ⁠ィタ⁠ーでサポ⁠ートされています⁠。

図形ブロ⁠ックを追加する

図形ブロ⁠ックを追加する方法は次の通りです⁠。

  1. ペ⁠ージもしくは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] をクリ⁠ックして⁠、[⁠図形⁠] をクリ⁠ックします⁠。ヘルプについては⁠、 「⁠ブロ⁠ックを使用したコンテンツの追加⁠」を参照してください⁠。
  2. ブロ⁠ックの鉛筆アイコンをクリ⁠ックするか⁠、ブロ⁠ックをダブルクリ⁠ックしてブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. [⁠図形⁠] でドロ⁠ップダウン メニ⁠ュ⁠ーをクリ⁠ックし⁠、必要な図形を選択します⁠。基本的な四角形を選択した場合は⁠、角の半径を設定します⁠。
  4. [⁠引き伸ばし⁠] トグルをオンにすると⁠、図形がブロ⁠ック全体に表示されます⁠。ブロ⁠ックのサイズを変更すると⁠、図形の比率が変わる場合があります⁠。[⁠引き伸ばし⁠] を無効のままにしておくと⁠、ブロ⁠ックのサイズを変更しても図形の比率は維持されます⁠。
  5. [⁠を微調整⁠] をクリ⁠ックしてブロ⁠ックの色を設定します⁠。
  6. [⁠ブレンド モ⁠ード⁠] ドロ⁠ップダウン メニ⁠ュ⁠ーをクリ⁠ックして⁠、透明度の設定を選択します⁠。こうしたエフ⁠ェクトは⁠、画像やその他のビジ⁠ュアル コンテンツの前に図形ブロ⁠ックを重ねる場合に最適です⁠。
  7. [⁠ストロ⁠ーク⁠] の横で⁠、図形の輪郭を描く実線または点線を有効にします⁠。実線と点線の両方で⁠、ストロ⁠ークの太さを設定します⁠。点線の場合は⁠、[⁠ダ⁠ッシ⁠ュ⁠] と [⁠ギ⁠ャ⁠ップ⁠] のサイズと [⁠先端⁠] の形状を設定します⁠。
  8. [⁠ドロ⁠ップ シ⁠ャドウ⁠] トグルをクリ⁠ックして図形にドロ⁠ップ シ⁠ャドウを追加します⁠。[⁠角度⁠]⁠、[⁠距離⁠]⁠、[⁠ぼかし⁠]⁠、[⁠⁠] を設定します⁠。

ヒント

ドロ⁠ップ シ⁠ャドウが表示されない場合は⁠、距離やぼかしの設定を増やしてください⁠。

図形ブロ⁠ックの色

ブロ⁠ック エデ⁠ィタ⁠ーでは⁠、サイトのパレ⁠ットから図形の色を選択するか⁠、カスタム カラ⁠ーを選択できます⁠。ブロ⁠ックのドロ⁠ップ シ⁠ャドウを有効にした後⁠、ブロ⁠ックのドロ⁠ップシ⁠ャドウの色を選択することもできます⁠。これらの設定により⁠、追加するそれぞれの図形ブロ⁠ックを異なる色のドロ⁠ップ シ⁠ャドウを加えることができます⁠。

パレ⁠ットの色を選択し⁠、後でサイトのパレ⁠ットを変更すると⁠、新しいパレ⁠ットに合わせて色が変更される場合があることに注意してください⁠。図形ブロ⁠ックやそのドロ⁠ップ シ⁠ャドウにカスタム カラ⁠ーを選択した場合⁠、パレ⁠ットを変更してもその色は変わりません⁠。

ブロ⁠ック エデ⁠ィタ⁠ーで色を選択しない場合⁠、図形ブロ⁠ックとそのドロ⁠ップ シ⁠ャドウはセクシ⁠ョンのカラ⁠ー テ⁠ーマの既定に従います⁠。これらの既定の色をカスタマイズする方法は次の通りです⁠。

  1. [⁠サイト スタイル⁠] を開きます⁠。
  2. [⁠⁠] をクリ⁠ックします⁠。
  3. セクシ⁠ョンのテ⁠ーマにカ⁠ーソルを合わせ⁠、鉛筆アイコンをクリ⁠ックします⁠。セクシ⁠ョンで使用されているテ⁠ーマがわからない場合は⁠、セクシ⁠ョンの右上隅にあるラベルを確認します⁠。
  4. [⁠図形ブロ⁠ック⁠] までスクロ⁠ールし⁠、[⁠背景色⁠] と [⁠ドロ⁠ップ シ⁠ャドウの色⁠] を変更します⁠。

次のステ⁠ップ

図形ブロ⁠ックのデザインを設定した後は⁠、次を実行します⁠。

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

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

  • Squarespace Expertを雇う

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