ドラッグ&ドロップのブロックを使用してコンテンツを作成し、サイトの構造を構築します。

ブロックは、テキストやボタン、フォーム、画像などのコンテンツをサイトに追加するためのドラッグ＆ドロップ機能です。サイトを構成する要素だとお考えください。

また、あらかじめ用意されたブロック レイアウトを使用してページ セクションを追加することもできます。

ブロックの追加に関する動画

この動画では、ページにブロックを追加する方法をご紹介します。

ブロックを追加

ブロックの追加方法は、お客様のサイトがSquarespaceのどのバージョンを使用しているか、そしてSquarespaceアプリを使用しているかどうかによって異なります。

ブロックをドラッグ＆ドロップでレイアウトに追加する

ページにブロックをドラッグ＆ドロップする手順は以下のとおりです。

1. ブロック メニューを開きます。
2. メニューからブロックをクリックしてドラッグします。ページ上のブロックを配置できる場所にガイドラインが表示されます。
3. ブロックをドロップしてページに配置します。

既存のブロックを編集する

テキスト ブロック内のテキストなど、一部のブロック コンテンツはページ上で直接編集できますが、ほとんどのブロックにはブロック エディターがあり、そこでブロック コンテンツを追加、編集、管理できます。

ブロック エディターを開く方法は以下のとおりです。

1. [ページ] パネルを開きます。
2. 編集するブロックのあるページまたはブロック エリアで [編集] をクリックします。
3. ブロックをクリックして選択し、ブロックの上に表示される鉛筆アイコンをクリックします。または、ブロックをダブルクリックします。

ボタンと画像ブロックをはめ込む、もしくは詰め込む

創造エディターはバージョン7.1のブロック セクションで利用できます。

画像ブロックとボタン ブロックを境界線の端まで伸ばしたり、周囲に間隔を設けるように設定したりできます。[埋め込む] を選択すると、コンテンツがブロック領域全体に広がり、隣接するブロックの端に接するようになります。[合わせる] を選択すると、ブロックのコンテンツの周囲にきれいな境界線が保たれます。

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

1. [ページ] パネルを開き、編集するページを選択します。
2. 左上隅の [編集] をクリックします。
3. 画像ブロックもしくはボタン ブロックをクリックし、鉛筆アイコンをクリックしてから、[デザイン] タブをクリックします。

[合わせる] もしくは [埋め込む] をクリックします。画像ブロックは既定で合わせるするように設定され、ボタン ブロックは埋め込むように設定されています。[合わせる] に設定されたブロックの場合、配置オプションが下もしくはブロックのツールバーに表示されます。

ブロックを変形効果でカスタマイズする

創造エディターはバージョン7.1のブロック セクションで利用できます。

特定のブロックの外観をカスタマイズするには、ブロックの不透明度の変更やブロックの回転など、ブロックの様々なエレメントを変化させるオプションを使用します。スタックに変形効果を追加することもできます。

変形効果を追加する手順は以下のとおりです。

1. [ページ] パネルを開き、編集するページを選択します。
2. 左上隅の [編集] をクリックします。
3. 変形オプションのあるブロックまたはスタックをクリックし、鉛筆アイコンをクリックしてから、[デザイン] タブをクリックします。
4. [変形] で設定をカスタマイズします。 目的の外観になるように、さまざまな設定の組み合わせを試してみることをおすすめします。

変形オプションには以下が含まれます。

• 不透明度
• 回転
• スケール
• オフセット
• 傾斜
• アンカー

どのブロックに変形効果がありますか？

創造エディターでは、以下に変形効果を追加できます。

• ボタン ブロック
• フォーム ブロック
• 画像ブロック
• 商品ブロック
• 図形ブロック
• テキスト ブロック

ブロックはどこに追加できますか？

ブロックは以下の場所に追加できます。

• 任意のページのブロックセクション（バージョン7.1）
• ブログ投稿
• イベントの説明
• フッター
• レイアウト ページ
• ページ ヘッダーとページ フッター (バージョン7.0)
• 商品に関する追加情報（バージョン7.0）
• サイドバー (バージョン7.0)

ブロックを追加できない場所は、サイトのバージョンによって異なります。

ブロックを追加するボタンが見つかりません

パソコンで編集しているときに [ブロックを追加] ボタンや [＋] アイコンが見つからない場合、以下をご確認ください。

• エディターが開いていることをご確認ください。エディターを開くには、ページの左上隅にある [編集] をクリックします。
• ブロックを追加できるエリアを編集していることをご確認ください。
• 他のブロックの選択を解除してください。ブロックの選択を解除するには、エディター内の空きエリアをクリックします。

それでも問題が解決しない場合は、ブラウザーのキャッシュをクリアしたり、ブラウザーの拡張機能を無効にしたり、ブラウザーのバージョンを更新したりすることをおすすめします。

ブロックはいくつ追加できますか？

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

サイトに追加できるブロックの種類

次のブロックを使用して、サイトにコンテンツを追加します。

• アーカイブ - コレクション アイテムへのリンクのリストを整理して表示します。
• オーディオ　- オーディオ ファイルのプレイヤーを追加します。
• Bandsintown - Bandsintown プロフィールからツアー日程を表示します。
• ボタン - ボタンとコール トゥ アクションを追加します。
• カレンダー - イベントなどのアイテムを日ごとに並べ替えたカレンダーとしてページに表示します。
• グラフ - 棒グラフ、折れ線グラフ、円グラフを追加します。
• コード - カスタム コードを追加するか、コード スニペットを表示します。コード ブロックでのJavaScriptおよびインライン フレーム コードの使用は、プレミアム機能です。
• コンテンツ リンク - 視覚的なプレビューを使用して、サイト上の他のページへのリンクを追加します。
• 寄付 (プレミアム機能) - ご自分の理念または組織への寄付を集めます。支払い処理業者との接続が必要です。
• 埋め込み - ツイートや動画などへのリンクがある外部コンテンツを追加します。
• Flickr - Flickrアカウントから画像を追加します。
• フォーム - 訪問者から情報を収集するためのフォームを追加します。
• ギャラリー - カルーセル、グリッド、スライドショー、またはスタック レイアウトに画像または動画のギャラリーを追加します。
• 画像 - カード、コラージュ、インライン、オーバーラップ、ポスター、またはスタック レイアウトにキャプション付きの画像を追加します。
• Instagram - Instagramアカウントから投稿を追加します。
• 線 - 横線を追加してテキストを分割したり、コンテンツを視覚的に区切ったりします。
• 地図 - 場所のピンが付いたGoogleマップを追加します。
• マークダウン - マークダウン言語を使用してテキストを追加します。
• メニュー (プレミアム機能) - レストランのメニューを表示します。
• ニュースレター - ニュースレターの読者登録フォームを追加します。
• OpenTable (プレミアム機能) - レストランの予約機能を追加します。OpenTableのレストランIDが必要です。
• 商品 - ストア ページの商品を表示します。
• 引用 - スタイル付きの引用文やお客様の声を追加します。
• 予約 - Tockでイベントの予約やチケット販売を行うためのボタンを追加します。
• RSS - ブログ ページのRSSフィードにリンクを追加します。
• Acuity Scheduling - Acuity Schedulingでオンライン予約を追加します。
• スクロール - マーキーやニュース ティッカーのようなスクロール テキストを追加します。
• 図形 (創造エディターのみ) - 単色の図形を追加します。
• 検索 - 検索フィールドを追加します。
• ソーシャル リンク - ソーシャル メディアのプロフィールにリンクするアイコンを追加します。
• SoundCloud - SoundCloud プレイヤーを埋め込みます。
• スペース調整 (クラシック エディターのみ) - ブロック間に調整可能な量のスペースまたはパディングを追加します。創造エディター セクションではサポートされていません。
• 要約 - サイトのコレクション アイテムをカルーセル、グリッド、リスト、またはウォール レイアウトで表示します。
• タグ クラウド - タグまたはカテゴリーをグラフィック クラウド形式で表示します。
• テキスト - 見出し、引用符、事前にフォーマットされたテキスト、リンク、リストなどのテキストを追加します。
• 動画 - 外部でホストされている動画を追加します。
• Zola - 結婚式のウィッシュ リストを追加します。

ブロックをカスタマイズするその他の方法

ブロックを追加すると、以下のことができます。

• 創造エディターでアニメーションを追加する
• ブロックを複製する
• 創造エディターでモバイル レイアウトを編集する
• アクセシビリティに関するベストプラクティスを学ぶ
• ブロックの移動
• ブロックをピン留めする
• ブロックのサイズの変更