Brineテンプレート ファミリーで見つかった一般的な問題を修正しました。

このテンプレートでよく生じる問題について説明します。これらの一部は、バグまたは既知の問題です。Squarespaceバージョン7.0は引き続きサポートされていますが、Squarespaceでは最新のプラットフォームであるバージョン7.1に重点を置いているため、バグや問題の修正の優先順位は低くなっています。弊社の更新ツールを使用することで、バージョン7.0サイトをバージョン7.1に移行できます。

一般的なヘルプについては、Brineテンプレート ガイドにアクセスするか、Brineのテンプレートのリストを確認してください。

ヘッダーにボタンを追加する

ヘッダーにボタンを追加すると、特定のページにトラフィックを誘導するなど、特定の行動を促すことができます。

ヘッダーにボタンを追加する方法はいくつかあります。

• ナビゲーションを使用する: ナビゲーションにコール トゥ アクションを作成するには、セカンダリ ナビゲーションにリンクを1つだけ保持し、セカンダリ ナビゲーションのスタイルをボタンとして設定します。メイン ナビゲーションのスタイルは他のスタイルで設定します。
• イントロダクション エリアを使用する: イントロダクション エリアにボタン ブロックを追加して、個々のページにコール トゥ アクションを作成します。テキストやその他のブロックを追加して、メッセージを強調表示します。

バナー画像または動画が表示されない

Brineにおいて、バナーはほとんどのページ タイプで表示されますが、以下についてはサポートされていません。

• 個々のブログ投稿、商品、イベント詳細ページ
• カバー ページ
• メイン インデックス ページに追加されたアイキャッチ画像。代わりに、インデックス内のコンテンツ セクションにアイキャッチ画像を追加してください。
• 訪問者の接続速度とブラウザーのバージョンによっては、モバイルで動画バナーが表示されない場合があります。動画バナーを読み込めないときにモバイル用代替画像が表示されるように設定します。

ページがバナーをサポートしているのにバナーが表示されない場合は、次のトラブルシューティング手順を実行します。

1. ページ設定で [メディア] タブをクリックします。
2. バナー画像は、[画像] をクリックしてください。動画バナーについては、[動画] をクリックしてください。
3. 画像または動画があることを確認します。
4. [保存] をクリックしてページを更新します。

それでもバナーが表示されない場合は、次の手順に従います。

1. サイト スタイルで、[メイン] セクションまでスクロールします。
2. [イントロ パディング (背景画像あり)] を増やします。
3. [メイン: オーバーレイ] セクションで、[オーバーレイの色] が完全に不透明になっていないことを確認します。
4. [保存] をクリックしてページを更新します。

バナーがフルブリードで表示されない

通常、バナーはフルブリードで表示されます。つまり、バナーはブラウザーの端まで広がります。そうではない場合は、サイトのレイアウトを変更してください。

1. サイト スタイルで、[サイト] セクションまでスクロールします。
2. [デザイン: 全幅] または [デザイン: 全体背景] を選択します。
3. [サイト: 境界線] セクションで、[境界線を表示] のチェックが外れていることを確認します。
4. [保存] をクリックしてページを更新します。

ブログ投稿にコメント セクションがない

Brineでは、個々のブログ投稿でコメントを有効にしても、ブログのコメントは既定で無効になっています。

サイトでコメントを有効にするには、次の手順に従います。

1. [ブログ設定] パネルを開きます。
2. [コメント設定] をクリックします。
3. [すべてのコメントを有効化] にチェックを入れます。コメント設定がさらに表示されます。

詳細については、「ブログのコメントとシンプルな「いいね！」」をご参照ください。

イベント ページ カレンダーの月のテキストを変更する

イベント ページのカレンダー レイアウトでは、月の名前がカレンダーの上部中央に表示されます。月のテキストのフォント、サイズ、色は [見出し1] 微調整オプションに従います。これらの微調整オプションを調整するには、次の手順に従います。

1. サイト上の [見出し1] テキストを含む別のページに移動します。
2. [Webサイト] パネルに戻り、[デザイン]、[サイト スタイル] の順にクリックします。
3. [コンテンツ: フォント] および [コンテンツ: 色] で、[見出し1] 微調整オプションを見つけます。
4. [保存] をクリックし、イベント ページに戻って変更内容を確認します。

列が間違った場所に表示される

コンテンツはめ込みを含む単一列は、フローティング ブロックを避けて回り込みます。

フローティング ブロックの高さが単一列のコンテンツよりも大きい場合、下の複数列のコンテンツのレイアウトが崩れる可能性があります。これを調整するには、複数列のコンテンツの上にスペース調整ブロックを追加します。

フルページの背景画像を作成する

インデックス ページを使用すると、背景画像が表示された単一ページを作成できます。

1. インデックス ページを作成します。
2. コンテンツ セクションを追加します。
3. コンテンツ　セクションにアイキャッチ画像を追加します。これによって、背景画像が作成されます。
4. コンテンツ セクションにページ コンテンツを追加します。これはアイキャッチ画像にオーバーレイされます。
5. 高さを大きくするには、下部のテキスト ブロックにスペースを追加します。

スライドショー バナーを作成する

インデックス ページを使用すると、スライドショー ページのようなバナーを作成できます。

1. インデックス ページを作成します。
2. [セクションを追加] をクリックして最初のセクションを作成します。
3. [ギャラリー] を選択し、コレクションに複数の画像を追加します。
4. 最初のセクションとして、複数の画像を含むギャラリー インデックス セクションを追加します。
5. サイト スタイルの [インデックス: ギャラリー] セクションで、[レイアウト: スライドショー] を選択します (これは、サイト上のすべてのギャラリー インデックス セクションに影響します)。
6. [インデックス: スライドショー ギャラリー] セクションで、[ギャラリーの自動再生] にチェックが入っていることを確認します。
7. ギャラリー インデックス セクションの下にコンテンツ セクションを追加し、そこにページ コンテンツを追加します。

パララックス スクロールを無効にする

その方法は以下の通りです。

1. バナー画像があるページに移動します。
2. サイト スタイルで、[メイン: オーバーレイ] セクションまでスクロールします。
3. [パララックスを有効化] のチェックを外します。
4. [保存] をクリックしてページを更新します。

これはサイト全体に影響します。

ドロップダウン メニューがフッター ナビゲーションに表示されない

ドロップダウンは、フッター ナビゲーションのドロップダウン メニューとして表示されません。代わりに、それらを個別の列として表示し、ドロップダウン タイトルを列ヘッダーとして使用できます。

ナビゲーションにドロップダウン メニューを追加するには、メイン ナビゲーションまたはセカンダリ ナビゲーションにドロップダウンを追加します。

ヘッダーのドロップダウン メニューが途切れて表示される

サイトの右側にある最後のナビゲーション リンクがドロップダウン メニューである場合、ページ タイトルが途切れて表示されることがあります。これは通常、小さな画面 (タブレットなど) で表示した場合か、サイトのパディングのスタイル微調整オプションを小さくした場合に発生します。この問題を解決するには、次の手順に従います。

1. [ページ] パネルで、ドロップダウン メニューを構成しているドロップダウンを探します。
2. [メイン ナビゲーション] セクションの別の位置にドロップダウンを移動します。ドロップダウンが最後の位置以外にあれば、ページ タイトルが完全に表示されます。

フッターの背景色がページごとに異なる

これは、フッターの背景色が部分的または完全に透明な場合に発生します。アイキャッチ画像がないページでは、白い背景の上にフッターの色が表示されます。アイキャッチ画像があるページでは、フッターの背景色がメイン コンテンツ エリアの色の上に表示されます。

この問題を解決するには、次の手順に従います。

1. サイト スタイルで、[フッター] セクションまでスクロールします。
2. [背景色] が完全に不透明であることを確認してください。

フッターの中央ブロック エリアが表示されない

中央ブロック エリアからすべてのコンテンツを削除すると、列ビューでその注釈が消えることがあります。これを修正するには、一時的にスタック レイアウトに切り替えます。

1. サイト スタイルで、[フッター] セクションまでスクロールします。
2. [レイアウト: スタック] を選択します。
3. サイト スタイルを終了します。
4. [フッター中央ブロック] エリアにコンテンツを追加します。
5. サイト スタイルを再度開き、[レイアウト: 列] 選択します。
6. [保存] をクリックします。

ヘッダー エレメントが正しく表示されない

タブレットや小さいブラウザーの場合、ヘッダー内の同じエリアに表示するように設定されているエレメントが多すぎると、重なって表示される可能性があります。

最良の結果を得るには、各エレメントをヘッダーの異なる部分に配置します。サイト スタイルの [ヘッダー: レイアウト] セクションで、各エレメントを表示する場所を選択します。

ヘッダー オプションがサイト スタイルに表示されない

一部のエレメントの微調整オプションは、それらのエレメントがサイトに存在する場合にのみサイト スタイルに表示されます。

• ナビゲーション - メイン ナビゲーションまたはセカンダリ ナビゲーションにページまたはリンクを追加すると、微調整オプションが表示されます。
• ショッピング カートと顧客用アカウント - ストア ページを作成すると、微調整オプションが表示されます。エクスプレス チェックアウトは無効にする必要があります。
• タグライン - タグラインを追加すると、微調整オプションが表示されます。
• ヘッダー: 下部 - このセクションは、[レイアウト: ヘッダー] セクションでヘッダーの下半分に1つ以上のエレメントを追加すると表示されます。
• ヘッダー: 上部 - このセクションは、[レイアウト: ヘッダー] セクションでヘッダーの上半分に1つ以上のエレメントを追加すると表示されます。
• イントロダクション エリア - イントロダクション エリアをサポートするページを開くと、微調整オプションが表示されます。
• バナー - バナーをサポートしているページを開くと、微調整オプションが表示されます。

見出しが特定の幅で2行に分割される

Brineファミリーでは、ブラウザーの幅が約1400ピクセルの場合、一部の見出しが2行に分割されますが、約1120ピクセルでは1行に戻ります。これはテンプレートのデザインの一部です。

モバイルでアイコンとサイト タイトルが重なって表示される

モバイル ナビゲーション バーのエレメントが重なって表示されている場合は、1つまたは複数のエレメントを他のナビゲーション バーに移動します。

たとえば、☰を上部のナビゲーション バーから下部のナビゲーション バーに移動するには、次の手順に従います。

1. サイト スタイルで、[モバイル: メニュー アイコン] セクションまでスクロールします。
2. [位置] を [下] (左、右、または中央) に変更します。

重なって表示されているエレメントについて、これらの手順を繰り返します。

インデックス セクションがブラウザーの高さで表示されない

一部またはすべてのコンテンツ セクションをブラウザーの高さで表示するように設定するには、次の手順に従います。

1. サイト スタイルで、[インデックス: ページ] セクションまでスクロールします。
2. [最小高さを適用] を使用して、影響を受けるセクションを設定します。
3. [最小高さ] を100vhに設定します。

セクションがブラウザーの高さいっぱいに表示されない場合は、次の手順に従います。

• ご希望の見た目になるまで、[パディング (オーバーレイ ページ)] と [パディング] を調整してみてください。
• セクション コンテンツ (パディングを含む) がブラウザーの高さよりも大きい場合、元の高さのままになります。
• [境界線を左右反転して複製] 微調整オプションは、最初のセクションの表示にも影響する場合があります。

ギャラリー インデックス セクションの場合

• レイアウト: スライドショー - 高さを手動で設定するには、[固定の高さを使用] にチェックを入れます。
• 高さはギャラリーの画像の数とサイズによって自動的に設定されます。

インデックス ページの左右反転して複製された境界線の色が正しくない

Brineの左右反転して複製された境界線の色はページと同じです。これを設定するには、サイト スタイルの [メイン] セクションで [色] を使用します。

画像がサイトの幅で表示されない

画像ブロックはコンテンツはめ込みの設定に従いません。代わりに、サイトの幅で表示されます。サイトの幅は、サイト スタイルの [サイト] セクションの [幅] で調整します。

また、画像ブロック エディターの [引き伸ばす] にチェックを入れて、画像がブロックの幅いっぱいに表示されるようにすることもできます。

ヒント: 背景画像があるレイアウト ページ セクション、またはスライドショー ギャラリー ページ セクションを追加して、Brineのインデックス ページにフルブリード画像を作成します。

モバイル用情報バーが重なって表示される

サイト ヘッダーがモバイル用情報バーと重なっていると、訪問者がサイトのコンテンツを閲覧できなくなる可能性があります。これは、[モバイルの上部を固定] スタイル微調整オプションとモバイル用情報バーの両方が有効になっている場合に発生します。この問題を解決するには、次の手順に従います。

1. サイト スタイルで、[モバイル: 上部] セクションまでスクロールします。
2. [モバイルの上部を固定] 設定のチェックが外れていることを確認します。

[モバイルの上部を固定] 微調整オプションをそのままにしておきたい場合は、代わりにモバイル用情報バーを削除できます。

モバイル サイトが横にスクロールする

ページを拡大すると、横スクロール バーが表示される場合があります。モバイル ブラウザーを更新して、ズームをリセットしてみてください。

それでも問題が解決しない場合は、サイトのサイド パディングが17ピクセル未満である可能性があり、モバイル サイトの幅がブラウザー ウィンドウよりも広く表示される可能性があります。この問題を解決するには、次の手順に従います。

1. サイト スタイルで、[サイト] セクションまでスクロールします。
2. [サイド パディング] が17ピクセル以上であることを確認します。

モバイル用スタイルが表示されない

モバイル用スタイル設定がモバイル端末および端末別プレビューに表示されない場合は、非常に狭いブラウザーでのみサイトがモバイル ビューに切り替わっている可能性があります。切り替える幅をリセットするには、次の手順に従います。

1. サイト スタイルで、[モバイル] セクションまでスクロールします。
2. [モバイル用分断点] が640ピクセル以上に設定されていることを確認します。
3. [保存] をクリックします。

ナビゲーション バーが予期しない色になる

下部のナビゲーション バーの不透明度を調整した場合、下部までスクロールしたときのナビゲーション バーの色は設定によって変わります。サイトの境界線がある場合は、その色の上に境界線が表示されます。境界線がない場合は、次のようになります。

• ページ バナーがある場合、サイトの背景色の上に表示されます。
• バナーがない場合、フッターの背景色の上に表示されます

パララックス画像の切り抜き量が多い

[メイン: オーバーレイ] セクションで、[パララックス スマート クロップ] にチェックを入れます。チェックを入れると、パララックス表示に必要な最低限の量だけバナー画像が切り抜かれます。

モバイル端末でサイト タイトルの表示方法が異なる

端末に応じてサイト タイトルの表示方法を変更することができます。テンプレートのカスタマイズ可能なモバイル用スタイルを使用して、コンピューターとモバイルで異なるフォント スタイルを設定します。

デバイス間でブランディングの一貫性を保つには、サイト スタイルの [モバイル: ブランディング] セクションと [ヘッダー: ブランディング] セクションで同じフォント スタイルを選択します。

インデックス ページで上部のヘッダーのソーシャル アイコンが正しい色で表示されない

インデックスの最初のセクションがギャラリーで、[最初のインデックス ギャラリーのオーバーレイ ヘッダー] にチェックを入れている場合、ヘッダー内のソーシャル アイコンは、自動的に [ソーシャル アイコン] の [色 (オーバーレイ)] 微調整オプションに従います。ただし、この微調整オプションは、[ヘッダー: レイアウト] の [ソーシャル アイコンの位置] を下部のヘッダー オプションのいずれかに設定した場合にのみ表示されます 。その結果、上部のヘッダーに配置されたソーシャル アイコンは予期していない色になり、変更できなくなる可能性があります。

この色の微調整オプションを変更するには、[ヘッダー: レイアウト] の [ソーシャル アイコンの位置] を一時的に下部ヘッダー オプションのいずれかに設定します。色を変更したら、ソーシャル アイコンを上部のヘッダーに戻します。

テキストの幅が狭く、中央に配置される

単一列に特定のブロックがある場合、ブロックは自動的にページの中央にはめ込まれ、両側に空白が設定されます。これはコンテンツはめ込みと呼ばれます。

コンテンツはめ込みを削除するには、サイト スタイルの [メイン] セクションで [コンテンツはめ込み] を0に設定します。