画像のタイトルと説明の表示方法をカスタマイズします。
キャプションとは、画像に情報とコンテキストを追加する、テキストのタイトルと説明文のことです。キャプションには、独自のスタイル微調整オプションはありません。代わりに、サイト上の他のテキストの微調整オプションに従います。
画像キャプションのスタイルを設定する方法は、画像の場所と表示設定によって異なります。キャプションは通常、以下の3つの方法のいずれかで表示されます。
- キャプションを下に - ページ上の画像の下にテキストが表示されます。
- キャプション オーバーレイ - テキストは、常時、またはカーソルを合わせたときのみ画像上に表示されます。
- ライトボックス キャプション オーバーレイ - ライトボックスを有効にすると、クリックしたときに画像がポップアップに表示されます。カーソルを合わせると画像の上にキャプションが表示されます。
このガイドでは、サイト上のキャプションを表示するすべての画像のスタイル設定ルールについて説明します。
動画を見る
始める前に
- フォントと色には個別の微調整オプションがあります。
- キャプションはなるべく短くしましょう。特にキャプションが画像に重なる場合は、そうすることをおすすめします。一部のデバイスやブラウザーでは、長いキャプションは切り詰められる場合があります。
バージョン7.0の場合は、以下のようになります。
- 画像キャプションのタイトルには改行を追加できません。画像の説明文には改行を追加できます。
- 当社では、見出しやメタ テキストではないテキストを指すにあたり「本文」という用語を使用していますが、各テンプレートには独自の微調整オプション名があります。たとえば、Adirondackの場合、本文のフォントをコントロールする微調整オプションは [テキスト] と呼ばれます。Skyeでは [本文] と呼ばれます。詳細については、「テキストのスタイル設定」を参照してください。
- 一部のテンプレートには、1つの微調整オプションだけですべてのヘッダーの色またはすべてのヘッダーのフォントを制御するものもあります。このような場合、固有のヘッダー スタイル (見出し3など) に従ったキャプションは、一般的なヘッダー微調整オプションに従います。
7.0のサイトでキャプションのスタイル設定が難しい場合は、テスト ページで試してみることをおすすめします。次の手順に従ってください。
- ナビゲーションの [リンクなし] セクションにレイアウト ページを作成します。
- 見出し1、見出し2、見出し3、および本文を含むテキスト ブロックを追加します (少なくとも4行のテキストが必要です)。
- サイト スタイルを使用して、それぞれに個別のフォントと色を指定します。
- キャプションを見て、どのように変更されているかを確認します。
ギャラリー セクション
バージョン7.0はギャラリー セクションをサポートしていません。代わりにギャラリー ページを使用してください。
ギャラリー セクションの画像は説明文をサポートしており、セクション エディターで [キャプション] トグルがオンになっているときに表示されます。
すべてのレイアウトで、以下のようになります。
- フォント - [段落] に追従
- 色 - [段落: 中] に追従
- サイズ - 調整不可
- キャプションの配置 - 調整不可
以下の点に留意してください。
- 画像の説明では、改行はサポートされていません。
- キャプションは、すべての [グリッド] レイアウト、[スライドショー: シンプル] レイアウト、および [フル] レイアウトの各画像の下に表示されます。[スライドショー: リール] レイアウトでは、キャプションは中央の画像の下にのみ表示されます。
- キャプションはライトボックス ビューでは表示されません。
画像ブロック
キャプションを追加する代わりに、創造エディター セクションでテキスト ブロックを使用して、画像ブロックに隣接またはオーバーレイするテキストを追加します。
クラシック エディターでは、ほとんどの画像ブロック レイアウトが、独自のスタイル設定を持つタイトルとサブタイトルをサポートしています。これらのキャプションのスタイルの設定方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
ヒント: 創造エディター セクションに追加された画像ブロックには、組み込みのレイアウト オプションがありません。画像ブロックにキャプションを追加する代わりに、テキスト ブロックを使用して、画像ブロックに隣接またはオーバーレイするテキストを追加します。
クラシック エディター セクションに追加されたインライン レイアウトでは、画像の下のキャプションを、オーバーレイとして、またはライトボックス オーバーレイとして表示できます。テキスト ツールバーでは、キャプション テキストを書式設定できます。それぞれのスタイル設定ルールについては以下を参照してください。
キャプションを下に
インライン画像ブロックの下に表示されるキャプションの場合は、以下のようになります。
- フォント - [段落] に追従
- 色 - [色] で設定されたテキスト タイプの場合は [テキスト] 微調整オプションに追従
- サイズ - テキスト ツールバーで設定
キャプション オーバーレイ
インライン画像ブロックの上に常に、またはカーソルを合わせたときに表示されるキャプションの場合は、以下のようになります。
- フォント - [段落] に追従
- 色 - 常に白
- サイズ - テキスト ツールバーで設定
ライトボックス オーバーレイ
ライトボックスのポップアップ中にインライン画像ブロックの上に表示されるキャプションの場合は、以下のようになります。
- フォント - [フォント] に追従
- 色 - 常に白
- サイズ - [段落3] に追従
インライン レイアウトでは、画像の下のキャプションを、オーバーレイとして、またはライトボックス オーバーレイとして表示できます。それぞれのスタイル設定ルールについては以下を参照してください。
キャプションを下に
ほとんどのテンプレートで、インライン画像ブロックの下に表示されるキャプションの場合は、以下のようになります。
- フォント - 本文に追従
- 色 - 本文に追従
- サイズ - 調整不可
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
Bedford |
サイズ - 本文に追従 |
|
Five |
フォント - 常に黒、大文字 |
|
Pacific |
サイズ - 本文に追従 |
|
Skye |
フォント、色、サイズ - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従 |
|
York |
サイズ - 本文に追従 |
キャプション オーバーレイ
ほとんどのテンプレートで、インライン画像ブロックがページに表示されているときにその上に表示されるキャプションの場合は、以下のようになります。
- フォント - 本文に追従
- 色 - 常に灰色
- サイズ - 調整不可
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
Five |
フォント - 常に大文字 |
|
Skye |
フォント - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従 |
ライトボックス オーバーレイ
ほとんどのテンプレートで、ライトボックスのポップアップ中にインライン画像ブロックの上に表示されるキャプションの場合は、以下のようになります。
- フォント - 本文に追従
- 色 - 常に白
- サイズ - 調整不可
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
Adirondack |
フォント - 調整不可 |
|
Bedford |
フォント - 調整不可 |
| Five | サイズ - 本文に追従 |
|
Flatiron |
色 - 本文に追従 |
|
Pacific |
フォント - 調整不可 |
|
Skye |
フォント - [抜粋] 微調整オプションに追従 |
|
Tremont |
フォント - 調整不可 |
|
Wexley |
サイズ - 本文に追従 |
要約ブロック
要約ブロックは、すべてのデザイン (ウォール、リスト、カルーセル、グリッド) のキャプションをサポートします。
要約ブロックのキャプションのスタイルの設定方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
すべての要約ブロックのデザインで、以下のようになります。
- タイトルのサイズ - [段落2] に追従
- 説明文のサイズとメタのサイズ - 調整不可
- フォント - [段落] に追従
- 色 - [色] の [要約ブロック] 微調整オプションに追従
すべてのテンプレートで、以下のようになります。
- タイトルのサイズ、説明文のサイズ、およびメタのサイズ - 調整不可
- 説明文のフォント - 本文に追従
- 説明文の色 - 本文に追従
- タイトルの色 - テンプレートによって異なります。以下のリストを参照してください
ほとんどのテンプレートでは以下のようになります。
- メタ1および2のフォント - 本文に追従
- メタ1および2の色 - 本文に追従
- タイトルのフォント - 本文に追従
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
Adirondack |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Avenue |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Aviator |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Bedford |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Brine |
タイトルの色 - 本文に追従 |
|
Farro |
タイトルの色 - 本文に追従 |
|
Five |
タイトルの色 - [本文リンク] 微調整オプションに追従 ギャラリーとブログ:
イベント:
商品:
|
|
Flatiron |
タイトルの色 - [リンクの色] 微調整オプションに追従 |
|
Forte |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 |
|
Galapagos |
タイトルの色 - [リンクの色] 微調整オプションに追従 |
|
Ishimoto |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 |
|
Marquee (廃止) |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Momentum |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Montauk |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Native |
タイトルのフォント - [見出し1] に追従 |
|
Pacific |
タイトルのフォント - [要約ブロックのタイトルのフォント] 微調整オプションに追従 |
|
Skye |
タイトルのフォント - [リストのタイトル] 微調整オプションに追従 |
|
Supply |
タイトルの色 - [リンクの色] 微調整オプションに追従 |
|
Tremont |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 ギャラリーとブログ:
イベント:
商品
|
|
Wells |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 |
|
Wexley |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 |
|
York |
タイトルの色 - [本文リンクの色] 微調整オプションに追従 ギャラリーとブログ:
イベント:
商品:
|
Instagramブロック
Instagramブロックは、スライドショーおよびスタック デザインと、ライトボックスに表示したときのグリッド デザインのキャプションをサポートします。
キャプション テキストを調整する方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
スタック
各画像の下にスタックされるキャプションの場合は、以下のようになります。
- フォント - [段落] に追従
- 色 - [段落: 中] に追従
- サイズ - [段落2] に追従
スライドショー
スライドショーのキャプションは、常時、またはカーソルを合わせたときにオーバーレイとして以下のように表示されます。
- フォント - [段落] に追従
- 色 - 常に白
- サイズ - 調整不可
グリッド
グリッド キャプションはライトボックスで以下のようにオーバーレイ表示されます。
- フォント - [フォント] に追従
- 色 - 常に白
- サイズ - 調整不可
スタック
各画像の下にスタックされるキャプションの場合は、すべてのテンプレートで、以下のようになります。
- フォント - 本文に追従
- 色 - 本文に追従
- サイズ - 本文に追従
スライドショー
スライドショーのキャプションは、常時、またはカーソルを合わせたときにオーバーレイとして表示されます。すべてのテンプレートで、以下のようになります。
- フォント - 本文に追従
- 色 - 常に白
- サイズ - 調整不可
グリッド
グリッド キャプションはライトボックスでオーバーレイ表示されます。ほとんどのテンプレートでは以下のようになります。
- フォント - 本文に追従
- 色 - 常に白
- サイズ - 本文に追従
例外
キャプションのフォントとキャプションのサイズは、以下のテンプレート ファミリーでは調整できません。
- Adirondack
- Bedford
- Pacific
グリッド ギャラリー ブロック
グリッド ギャラリー ブロックのキャプション テキストの調整方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
バージョン7.1では、ブログ記事、商品アイテム、個別のイベントにのみギャラリー ブロックを追加できます。
グリッド ギャラリー ブロックのタイトルは画像の下に表示できます。タイトルと説明はライトボックスでオーバーレイ表示されます。
下のタイトル
グリッド ギャラリー ブロックの画像の下に表示されるタイトルの場合は、以下のようになります。
- フォント - [段落] に追従
- 色 - [色] の [段落: 中] に追従
- サイズ - 調整不可
ライトボックス オーバーレイ
ライトボックスのポップアップ中にグリッド ギャラリー ブロックの画像の上に表示されるキャプションの場合は、以下のようになります。
- タイトルのフォント - [見出し] に追従
- タイトルの色 - 常に白
- タイトルのサイズ - 調整不可
- 説明文のフォント - [フォント] に追従
- 説明文の色 - 常に白
- サイズ - 調整不可
グリッド ギャラリー ブロックのタイトルは画像の下に表示できます。タイトルと説明はライトボックスでオーバーレイ表示されます。
下のタイトル
すべてのテンプレートで、グリッド ギャラリー ブロックの画像の下に表示されるタイトルの場合は、以下のようになります。
- フォント - 本文に追従
- 色 - 本文に追従
- サイズ - 調整不可
ライトボックス オーバーレイ
ほとんどのテンプレートで、ライトボックスのポップアップ中にグリッド ギャラリー ブロックの画像の上に表示されるキャプションの場合は、以下のようになります。
- タイトルのフォント - [見出し1] に追従
- タイトルの色 - 常に白
- タイトルのサイズ- 本文に追従
- 説明文のフォント - 本文に追従
- 説明文の色 - 常に白
- 説明文のサイズ - 本文に追従
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
Adirondack |
タイトルのサイズ - 調整不可 |
|
Bedford |
タイトルのサイズ - 調整不可 |
|
Five |
タイトルのサイズ - [見出し1] に追従 |
|
Flatiron |
説明文の色 - 本文に追従 |
|
Galapagos |
タイトルの色 - [見出し1] に追従 注: サイト スタイルでカスタム見出しを有効にする |
|
Pacific |
タイトルの色: [見出し1] に追従 |
|
Skye |
タイトルのフォント - [リストのタイトル] 微調整オプションに追従 注: リストのタイトルとタイトルの色の微調整オプションは、ブログ ページを表示しているときにのみ使用できます。 |
|
Tremont |
説明文のフォント - 調整不可 |
|
York |
タイトルの色 - [見出し1] に追従 |
ヒント: 一部のテンプレートでは、[タイトルの色] 微調整オプションはブログ投稿のタイトルにも影響します。見やすくするには、[タイトルの色] をサイトの背景色とは違う色にしてください。
スライドショー ギャラリー ブロック
スライドショー ギャラリー ブロックのキャプション テキストの調整方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
バージョン7.1では、ブログ記事、商品アイテム、個別のイベントにのみギャラリー ブロックを追加できます。
スライドショー ギャラリー ブロックのキャプションはオーバーレイとしてのみ表示できます。スライドショー ギャラリー ブロック上に表示されるキャプションの場合は、以下のようになります。
- タイトルのフォント - [段落] に追従
- タイトルの色 - 常に白
- タイトルのサイズ - 調整不可
- 説明文のフォント - [段落] に追従
- 説明文の色 - 常に白
- サイズ - 調整不可
スライドショー ギャラリー ブロックのキャプションはオーバーレイとしてのみ表示できます。ほとんどのテンプレートで、スライドショー ギャラリー ブロックの上に表示されるキャプションの場合は、以下のようになります。
- タイトルのフォント - 本文に追従
- タイトルの色 - 常に白
- タイトルのサイズ - 調整不可
- 説明文のフォント - 本文に追従
- 説明文の色 - 常に白
- サイズ - 調整不可
Skyeファミリーでは、以下のようになります。
- タイトルのフォント - 本文に追従
- 説明文のフォント - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従
スタック ギャラリー ブロック
スタック ギャラリー ブロックのキャプション テキストの調整方法は、サイトが使用しているSquarespaceのバージョンによって異なります。
バージョン7.1では、ブログ記事、商品アイテム、個別のイベントにのみギャラリー ブロックを追加できます。
スタック ギャラリー ブロックのキャプションは、画像の下にのみ表示でき、以下のようになります。
- タイトルのフォント - [見出し] に追従
- タイトルの色 - [見出し (中)] に追従
- タイトルのサイズ - [見出し3] に追従
- 説明文のフォント - [段落] に追従
- 説明文の色 - [段落 (中)] に追従
- 説明文のサイズ - [段落2] に追従
スタック ギャラリー ブロックのキャプションは、画像の下にのみ表示できます。ほとんどのテンプレートでは以下のようになります。
- タイトルのフォント - [見出し3] に追従
- タイトルの色 - [見出し3] に追従
- タイトルのサイズ - [見出し3] に追従
- 説明文のフォント - 本文に追従
- 説明文の色 - 本文に追従
- 説明文のサイズ - 本文に追従
ヒント: Galapagosヘッダーのスタイルを設定するには、サイト スタイルの [カスタム見出し] を有効にします。
Skyeファミリーでは、以下のようになります。
- タイトルの色 - 本文ギャラリー ブロックのタイトルの微調整オプションに追従
- 説明文のフォント - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従
- 説明文の色 - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従
- 説明文のサイズ - 画像およびギャラリー ブロックのキャプションの微調整オプションに追従
カルーセル ギャラリー ブロック
バージョン7.1では、ブログ記事、商品アイテム、個別のイベントにのみギャラリー ブロックを追加できます。
カルーセル ギャラリー ブロックにはキャプションが表示されません。
ギャラリー ページ
バージョン7.1はギャラリー ページをサポートしていません。代わりにギャラリー セクションを使用してください。
バージョン7.0のすべてのテンプレートには、組み込みのギャラリー ページがあります。多くのテンプレートには固有のギャラリー ページがありますが、スライドショーまたはグリッドとして表示できる標準のギャラリー ページを使用するテンプレートもあります。
固有のギャラリー ページ
以下のテンプレート ファミリーには固有の (テンプレート固有の) ギャラリー ページがあります。各テンプレートのギャラリー ページについては、以下のリンクにアクセスしてください。ここにリストされていないテンプレートには、標準のギャラリー ページが付きます。
標準のギャラリー ページ
標準のギャラリー ページがあるほとんどのテンプレートでは、以下のようになります。
グリッド形式:
- タイトルのフォント - [見出し1] に追従
- タイトルの色 - 常に白
- タイトルのサイズ- 本文に追従
- 説明文のフォント - 本文に追従
- 説明文の色 - 常に白
- 説明文のサイズ - 本文に追従
スライドショー形式:
- タイトルのフォント - 本文に追従
- タイトルの色 - 常に白
- タイトルのサイズ - 調整不可
- 説明文のフォント - 本文に追従
- 説明文の色 - 常に灰色
- サイズ - 調整不可
注: 本文の微調整オプションにより、タイトルと説明の間のスペースが調整されます。
ただし、例外があります。以下のテンプレート ファミリーの表を確認してください。
|
テンプレート ファミリー |
グリッド形式 |
スライドショー形式 |
|
Adirondack |
タイトルのフォント - 調整不可 |
タイトルのフォント - [見出し1] に追従 注: 常に上部中央に表示 |
|
Bedford |
タイトルのサイズ - 調整不可 |
|
|
Five |
タイトルのサイズ - [見出し1] に追従 |
|
|
Galapagos |
タイトルの色 - [見出し1] に追従 注: サイト スタイルで [カスタム見出し] を有効にしてください。 |
|
|
Marquee (廃止) |
タイトルのフォント - 本文に追従 |
|
|
Native |
|
注: 常に上部に表示 |
|
Pacific |
タイトルの色 - [見出し1] に追従 |
|
|
Skye |
タイトルのフォント - [リストのタイトル] 微調整オプションに追従 注: リストのタイトルとタイトルの色の微調整オプションは、ブログ ページを表示しているときにのみ使用できます。 |
タイトルのフォント - [リストのタイトル] 微調整オプションに追従 注: リストのタイトルとタイトルの色の微調整オプションは、ブログ ページを表示しているときにのみ使用できます。 |
|
York |
タイトルのフォント - [見出し1] に追従 |
|
プロジェクト ページ
バージョン7.1はプロジェクト ページをサポートしていません。代わりにギャラリー セクションを使用してください。
プロジェクト ページはテンプレート固有のポートフォリオ レイアウトで、Yorkファミリー (Artesia、Flores、Harris、Jasper、Jones、Lange、Shibori、York) で利用できます。プロジェクト ページでは、画像のタイトルと説明文のテキストが画像の横または下に表示されます。
サイト スタイルの[プロジェクト: フォント] セクションにある微調整オプションを使用して、画像のタイトルと説明文のテキストのスタイルを設定します。フォントを拡大縮小して表示方法を制御することもできます。