引用ブロック

独自のスタイル化されたテキストを使用して⁠、重要なコンテンツや注目すべきコンテンツを強調します⁠。

最終更新日 2024年9月12日

引用ブロ⁠ックを使用して⁠、スタイル付きの引用やお客様の声をサイトに追加します⁠。

動画を見る

引用ブロ⁠ックを追加する

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

  1. 投稿もしくはペ⁠ージ エデ⁠ィタ⁠ーを開き⁠、[⁠ブロ⁠ックを追加⁠] もしくは挿入箇所をクリ⁠ックして⁠、[⁠引用⁠] をクリ⁠ックします⁠。詳細な手順については⁠、「⁠ブロ⁠ックを使用してコンテンツを追加する⁠」を参照してください⁠。
  2. ブロ⁠ックの鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. 最初のフ⁠ィ⁠ールドに引用を入力します⁠。
  4. 2番目のフ⁠ィ⁠ールドにソ⁠ースを入力します⁠。
  5. [⁠デザイン⁠] をクリ⁠ックしてアニメ⁠ーシ⁠ョンを追加するか⁠、背景色を有効にします (⁠バ⁠ージ⁠ョン7⁠.1サイトのみ⁠)⁠。

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

既存の引用ブロ⁠ックを編集するには⁠、ブロ⁠ックをダブルクリ⁠ックするか⁠、ブロ⁠ックを1回クリ⁠ックして鉛筆アイコンもしくは [⁠編集⁠] をクリ⁠ックします⁠。これにより⁠、ブロ⁠ック エデ⁠ィタ⁠ーが開きます⁠。テキスト ブロ⁠ックのように⁠、ペ⁠ージ上で引用を直接編集することはできません⁠。

引用のスタイルを設定する

引用のスタイル設定方法は⁠、テンプレ⁠ートとバ⁠ージ⁠ョンによ⁠って異なります⁠。

フ⁠⁠ォント

引用ブロ⁠⁠ックのフ⁠⁠ォントのスタイルを設定する方法は次の通りです⁠⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、サイト スタイルを開き⁠⁠、[⁠⁠フ⁠⁠ォント⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠スタイルの割り当て⁠⁠] をクリ⁠⁠ックします⁠⁠。
  3. 引用ブロ⁠⁠ックセクシ⁠⁠ョンまでスクロ⁠⁠ールして⁠⁠、[⁠⁠テキスト⁠⁠] と [⁠⁠ソ⁠⁠ース⁠⁠] のスタイルを設定します⁠⁠。
  4. サイト スタイルに戻るには⁠⁠、[⁠⁠戻る⁠⁠] をクリ⁠⁠ックし⁠⁠、[⁠⁠サイト スタイル⁠⁠] をクリ⁠⁠ックします⁠⁠。もしくは⁠⁠、変更が完了したら⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックして [⁠⁠保存⁠⁠] をクリ⁠⁠ックし⁠⁠、エデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

引用ブロ⁠⁠ックの色のスタイルを設定する方法は次の通りです⁠⁠。

  1. ペ⁠⁠ージの編集中に⁠⁠、サイト スタイルを開き⁠⁠、[⁠⁠色⁠⁠] の横にある>をクリ⁠⁠ックします⁠⁠。
  2. カラ⁠⁠ー テ⁠⁠ーマにカ⁠⁠ーソルを合わせ [⁠⁠鉛筆⁠⁠] アイコンをクリ⁠⁠ックします⁠⁠。
  3. 引用ブロ⁠⁠ックセクシ⁠⁠ョンまでスクロ⁠⁠ールして⁠⁠、[⁠⁠テキスト⁠⁠] と [⁠⁠ソ⁠⁠ース⁠⁠] の色を変更します⁠⁠。
  4. [⁠⁠保存⁠⁠] をクリ⁠⁠ックして変更を保存し⁠⁠、そのまま編集を続けるか⁠⁠、[⁠⁠終了⁠⁠] をクリ⁠⁠ックしてから [⁠⁠保存⁠⁠] をクリ⁠⁠ックしてエデ⁠⁠ィタ⁠⁠ーを閉じます⁠⁠。

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

引用ブロ⁠⁠ックの外観をカスタマイズする方法は次の通りです⁠⁠。

  1. 引用ブロ⁠⁠ック エデ⁠⁠ィタ⁠⁠ーで⁠⁠、[⁠⁠デザイン⁠⁠] をクリ⁠⁠ックします⁠⁠。
  2. [⁠⁠ストロ⁠⁠ーク⁠⁠] の横で⁠⁠、ブロ⁠⁠ックの輪郭を描く実線または点線を有効にします⁠⁠。実線と点線の両方で⁠⁠、ストロ⁠⁠ークの太さを設定します⁠⁠。
  3. [⁠⁠ブレンド モ⁠⁠ード⁠⁠] ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックして⁠⁠、透明度の設定を選択します⁠⁠。こうしたエフ⁠⁠ェクトは⁠⁠、画像やその他のビジ⁠⁠ュアル コンテンツの前に引用ブロ⁠⁠ックを重ねる場合に最適です⁠⁠。
  4. [⁠⁠エレメント⁠⁠] または [⁠⁠背景⁠⁠] をぼかすには⁠⁠、[⁠⁠ぼかし⁠⁠] の横にあるトグルをオンに切り替え⁠⁠、スライダ⁠⁠ーを使用してぼかしのレベルを調整します⁠⁠。

この機能へのアクセス

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

ほとんどのテンプレ⁠⁠ートには⁠⁠、引用ブロ⁠⁠ックのスタイル オプシ⁠⁠ョンがあります⁠⁠。スタイル オプシ⁠⁠ョンのないテンプレ⁠⁠ートの場合⁠⁠、引用ブロ⁠⁠ックテキストは本文と同じスタイルを使用します⁠⁠。引用を目立たせる他の方法については⁠⁠、以下のヒントを参照してください⁠⁠。

引用ブロ⁠⁠ックの外観を変更するには⁠⁠、次のテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ーを微調整してください⁠⁠。

テンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ー 微調整オプシ⁠⁠ョン名

Adirondack

引用ブロ⁠⁠ック

Avenue

該当なし

Aviator family

引用フ⁠⁠ォント⁠⁠、引用テキスト

Bedford

引用のフ⁠⁠ォント⁠⁠、引用の色

Brine

引用ブロ⁠⁠ックセクシ⁠⁠ョン (⁠⁠配置⁠⁠、引用フ⁠⁠ォント⁠⁠、ソ⁠⁠ース フ⁠⁠ォント⁠⁠)

Farro

引用ブロ⁠⁠ックセクシ⁠⁠ョン (⁠⁠配置⁠⁠、引用フ⁠⁠ォント⁠⁠、ソ⁠⁠ース フ⁠⁠ォント⁠⁠)

Five

ブロ⁠⁠ック引用

Flatiron

引用のフ⁠⁠ォント⁠⁠、引用の色⁠⁠、インライン引用サイズ

Forte

引用ブロ⁠⁠ック

Galapagos

該当なし

Ishimoto

引用⁠⁠、引用のサイズ

Momentum

引用ブロ⁠⁠ック

Montauk

該当なし

Native

引用⁠⁠、引用のサイズ

Pacific

引用のフ⁠⁠ォント⁠⁠、引用の色

Skye

引用ブロ⁠⁠ック セクシ⁠⁠ョン (⁠⁠配置⁠⁠、フ⁠⁠ォント⁠⁠、最小フ⁠⁠ォント⁠⁠、引用の色⁠⁠)

Supply

該当なし

Tremont

引用のフ⁠⁠ォント⁠⁠、引用の最小フ⁠⁠ォント
Wells 引用⁠⁠、引用のサイズ
Wexley 引用のフ⁠⁠ォント

York

引用フ⁠⁠ォント⁠⁠、引用の拡大縮小⁠⁠、引用の最小値⁠⁠、引用テキストの色⁠⁠、引用の配置⁠⁠、引用マ⁠⁠ークの表示⁠⁠、引用元のフ⁠⁠ォント⁠⁠、引用元の色

引用をアニメ⁠ーシ⁠ョン化する

この機能へのアクセス

引用ブロ⁠ック アニメ⁠ーシ⁠ョンは⁠、創造エデ⁠ィタ⁠ーではサポ⁠ートされていません⁠。代わりに⁠、引用ブロ⁠ックはサイト全体のアニメ⁠ーシ⁠ョン設定に従います⁠。

引用ブロ⁠ックをアニメ⁠ーシ⁠ョン化する方法は次の通りです⁠。

  1. 引用ブロ⁠ック エデ⁠ィタ⁠ーで⁠、[⁠デザイン⁠] をクリ⁠ックします⁠。
  2. ドロ⁠ップダウン メニ⁠ュ⁠ーからエフ⁠ェクトを選択します⁠。オプシ⁠ョンを選択すると⁠、ペ⁠ージにプレビ⁠ュ⁠ーが表示されます⁠。

以下の選択肢があります⁠。

  • なし - サイト全体にアニメ⁠ーシ⁠ョンの設定があ⁠っても⁠、アニメ⁠ーシ⁠ョンは表示されません
  • サイトの既定 - テキストはサイト全体アニメ⁠ーシ⁠ョン設定に合わせます
  • フ⁠ェ⁠ード イン - テキストがフ⁠ェ⁠ード インする
  • スライド ア⁠ップ - テキストが下から上にスライドしする
  • フ⁠ォ⁠ーカス イン - ぼやけた文字が表示され⁠、その後焦点が合う
  • 滑り出し - テキストが中央から外側にスライドする

これは⁠、アニメ⁠ーシ⁠ョンでフ⁠ォ⁠ーカス インを使⁠った引用ブロ⁠ックの例です⁠。

Quote_block_animations_appear_when_the_block_loads.gif

引用を追加するその他の方法

サイトに引用を追加し⁠、独自の書式設定を行うためのその他のオプシ⁠ョンをいくつか紹介します⁠。

引用テキストとして書式設定する

テキスト ブロ⁠ック内で引用を目立たせるには⁠、テキストをハイライトさせ⁠、テキスト ブロ⁠ック エデ⁠ィタ⁠ーの引用アイコンをクリ⁠ックします⁠。これにより⁠、引用がインデントされます⁠。テンプレ⁠ートによ⁠っては⁠、側面に線が表示され⁠、テキストが斜体になる場合があります⁠。

テキストを折り返す

ペ⁠ージ上で目立つ雑誌風の引用文を作成するには⁠、1つのテキスト ブロ⁠ックを別のテキスト ブロ⁠ックで囲みます⁠。詳細については⁠、「⁠テキストを折り返してプル クオ⁠ートを作成する⁠」を参照してください⁠。

pull-quote.png

引用ブロ⁠ックと画像ブロ⁠ックのオ⁠ーバ⁠ーラ⁠ップ

創造エデ⁠ィタ⁠ーを使用している場合は⁠、画像ブロ⁠ックの上に引用ブロ⁠ックを配置して⁠、引用の画像背景を作成できます⁠。背後の画像ブロ⁠ックが隠れないように⁠、 ブロ⁠ックの背景を無効にしてください⁠。

クラシ⁠ック エデ⁠ィタ⁠ーでは⁠、ブロ⁠ックをオ⁠ーバ⁠ーラ⁠ップさせることはできません⁠。その代わりに⁠、テキストをオ⁠ーバ⁠ーレイさせた画像ブロ⁠ックを追加し⁠、そのテキストをプル クオ⁠ートのように見せるようにスタイルを設定します⁠。さまざまな画像ブロ⁠ック オプシ⁠ョンの例については⁠、「⁠画像ブロ⁠ック⁠」を参照してください⁠。以下は⁠、ポスタ⁠ー画像ブロ⁠ックを使用した例です⁠。

image-block-as-quote.png

見出しテキストとして書式設定する

テキストを目立たせるには⁠、引用テキストをテキスト ブロ⁠ックに追加し⁠、見出しの書式を設定します⁠。テキスト ブロ⁠ック エデ⁠ィタ⁠ーでテキストを強調し⁠、書式設定のドロ⁠ップダウン メニ⁠ュ⁠ーを使用して [⁠見出し2⁠] または [⁠見出し3⁠] を選択します⁠。次に⁠、[⁠サイト スタイル⁠] パネルの [⁠見出し2⁠] または [⁠見出し3⁠] オプシ⁠ョンを使用して⁠、テキストの外観を変更します⁠。

ヒント

検索エンジンでは⁠、見出しのコンテンツをインデ⁠ックス作成のキ⁠ーワ⁠ードが豊富な領域として認識するため⁠、引用を見出しとしてスタイル設定すると⁠、サイトのSEOが妨げられる可能性があります⁠。この回避策としておすすめするのは⁠、テンプレ⁠ートに引用ブロ⁠ック スタイルがなく⁠、引用のデザインを向上させることが主な目的である場合のみです⁠。

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

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

  • Squarespace Expertを雇う

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