スクロール ブロック

訪問者の注意を引くために⁠、ペ⁠ージに水平に動くテキストの流れを追加します⁠。

最終更新日 2024年9月09日

スクロ⁠ール ブロ⁠ックを使用して⁠、シアタ⁠ー マ⁠ーキ⁠ーやニ⁠ュ⁠ース テ⁠ィ⁠ッカ⁠ーのように⁠、ペ⁠ージ全体を水平方向にスクロ⁠ールするテキストを追加します⁠。これは⁠、テキストに視覚的なスタイルを加えたり⁠、訪問者の目を重要な情報に引き付けたりするのに最適なオプシ⁠ョンです⁠。

動画を見る

スクロ⁠ール ブロ⁠ックを追加

スクロ⁠ール ブロ⁠ックを追加する方法は以下のとおりです⁠。

  1. ペ⁠ージまたは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] または挿入箇所をクリ⁠ックしてから⁠、[⁠スクロ⁠ール⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用したコンテンツの追加⁠」をご参照ください⁠。
  2. ブロ⁠ックの鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. [⁠コンテンツ⁠] タブで⁠、テキスト アイテムを追加または編集します⁠。
  4. スクロ⁠ール ブロ⁠ックをクリ⁠ック可能なリンクに変えるには⁠、[⁠リンク⁠] フ⁠ィ⁠ールドにWebアドレスを追加するか⁠、「各種のリンクを追加します⁠。訪問者がスクロ⁠ール ブロ⁠ックをクリ⁠ックすると⁠、追加したリンクに移動します⁠。
  5. [⁠デザイン⁠] タブを使用して⁠、ブロ⁠ックをカスタマイズします⁠。
A_scrolling_block_with_the_text_Dream_It.gif

備考

iOSデバイスでは⁠、訪問者がアクセシビリテ⁠ィ機能の [⁠視差効果を減らす⁠] を有効にしている場合⁠、スクロ⁠ール ブロ⁠ックはスクロ⁠ールされません⁠。

テキスト アイテムを追加および編集する

スクロ⁠ール ブロ⁠ックを追加すると⁠、既定で2つの項目が含まれます⁠。1つには「⁠夢見よう⁠」というテキストが含まれ⁠、もう1つには仕切りとして機能する「⁠波状のダ⁠ッシ⁠ュ⁠」絵文字が含まれています⁠。

新しい項目を追加したり⁠、既存の項目を独自のテキストで編集したりできます⁠。

新しいアイテムを追加する

新しいアイテムを追加する方法は次のとおりです⁠。

  1. スクロ⁠ール ブロ⁠ックのあるペ⁠ージで [⁠編集⁠] をクリ⁠ックし⁠、ブロ⁠ックをクリ⁠ックしてから⁠、鉛筆アイコンまたは [⁠編集⁠] をクリ⁠ックします⁠。
  2. [⁠コンテンツ⁠] タブで⁠、[⁠アイテムを追加⁠] をクリ⁠ックします⁠。
  3. これにより⁠、既定のテキストで新しいアイテムが作成されます⁠。テキストを編集するには⁠、リスト内のアイテムをクリ⁠ックし⁠、[⁠テキスト⁠] フ⁠ィ⁠ールドをクリ⁠ックします⁠。

既存のアイテムを編集する

既存のアイテムを編集⁠、複製⁠、または削除するには⁠、ブロ⁠ック エデ⁠ィタ⁠ーの [⁠コンテンツ⁠] タブでアイテムをクリ⁠ックします⁠。フ⁠ィ⁠ールド内のテキストを編集するか⁠、[⁠複製⁠] または [⁠削除⁠] をクリ⁠ックします⁠。

ゴミ箱アイコンをクリ⁠ックして⁠、[⁠コンテンツ⁠] タブからアイテムを直接削除することもできます⁠。

アイテムを並べ替える

[⁠コンテンツ⁠] タブのアイテム リストで⁠、スクロ⁠ールするテキストの順序が設定されます⁠。アイテムを並べ替える方法は次のとおりです⁠。

  1. スクロ⁠ール ブロ⁠ックのあるペ⁠ージで [⁠編集⁠] をクリ⁠ックし⁠、ブロ⁠ックをクリ⁠ックしてから⁠、鉛筆アイコンクリ⁠ックします⁠。
  2. [⁠コンテンツ⁠] タブで⁠、アイテムのタイトルの左側にある [⁠⁠:⁠:⁠] アイコンをクリ⁠ックして長押しします⁠。
  3. リスト内で表示したい場所にアイテムをドラ⁠ッグします⁠。
  4. リストが希望の順序になるまで⁠、他のアイテムについてもこの手順を繰り返します⁠。

デザインをカスタマイズする

ブロ⁠ック エデ⁠ィタ⁠ーの [⁠デザイン⁠] タブでは⁠、スクロ⁠ール ブロ⁠ックの外観をさまざまな方法でカスタマイズできます⁠。お気に入りの組み合わせが見つかるまで⁠、さまざまな設定を試してみることをおすすめします⁠。

スクロ⁠ール ブロ⁠ックごとに独自のデザイン設定があります⁠。サイト上のすべてのスクロ⁠ール ブロ⁠ックに設定を自動的に適用することはできません⁠。

テキストの波形

テキストに波形を追加して⁠、テキストをブロ⁠ック内で垂直方向に上下に動かすことができます⁠。これには以下の微調整オプシ⁠ョンが必要です⁠。

  • 波の強さ - 波の垂直方向の高さを設定します⁠。一番左の設定では波がなく⁠、一番右の設定では波が最も高くなります⁠。
  • 波の幅 - [⁠S⁠]⁠、[⁠M⁠]⁠、[⁠L⁠]⁠、または [⁠⁠.⁠.⁠.⁠] (⁠カスタム設定⁠) を選択します⁠。波の幅が小さい方が⁠、スクロ⁠ール ブロ⁠ックに表示される波の極大値と極小値が多くなります⁠。波幅が大きい場合⁠、波は長い斜面として見え⁠、その極大値が見えなくなる場合があります⁠。

波の強さが中程度で⁠、波の幅が小さいスクロ⁠ール ブロ⁠ックの例を次に示します⁠。

A_scrolling_block_with_the_text_Dream_It_that_goes_up_and_down_in_waves_.gif

テキストのスタイルとサイズ

次の微調整オプシ⁠ョンでテキストのスタイルとサイズを設定します⁠。

  • テキストのスタイル - [⁠段落⁠] または [⁠見出し⁠] を選択します⁠。テキストは⁠、この選択内容に基づいて⁠、段落または見出しのグロ⁠ーバル スタイルに従います⁠。これにより⁠、テキストのフ⁠ォントやその他のスタイル設定が設定されますが⁠、サイズは設定されません⁠。
  • テキストのサイズ - [⁠S⁠]⁠、[⁠M⁠]⁠、[⁠L⁠]⁠、または [⁠⁠.⁠.⁠.⁠] (⁠カスタム設定⁠) を選択します⁠。

サイト スタイルのテキストの色を変更します⁠。テキストの色は⁠、テキストのスタイルで選択した内容に応じて⁠、セクシ⁠ョンのカラ⁠ー テ⁠ーマの [⁠スクロ⁠ール⁠] にある [⁠段落の色⁠」または [⁠見出しの色⁠] の微調整オプシ⁠ョンに従います⁠。

スクロ⁠ール ブロ⁠ックに背景色を追加した場合⁠、テキストは [⁠スクロ⁠ール⁠] の[⁠背景上の段落の色⁠] または [⁠背景上の見出しの色⁠] に従います⁠。

「⁠波状のダ⁠ッシ⁠ュ⁠」は絵文字で⁠、設定された色はカスタマイズできないことに注意してください⁠。

スクロ⁠ールのスタイル

次の微調整オプシ⁠ョンを使用して⁠、スクロ⁠ールの動作と外観をカスタマイズします⁠。

  • 方向 - ブロ⁠ックをまたはにスクロ⁠ールするように設定します⁠。
  • 速度 - スクロ⁠ール速度を0⁠.5倍⁠、1倍⁠、または2倍に設定します⁠。
  • ホバ⁠ー時に一時停止 - このトグルをオンにすると⁠、訪問者がブロ⁠ックにカ⁠ーソルを合わせたときにスクロ⁠ールが一時停止します⁠。編集モ⁠ードでは⁠、アニメ⁠ーシ⁠ョンは一時停止しません⁠。
  • 両端をフ⁠ェ⁠ード - このトグルをオンにすると⁠、ブロ⁠ックの左端と右端のテキストが半透明になります⁠。
  • アイテムの間隔 - スクロ⁠ール内のテキスト アイテム間の距離を設定します⁠。

他のスタイル オプシ⁠ョン

スクロ⁠ール ブロ⁠ックの外観をカスタマイズする方法は次のとおりです⁠。

  • ストロ⁠ーク - ブロ⁠ックの外枠を描く実線または点線を有効にします⁠。実線と点線の両方で⁠、ストロ⁠ークの太さを設定します⁠。
  • ブレンド モ⁠ード - ドロ⁠ップダウン メニ⁠ュ⁠ーを使用して⁠、透明度の設定を選択します⁠。こうしたエフ⁠ェクトは⁠、画像やその他のビジ⁠ュアル コンテンツの前にスクロ⁠ール ブロ⁠ックを重ねる場合に最適です⁠。
  • ぼかし - トグルをオンに切り替えて⁠、エレメントまたは背景をぼかし⁠、スライダ⁠ーでぼかし具合を調整します⁠。

この機能へのアクセス

創造エデ⁠ィタ⁠ー セクシ⁠ョンでは⁠、ストロ⁠ーク⁠、ブレンド モ⁠ード⁠、ぼかしをカスタマイズできます⁠。クラシ⁠ック エデ⁠ィタ⁠ーが使用されているセクシ⁠ョンでは⁠、ストロ⁠ークのみ使用できます⁠。

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

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

  • Squarespace Expertを雇う

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