完全にカスタマイズ可能なドラッグ&ドロップ編集システムで、サイトのページにコンテンツを追加できます。

創造エディターは、Squarespaceバージョン7.1のサイトの主要なコンテンツ エディターです。すべてのページ タイプ、ポートフォリオ プロジェクト、サイトのフッター、ブロック セクションで創造エディターを使用します。

創造エディターは、7.1サイトのすべてのブロック セクションで利用できます。創造エディターは、現在、次の項目をサポートしていません。

• ブログ投稿、イベントの説明、商品の追加情報など、セクションを使用しないブロック エリア
• 自動レイアウト、コレクション セクション、ギャラリー セクションなど、ブロックを使用しないセクション
• バージョン7.0サイト

Squarespaceアプリでは、現在、創造エディター セクションのブロックの追加または編集はできません。

動画を見る

創造エディターのクイック スタート

創造エディターは、バージョン7.1サイトでブロックを使用するページ セクションの編集エクスペリエンスです。サイトがバージョン7.1の場合は、レイアウト ページの追加や既存のページへのブロック セクションの追加、フッターの編集で、いつでも創造エディターの使用を開始できます。創造エディターのリリース前に作成されたブロック セクションがサイトにある場合は、それらをアップグレードできます。

創造エディターのフレキシブルなグリッドを使用すると、ブロックをどこにでも配置でき、他のブロックとオーバーラップして配置したり、ページ上で直接サイズを変更したりできます。一方はコンピューターでサイトを閲覧する訪問者用、もう一方はモバイル端末用の2つのレイアウト デザインを作成することに留意してください。右上のデバイス アイコンをクリックして、さまざまなレイアウトを設定します。

詳細については、このガイドのこれ以降をご参照ください。

私は創造エディターを使用できますか？

創造エディターは、バージョン7.1サイトの次の項目でサポートされています。

• 任意のページのブロック セクション
• フッター
• ポートフォリオ プロジェクト

ページで [編集] をクリックすると、創造エディター セクションの左上に [ブロックを追加] ボタンが表示されます。ブロックをクリックしてドラッグすると、背景にグリッドが表示されます。

ヒント: Gキーを押すと、グリッドが表示されたままになります。Gをもう一度押すと、グリッドが非表示になります。

ボタンもしくはグリッドが表示されない場合、このブロック エリアではクラシック エディターが使用されます。

クラシック エディター

バージョン7.0のすべてのブロック エリアでは、クラシック エディターが使用されます。バージョン7.1のサイトでは、次の一部のブロック エリアで引き続きクラシック エディターが使用されます。

• ブログ投稿
• イベントの説明
• 商品の追加情報
• 創造エディターのリリース前に追加されたブロック セクション

創造エディターとクラシック エディターの相違点についての詳細は、「創造エディターとクラシック エディター] をご参照ください。

創造エディター セクションを追加する

創造エディター セクションをページに追加する方法は次の通りです。

1. ページ上で [編集] をクリックします。
2. [セクションを追加] をクリックします。
3. [空白のセクションを追加] をクリックして空白の創造エディター セクションを追加するか、カテゴリをクリックして事前に作成されたセクションを検索します。セクションの右上にiアイコンが表示されている場合は、創造エディターを使用しない自動レイアウトであることに注意してください。

セクションのグリッドの高さを変更するには、右下の青い矢印アイコンをクリックしてドラッグします。ブロックの量や配置によっては、高さを低くすることができない場合があることに注意してください。それぞれの創造エディター セクションには1000行の制限があります。

クラシック エディター セクションをアップグレードする

注: アップグレードしてページを保存した後、セクションをクラシック エディターに戻すことはできません。セクションで創造エディターを使用するかどうかわからない場合は、念のためアップグレードする前にセクションを複製することをおすすめします。

創造エディターのリリース前に、クラシック エディターを使うブロック セクションを追加した場合、それらを創造エディター セクションに変換することができます。その方法は次の通りです。

1. ページ上で [編集] をクリックします。
2. クラシック エディター セクションの左上の [アップグレード] をクリックします。
3. クラシック エディター セクションは創造エディター セクションになります。クラシック エディターの高さが1000行のグリッド制限を超えると、複数の創造エディター セクションに分割されます。

クラシック エディターと創造エディターの相違点により、アップグレード時にレイアウトが若干変更されたり、ブロックの位置がずれたりする場合があります。クラシック エディターでのすべてのレイアウトが、創造エディターで完全に同等であるとは限りません。しかしアップグレードは、創造エディターの新しいオプションと柔軟性の向上により、ブロック レイアウトを再構築する絶好の機会となります。

そのセクションで創造エディターを使用したくない場合は、保存する前に [元に戻す] をクリックしてください。

ブロックを追加する

創造エディター セクションにブロックを追加する方法は次の通りです。

1. ページ上で [編集] をクリックします。
2. 左上の [ブロックを追加] をクリックします。
3. 追加するブロックを選択します。さまざまな種類のブロックの詳細については、「ブロックを使用したコンテンツの追加」をご参照ください。

追加できるブロックの数に厳密な制限はありませんが、コンテンツが多すぎるとサイトの読み込みが遅くなる可能性があるため、1ページあたり追加するブロックは60個までにすることをおすすめします。特にモバイル ブラウザーでは、コンテンツの多いページのダウンロードに問題が生じる可能性があります。

ブロックを追加すると、次のことが可能になります。

• ブロックをピン留めする
• セクション内に既存のブロックを複製する
• 他の創造エディター セクションへブロックをコピー＆ペーストする
• クリック＆ドラッグによるブロックの移動やサイズ変更
• モバイル レイアウトを編集して、モバイル端末での表示方法を設定する
• 特にブロックがオーバーラップしている場合は、 創造エディター セクションをアクセスしやすくするためのベスト プラクティスをご参照ください。

注: スペース調整ブロックは、創造エディターではサポートされていません。クラシック エディターでは、スペース調整ブロックはブロック間にスペースを追加しますが、創造エディターでは、ブロックをクリックしてセクション内の新しい位置にドラッグすることで、ブロック間にスペースを追加することができます。

ブロックをピン留めする

創造エディター セクションの1つ以上のブロックをピン留めすれば、訪問者がセクション内の他のコンテンツをスクロールしている間ブロックを固定しておくことができます。これは、特定のコンテンツを強調し、ページにユニークなデザインを加えるのに最適な方法です。

ブロックを固定する方法は次の通りです。

1. ブロックをクリックし、ブロックのツールバーのピンアイコンをクリックします。どのようなブロック タイプでもピン留めできます。
2. 既定値では、ピン留めされたブロックはセクションの上部に整列するように設定されています。もしくは、対応するアイコンをクリックして [中央揃え] や [下揃え] を選択することもできます。
3. オフセットスライダーを使用して、ピン留めされたブロックとブラウザーの境界線の間の距離を0ピクセルから50ピクセルの間で変更します。たとえば、上端が0ピクセルのピン留めされたブロックは、訪問者がスクロールしてもブラウザーの端に留まります。

希望の効果を得るために、さまざまな設定を試してみることをおすすめします。

以下の点に留意してください。

• ピン留めされたブロックは、そのセクションにのみ固定されたままになります。セクションのコンテンツが足りない場合や非常に短い場合は、ピン留めの効果が現れないことがあります。
• コンピューター レイアウトでピン留めされたブロックは、モバイル レイアウトではピン留めされません。その逆も同様です。
• ピン留めされたブロックは、クラシック エディターや他のタイプのページ セクションではサポートされません。
• ピン留めできるブロックの数に制限はありませんが、多くのコンテンツが追加されているセクションは読み込みが遅くなる可能性があります。ピン留めされているかどうかに関係なく、1ページに追加するブロックは60個以下にすることを推奨します。詳細については、「サイトの読み込みが遅い」をご参照ください。

ブロックの背景色を追加する

多くのテキストを含むブロックが他のコンテンツとオーバーラップする場合は、ブロックの背景色を追加してテキストを読みやすくします。カラー パレットとテーマの仕組みの詳細については、「色を変更する」をご参照ください。

ブロックをはめ込む、もしくは詰め込む

画像ブロックとボタン ブロックの間にパディングを設定するには、はめ込むもしくは詰め込むように設定します。ブロックを詰め込むように設定すると、画像やボタンがブロック スペース全体を占め、画像やボタンの境界線は隣接するブロックと同じ高さになります。ブロックをはめ込むように設定すると、画像やボタンの周囲に余分なスペースができます。

画像ブロックもしくはボタン ブロックをはめ込む、もしくは詰め込むように設定する方法は次の通りです。

1. 画像ブロックもしくはボタン ブロックをクリックし、鉛筆アイコンをクリックしてから、[デザイン] タブをクリックします。
2. [合わせる] もしくは [埋め込む] をクリックします。画像ブロックは既定で合わせるするように設定され、ボタン ブロックは埋め込むように設定されています。
3. [はめ込む] を選択すると、配置オプションが下もしくはブロックのツールバーに表示されます。
4. 変更を加えた後、[保存] をクリックして変更を保存し、編集を続行するか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

創造エディターとレスポンシブ デザイン

すべてのSquarespaceサイトはレスポンシブ デザインを採用しているため、さまざまなブラウザー サイズやデバイスでサイトが見栄えよく見えるようにしています。特に創造エディターのフレキシブル グリッドは、ブロックが再配置されたり、サイズが変更されたり、編集されたりしたときに、ページ上の他のブロックが移動したり、サイズが変更されたりするため、より複雑なレイアウトを維持できるように構築されています。

たとえば、画像ブロックの上にテキスト ブロックを配置し、さらにテキスト ブロックにテキストを追加すると、追加したテキストに合わせて画像ブロックが拡大されます。

意図せずブロックが移動したりサイズが変更されたりした場合は、直前の変更を取り消し、ブロックを移動させてから再度変更を行ってください。上記の例では、画像ブロックのサイズを変更せずにテキストを追加したい場合は、テキスト ブロックを画像ブロックの外に移動してテキストを追加し、再度画像ブロックとオーバーレイすることができます。

モバイル レイアウト

創造エディター セクションにおいて、モバイル レイアウトには同じコンテンツが表示されますが、モバイル レイアウトをコンピューター レイアウトとは無関係に配置したり、ブロックのサイズを変更したりできます。セクションのモバイル レイアウトを設定する方法は次の通りです。

1. ページの [編集] をクリックし、右上隅にある [モバイル ビュー ] アイコンをクリックします。
2. 必要に応じてブロックを配置し、サイズを変更します。ブロックを隣接するブロックの上や下に自動的に移動するには、ブロックをクリックし、次に [↑] もしくは [↓] をクリックします。これは、クリックしてドラッグすることなく、モバイル レイアウト内のブロックをすばやく再配置するための優れた方法です。
3. 変更を加えた後、[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

ブロックの配置やサイズを変更しても、コンピューター レイアウトには反映されません。これには、青い矢印アイコンを使用してグリッドの高さを増減することが含まれます。ブロック コンテンツもしくはセクション スタイルへの変更はすべてグローバルに反映され、モバイル レイアウトとコンピューター レイアウトの両方に反映されます。以下の例をご確認ください。

• モバイル レイアウトの画像ブロックとオーバーラップするようにテキスト ブロックを移動しても、コンピューターのレイアウトは変わりません。
• テキストの内容やテキストの色を変更した場合、その変更は両方のレイアウトに反映されます。

モバイル レイアウトを編集した後にサイトに新しいブロックを追加した場合、できる限りコンピューター レイアウトと同様にシステムは新しいブロックをモバイル レイアウトに配置します。サイトに変更を加える際には、モバイル レイアウトを確認することをおすすめします。

創造エディター セクションのスタイルを設定する

創造エディター セクションのスタイルを設定する方法は次の通りです。

1. ページの [編集] をクリックしてから、スタイルを設定したいセクションの右上にある [セクションを編集] をクリックします。[セクションを編集] が表示されない場合は、ブロックが選択されている可能性があります。セクションの背景をクリックすると、[セクションの編集] が表示されます。
2. [書式] タブで、セクションの間隔とパディングのスタイルを変更します。サイトの外観にどのように反映されるかを把握するために、さまざまな設定を試してみることをおすすめします。オプションについては、以下をご参照ください。
3. 背景設定を変更するには [背景] をクリックします。詳細については、[セクションの背景画像]、[背景動画を追加する]、および [セクションの背景用アート] をご参照ください。
4. セクションのカラー テーマを変更するには、[色] をクリックします。詳細については、色を変更するをご参照ください。
5. [保存] をクリックし、変更を保存してそのまま編集を続けるか、[終了]、[保存] の順にクリックしてエディターを閉じます。

デザイン オプション

[デザイン] タブで次のスタイル設定を変更します。

• 行数 - セクションのグリッドの行数を設定します。これは、コンピューター レイアウトとモバイル レイアウトで異なる設定が可能な唯一のセクション スタイル オプションですが、最小行数は、追加したブロック数とその配置方法にも依存します。
• 間隔 - グリッド内のユニットの間隔を設定して、ブロックの間隔をコントロールします。[間隔なし]、[プリセットの間隔] を選択するか、[...] をクリックして、カスタムで垂直方向と水平方向の間隔を設定します。
• 全画面表示 - この設定を有効にすると、コンテンツの高さや配置をより細かくコントロールできます。セクションのコンテンツの周囲にパディングが必要ない場合は、無効のままにしておきます。次のオプションは、[全画面表示] が有効になっている場合にのみ表示されます。
  
  • 高さ - セクション グリッドの外側にパディングを追加します。高さを [小]、[中]、[大] から選択するか、...をクリックしてカスタムの高さを設定します。
  • 配置位置 - 追加の高さのパディングを表示する場所を設定します。コンテンツを上端で揃えるためには、コンテンツの下にパディングを追加します。コンテンツを中央に配置するためには、コンテンツの上下にパディングを追加します。コンテンツを下端で揃えるためには、コンテンツの上にパディングを追加します。
• 仕切り - セクションの下部に仕切りを追加してスタイルを設定します。詳細については、「ページのセクション」をご参照ください。

創造エディターとクラシック エディターの比較

この表は、創造エディターとクラシック エディターの相違点の概要を示しています。これらのエディターは品質と機能が多く共通していますが可能なレイアウトは異なっており、創造エディターのみに最新のオプションが多くあります。

機能	創造エディター	クラシック エディター
レイアウトと配置	クリック＆ドラッグで自由にブロックを配置でき、他のブロックにオーバーラップさせることもできるフレキシブルなグリッド。	テキスト内のフローティング ブロックなどの一部の例外を除いて、クリック＆ドラッグでブロックを他のブロックの横にしか配置できない固定的なグリッド。
利用可能なブロック	スペース調整ブロック (創造エディターでは不要) を除くすべてのブロック。ブロックをクリックし新しい場所にドラッグして、スペースを作成します。   画像ブロックには組み込みのレイアウトがありませんが、創造エディターでは画像ブロック、テキスト ブロック、ブロック背景を使用して、これらのレイアウトなどを再現できます。	図形ブロックを除くすべてのブロック (創造エディター専用)。
ブロックの複製	1つ以上のブロックを同時に複製するか、ブロックをコピーして他の創造エディター セクションに貼り付けます。	ブロックの複製やブロックのコピー＆ペーストはできません。そのかわりに、ページ、投稿、もしくはセクションを複製できます。
ブロックの移動	クリック＆ドラッグで、創造エディター セクションの任意の場所にブロックを移動します。他のブロックにオーバーラップさせたり、ガイドラインを使用したりしてブロックを中央に配置します。	クリック＆ドラッグで、最大12列のグリッド内で他のブロックと一緒にブロックを移動できます。ブロックは他のブロックとオーバーラップさせることはできず、ブロックの間隔は固定されています。
ブロックのサイズを変更する	ブロックの境界線や角をクリック＆ドラッグして、ブロックのサイズを変更します。コンテンツの量や種類は、ブロックのサイズ変更に影響する場合があります。	レイアウト内の他のブロックを使用して、ブロックのサイズを変更します。また、一部のブロックにはトリミング ハンドルがあります。
モバイル デザイン	コンピューターのレイアウトとは別に、モバイル レイアウトをデザインできます。	コンピューターでブロックを配置すると、レスポンシブ デザインでモバイル レイアウトが設定されます。モバイル レイアウトを個別にレイアウトすることはできません。

その他のヘルプ

このガイドでは、創造エディターに固有の基本機能とオプションについて説明します。創造エディター セクションに表示されるその他のコンテンツやスタイル設定の詳細については、次のガイドをご参照ください。

• セクションを移動、複製、削除するには、[ページ] セクションにアクセスします
• さまざまなタイプのブロックについては、「ブロックによるコンテンツの追加」を参照してください
• ブロックを移動してレイアウトを調整するには、「ブロックを移動してレイアウトをカスタマイズする」を参照してください
• ブロックのサイズを変更するには、「ブロックのサイズ変更」を参照してください
• サイトのグローバル スタイルを設定するには、「スタイルの変更」をご参照ください。
• できるだけ多くのユーザーがサイト デザインにアクセスできるようにするには、「Squarespaceのアクセシビリティ リソース」をご参照ください。