動画ブロック

訪問者がサイト上で直接視聴できる動画フ⁠ァイルをア⁠ップロ⁠ードするか埋め込みます⁠。

最終更新日 2025年2月07日

サイト上のペ⁠ージに単一の動画を追加するには⁠、動画ブロ⁠ックを使用します⁠。動画を直接ア⁠ップロ⁠ードするか⁠、YouTubeやVimeoでホストされている動画を追加できます⁠。

サイトに動画を追加するためのその他のオプシ⁠ョンについては⁠、「⁠サイトに動画を追加する⁠」をご参照ください⁠。

動画を見る

動画ブロ⁠ックを追加する

動画ブロ⁠ックを追加する方法は以下の通りです⁠。

  1. ペ⁠ージまたは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] または挿入箇所をクリ⁠ックしてから⁠、[⁠動画⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用してコンテンツを追加する⁠」をご覧ください⁠。
  2. ブロ⁠ックをクリ⁠ックして選択し⁠、ブロ⁠ックの上に表示される鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ックエデ⁠ィタを開きます⁠。
  3. フ⁠ァイルをア⁠ップロ⁠ードするかURLを貼り付けて動画を追加します⁠。
  4. (⁠オプシ⁠ョン⁠) カスタム アイキ⁠ャ⁠ッチ画像を追加します⁠。
  5. (⁠オプシ⁠ョン⁠) 動画をア⁠ップロ⁠ードした場合は⁠、再生設定をカスタマイズします⁠。
  6. (⁠オプシ⁠ョン⁠) 動画の説明を追加します⁠。
  7. 完了したら⁠、ブロ⁠ック エデ⁠ィタ⁠ーの外側をクリ⁠ックします⁠。変更内容は自動的に保存されます⁠。

動画をア⁠ップロ⁠ードする

動画ブロ⁠ックには⁠、最長30分の動画フ⁠ァイルを1件ア⁠ップロ⁠ードできます⁠。ア⁠ップロ⁠ードする前に⁠、以下の点にご留意ください⁠。

  • 最長30分の高解像度動画を⁠、Squarespaceサイトに無料で直接ア⁠ップロ⁠ードできます⁠。ストレ⁠ージ容量を増やすには⁠、デジタル商品プランにご登録ください⁠。
  • ア⁠ップロ⁠ードされた動画フ⁠ァイルは⁠、動画フ⁠ァイルの要件を満たす必要があります⁠。
  • 動画は⁠、縦横比が16⁠:9のプレイヤ⁠ーで表示されるため⁠、それ以外の縦横比を持つ動画には黒いバ⁠ーや空白部分が表示されます⁠。
  • ア⁠ップロ⁠ードした動画が短期間で非常に多くの視聴回数を獲得した場合⁠、サポ⁠ートを継続できなくなる場合があります⁠。そのような場合⁠、当社からお客様に直接連絡し⁠、最適なホステ⁠ィング オプシ⁠ョンについてご案内します⁠。

動画をア⁠ップロ⁠ードする方法は以下の通りです⁠。

  1. ブロ⁠ック エデ⁠ィタ⁠ーで⁠、[⁠+⁠] をクリ⁠ックまたはタ⁠ップします⁠。ブロ⁠ック エデ⁠ィタ⁠ーが開いていない場合は⁠、ブロ⁠ックのツ⁠ールバ⁠ーにある鉛筆アイコンをクリ⁠ックします⁠。
  2. [⁠フ⁠ァイルをア⁠ップロ⁠ード⁠] を選択します⁠。以前にサイトにア⁠ップロ⁠ードした動画を再利用するには⁠、[⁠ライブラリから選択⁠] を選択します⁠。
  3. 使用するフ⁠ァイルを選択します⁠。新しいフ⁠ァイルをア⁠ップロ⁠ードした場合は⁠、ア⁠ップロ⁠ードが完了するのを待ちます⁠。

サ⁠ードパ⁠ーテ⁠ィ⁠ーの動画を追加する

YouTubeまたはVimeoでホストされている動画を⁠、動画のURLを使用して動画ブロ⁠ックに追加します⁠。他のサ⁠ービスでホストされている動画の場合⁠、または動画ホストの高度な再生オプシ⁠ョンを使用する場合は⁠、埋め込みブロ⁠ックを使用します⁠。どのブロ⁠ックを使用すべきかわからない場合は⁠、「⁠サ⁠ードパ⁠ーテ⁠ィ⁠ー サ⁠ービスの動画をサイトに埋め込む⁠」をご参照ください⁠。

ヒント

動画ブロ⁠ックは⁠、以前は埋め込みコ⁠ードを使用した動画の埋め込みをサポ⁠ートしていました⁠。この方法が使用されている動画ブロ⁠ックは⁠、自動的に埋め込みブロ⁠ックに移行されました⁠。

  1. Webブラウザ⁠⁠ーの別のタブで⁠⁠、使用する動画を探します⁠⁠。
  2. 動画のホストの種類に応じて⁠⁠、ブラウザ⁠⁠ーのアドレス バ⁠⁠ーまたは [⁠⁠シ⁠⁠ェア⁠⁠] 領域からURLをコピ⁠⁠ーします⁠⁠。
  3. ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで [⁠⁠+⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠リンクから追加⁠⁠] を選択します⁠⁠。
  4. URLを [⁠⁠動画のURL⁠⁠] フ⁠⁠ィ⁠⁠ールドに貼り付けます⁠⁠。キ⁠⁠ーボ⁠⁠ード シ⁠⁠ョ⁠⁠ートカ⁠⁠ットCtrl+V (⁠⁠Macでは+V⁠⁠) を使用して貼り付けます⁠⁠。
  5. [⁠⁠追加⁠⁠] をクリ⁠⁠ックします⁠⁠。
Squarespace_Super_Bowl_2015__Om_-_DreamingWithJeff_com_-_YouTube.png
  1. 使用する動画をWebブラウザ⁠⁠ーで探します⁠⁠。
  2. 動画のホストの種類に応じて⁠⁠、ブラウザ⁠⁠ーのアドレス バ⁠⁠ーまたは [⁠⁠シ⁠⁠ェア⁠⁠] 領域から動画のURLをコピ⁠⁠ーします⁠⁠。
  3. Squarespaceアプリに戻り⁠⁠、ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで [⁠⁠+⁠⁠]⁠⁠、[⁠⁠リンクから追加⁠⁠] の順にタ⁠⁠ップします⁠⁠。
  4. 表示されたウ⁠⁠ィンドウで⁠⁠、テキスト フ⁠⁠ィ⁠⁠ールドにURLを貼り付け⁠⁠、[⁠⁠追加⁠⁠] をタ⁠⁠ップします⁠⁠。

カスタムのアイキ⁠ャ⁠ッチ画像を追加する

動画の読み込みが完了したら⁠、カスタム アイキ⁠ャ⁠ッチ画像を追加できます⁠。この画像は⁠、動画が再生される前にサイト上の動画の上に表示されます⁠。

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

  • アイキ⁠ャ⁠ッチ画像は⁠、動画ブロ⁠ックのコンテナ⁠ーの縦横比 (⁠16⁠:9⁠) に合わせて自動的にトリミングされます⁠。URL経由で追加された動画の場合⁠、縦横比は動画ホステ⁠ィング サ⁠ービスのサムネイル画像 (⁠通常は16⁠:9⁠) と一致します⁠。
  • この画像により動画のタイトルは見えなくなります⁠。
  • 自動再生されるように設定された動画では⁠、画像が表示されない場合があります⁠。
  • モバイル端末では⁠、動画をタ⁠ップすると画像が表示され⁠、もう一度タ⁠ップすると動画を再生できます⁠。

アイキ⁠ャ⁠ッチ画像を追加する方法は以下の通りです⁠。

  1. ブロ⁠ック エデ⁠ィタ⁠ーで⁠、[⁠カスタム アイキ⁠ャ⁠ッチ画像⁠] のトグルをオンに切り替えます⁠。
  2. [⁠+⁠] をクリ⁠ックまたはタ⁠ップして画像をア⁠ップロ⁠ードするか⁠、ア⁠ップロ⁠ード済みの画像を再利用するか⁠、スト⁠ック画像を使用します (⁠コンピ⁠ュ⁠ータ⁠ーのみ⁠)⁠。

動画の設定をカスタマイズする

動画のア⁠ップロ⁠ードが完了したら⁠、ブロ⁠ック エデ⁠ィタ⁠ーで以下の設定をカスタマイズできます⁠。

  • 動画をミ⁠ュ⁠ート - 動画が既定で音声なしで再生されます⁠。訪問者は視聴時に音量を上げることができます⁠。
  • 自動再生 - ペ⁠ージの読み込みが完了するとすぐに動画が再生されます⁠。自動再生を有効にするには⁠、まず [⁠動画をミ⁠ュ⁠ート⁠] を有効にする必要があります⁠。
  • ル⁠ープ - 動画が終了すると自動的に最初から再生されます⁠。
  • プレイヤ⁠ー コントロ⁠ール - [⁠すべて⁠]⁠、[⁠最低限⁠]⁠、または [⁠なし⁠] を選択して⁠、プレイヤ⁠ーコントロ⁠ールの表示数をカスタマイズできます⁠。

ヒント

動画の再生設定は⁠、ア⁠ップロ⁠ードされた動画でのみカスタマイズできます⁠。他の動画ホストの高度な再生オプシ⁠ョンを使用するには⁠、埋め込みブロ⁠ックを使用します⁠。

動画の説明を追加する

ブロ⁠ック エデ⁠ィタ⁠ーの [⁠説明⁠] フ⁠ィ⁠ールドに動画キ⁠ャプシ⁠ョンを追加するには⁠、[⁠ここに説明を追加⁠.⁠.⁠.⁠] をクリ⁠ックまたはタ⁠ップして説明を入力します⁠。このテキストはいつでも編集できますが⁠、動画を追加するまでは表示されません⁠。

一部の動画サ⁠ービスでは⁠、URL経由で動画を追加すると⁠、このフ⁠ィ⁠ールドに説明が自動入力されます⁠。

動画ブロ⁠ックのコンテンツを削除する

ペ⁠ージから動画ブロ⁠ックを削除する

ペ⁠ージから動画ブロ⁠ックを完全に削除するには⁠、ブロ⁠ックをクリ⁠ックし⁠、ブロ⁠ック ツ⁠ールバ⁠ーのゴミ箱アイコンをクリ⁠ックします⁠。詳細については⁠、「⁠ブロ⁠ックを削除する⁠」をご覧ください⁠。

動画ブロ⁠ックから動画を削除する

動画を削除しつつ動画ブロ⁠ックを保持するには⁠、ブロ⁠ック ツ⁠ールバ⁠ーの鉛筆アイコンをクリ⁠ックしてブロ⁠ック エデ⁠ィタ⁠ーを開き⁠、[⁠コンテンツ⁠] タブでゴミ箱アイコンまたは [⁠置き換え⁠] をクリ⁠ックします⁠。

ア⁠ップロ⁠ードした動画をアセ⁠ット ライブラリ⁠ーから削除する

ア⁠ップロ⁠ードした動画を動画ブロ⁠ックから削除しても⁠、サイトから完全に削除されるわけではありません⁠。その動画フ⁠ァイルはアセ⁠ット ライブラリ⁠ーに保存され⁠、サイト内の他の場所で再利用できます⁠。

サイトから動画フ⁠ァイルを完全に削除してストレ⁠ージ領域を解放するには⁠、 「⁠画像と動画の管理と再利用⁠」をご参照ください⁠。

トラブルシ⁠ュ⁠ーテ⁠ィング

動画ブロ⁠ックに関する問題のトラブルシ⁠ュ⁠ーテ⁠ィングを行うには⁠、「⁠Squarespaceサイトに動画を追加する⁠」をご参照ください⁠。

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

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

  • Squarespace Expertを雇う

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