バージョン7.0サイトの最小フォント サイズと最大フォント サイズを設定します。

すべてのSquarespaceテンプレートにはレスポンシブ デザインが組み込まれているため、サイトのテキストを画面ごとに最適化することができます。一部のテンプレートでは、タイトル、見出し、その他の重要なテキストの最大サイズと最小サイズを手動で設定することで、フォントのスケーリングを微調整することができます。

たとえば、見出し1を12～25ピクセルの範囲でスケーリングするように設定することができます。モバイル端末などの小さなブラウザーでは、ヘッダーの最小サイズは12ピクセルになります。ワイド スクリーン モニターなどの大きなブラウザーでは、ヘッダーは最大25ピクセルまで拡大できますが、それより大きくなることはありません。通常、ヘッダーは2つのフォント サイズの間のサイズで表示されます。

これらのルールは、次のテンプレート ファミリーで設定できます。

• Skye
• Tremont
• York

このガイドは、上記のバージョン7.0テンプレートを対象としています。バージョン7.1および他の7.0テンプレート ファミリーでのテキストのスケーリングの詳細については、「テキストの書式設定」を参照してください。

始める前に

• 最適な表示を実現するには、各ヘッダーの最小フォント サイズが本文テキストのフォント サイズよりも大きくなるようにしてください。
• 本文テキストなど、手動でスケーリングできないテキストもあります。
• 長い単語が折り返して表示されることはありません。小さなスペース (ブログ グリッドのサムネイル タイルなど) に長い単語が表示されている場合、単語の末尾が切り取られることがあります。このような場合は、最大サイズを小さくして、すべての単語がスペースに収まるようにしてください。
• モバイル サイトが正しく表示されない場合は、最小フォント サイズを小さくしてみてください。
• サイトのテキストのスタイルに関する一般的なヘルプについては、「フォントを変更する」を参照してください。

フォントのスケーリング サイズを設定する

テキストの最大サイズと最小サイズを手動で設定するには、次の手順に従います。

1. サイトにログインし、スケーリングしたいテキスト (見出し1のテキストなど) を含むページに移動します。
2. [サイト スタイル] パネルを開きます。
3. Yorkファミリーでは、そのテキスト タイプの [スケール] 微調整オプションがオンになっていることを確認してください。たとえば、見出し1のテキストのスケーリングを有効にするには、[見出し1をスケール変更] 微調整オプションにチェックを入れます。その他のテンプレートの場合は、この手順をスキップしてください。
4. そのテキスト タイプのフォント微調整オプション ([見出し1のフォント] など) をクリックし、[フォント サイズ] スライダーを使用して最大フォント サイズを設定します。
5. [最小] 微調整オプションを使用して、そのテキスト タイプの最小フォント サイズを設定します ([見出し1 最小] など)。モバイル端末で表示した場合でも、フォントがこのサイズより小さく表示されることはありません。
6. [保存] をクリックして変更を適用します。

スケーリング フォントをプレビューする

フォント サイズの最大値と最小値をプレビューする際に最良の結果を得るには、スマートフォンでサイトを開きながら、パソコンでフォント サイズを編集してください。サイト スタイルの変更を保存するたびにスマートフォンを更新します。この方法を使用すると、サイトが様々なデバイスでどのように見えるかを最も正確に確認することができます。

注: 端末別プレビューでは、スケーリングされたフォントが常に正確に表示されるとは限りません。ただし、端末別プレビューに表示されるスタイル強調ボックス内にテキストが収まっていれば、一般的に、モバイル端末でも適切に表示されます。

テンプレートごとの微調整オプション

利用可能な微調整オプションの完全なリストについては、テンプレートのガイドを参照してください。

• Skye
• Tremont
• York