Montaukテンプレート ファミリーのスタイルと機能を紹介します。
Montaukテンプレート ファミリー (Julia、Kent、Montauk、Om) は、ページのバナーと用途の広いサムネイル ナビゲーション インデックスを備えており、情報、商品、またはラブ ストーリーにスポットライトを当てます。
このガイドでは、Montaukファミリーの機能とデザイン オプションについて説明します。[サイト スタイル] 微調整オプション、および [サイト スタイル] パネルでこれらのオプションが表示されるセクションを太字で示しています。
サポートされているページ
Montaukでは、次のページ タイプがサポートされています。
- アルバム ページ
- ブログ ページ - リスト
- カバー ページ
- イベント ページ
- ギャラリー ページ - スタック
- インデックス ページ - グリッド
- レイアウト ページ
- ストア ページ - クラシック
ヘッダー
訪問者は、上部のヘッダーを使用してサイトを移動します。Montaukの場合、ヘッダーにはサイトのタイトルまたはロゴ、上部ナビゲーション リンク、およびヘッダー サブタイトルと呼ばれるカスタマイズ可能なエリアがあります。
- [オプション] の [キャンバス スタイル] 微調整オプションでレイアウトを設定します。
- 左右のレイアウトの場合は、[オプション] の [スタック ナビゲーション] 微調整オプションを使用して、ナビゲーション リンクをスタックします。
- ヘッダーの間隔とナビゲーション リンクの間隔は、[サイズと値] 微調整オプションで変更します。
ヘッダーのサブタイトルに表示する内容を選択するには、[オプション] の [ヘッダーのサブタイトル] 微調整オプションを使用します。
- [住所] には、[ビジネスに関する情報] の [所在地] フィールドの住所と電話番号が表示されます。
- [タグライン] には、サイトのタグラインが表示されます。
- テキストやその他のコンテンツを追加するには、[カスタム] を選択します。サイト スタイルを終了し、プレースホルダーの [ここにカスタム テキストを入力] テキストをダブルクリックしてブロックに置き換えます。
境界線
サイト全体の周囲と、メイン コンテンツの上部および下部に境界線を追加します。
- [色] の [ページの境界線の色] 微調整オプションで色を設定します。
- [オプション] の [ページの境界線] 微調整オプションで太さを設定します。
- 境界線を非表示にするには、[オプション] の [ページの境界線: なし] 微調整オプションで選択します。
- [キャンバス スタイル] が [奥付のロゴ (左)] または [奥付のロゴ (右)] に設定されている場合、外側の境界線は表示されません。
背景
サイト スタイルの [色] セクションで、以下を行います。
- [サイトの背景] でサイトの背景色を設定するか、[サイトの背景画像] で背景画像を追加します。
- [キャンバスの背景] で、メイン コンテンツ エリアとサイト ヘッダーの背景を設定します。
- 背景画像が読み込まれる前に、サイトの背景色が一時的に表示される場合があります。
- 以下に示すように、[キャンバスの背景] の不透明度スライダーを使用して、背景が透けて見えるようにします。
ヒント: 境界線はキャンバスの周囲に表示されます。
フッター
Montaukには3つのフッターがあり、ブロックを使用してカスタマイズできます。
[ページ フッター] は個々のページでそれぞれ異なります。
- コレクション アイテム (ブログ投稿など) にはそれぞれ独自のフッターがあります。
- インデックスから開いたギャラリー ページとレイアウト ページには、ページ フッターは表示されません。
[サイト全体のフッター] は以下の2つがあります。
- 情報フッター - [オプション] の [情報フッターを非表示] 微調整オプションで表示するかどうかを選択します。[ソーシャル アイコンを非表示] で、組み込みのソーシャル アイコンを非表示にします。
- 下部フッター
ページのバナー
ブログ、イベント、インデックス、およびレイアウト ページの上部にテキスト オーバーレイのあるバナーを作成できます。ページ設定にアイキャッチ画像や動画URLを含むバナーを追加します。
- サイト スタイルの [オプション] セクションを使用して、バナー、ページ タイトル、および仕切り線を表示するかどうかを選択します。
- インデックスからレイアウト ページを開いた場合、バナーは表示されません。
- 動画バナーを表示するには、モバイル用代替画像が必要です。
幅と高さ
幅と高さは固定されます。
- 幅 - ページのバナーは常にキャンバス エリアの幅で表示されます。
- 高さ - 高さは画像 (動画バナーの場合はモバイル用代替画像) によって設定されます。これは、組み込みの画像エディターを使用して変更できます。すべてのバナー画像の縦横比を同じにして、統一感が出るようにすることをおすすめします。
バナーのテキスト
ページのタイトルと説明をバナーの上に表示できます。
- テキストを表示するには、ページにバナー画像または動画がある必要があります。
- 説明は、幅が767ピクセル未満のブラウザーでは表示されません。
- テキストの色はキャンバスの背景 ([色] の [キャンバスの背景]) と一致します。
- [タイポグラフィー] の [ページ タイトル] と [ページの説明] 微調整オプションでフォントのスタイルを設定します。
- ページ タイトルは、幅の狭いブラウザーでは固定サイズになります。
- 検索結果に別のテキストを使用するには、SEOタイトルと説明を追加します。
すべてのページのテキストを非表示にするには、[ページのバナーを非表示にする] 微調整オプションにチェックを入れます。ページ設定から個々のページの説明を削除することもできます。
ブログ ページ
Montaukのブログ ページは、垂直に積み上げられた投稿のリストとして表示されます。
ランディング ページでは、次のようになります。
- ページのアイキャッチ画像はバナー画像を作成します。
- 日付と投稿者名は、各投稿の上に表示されます。その他のメタデータは下に表示されます。
- ハイライトされた画像、動画、ギャラリー ブロックは、抜粋のある投稿の投稿タイトルの下に表示されます。
- 抜粋には [続きを読む] のリンクが表示されます。
- 個々の投稿の完全な内容は、抜粋なしで投稿のタイトルの下に表示されます。
- ブログ ページでは、サイドバー、バナー、ページ フッターがサポートされています。
個々の投稿では、次のようになります。
- ブログ ページのアイキャッチ画像はバナー画像を作成します。
- 日付と投稿者名は、各投稿の上に表示されます。その他のメタデータは下に表示されます。
- 前の投稿と次の投稿へのナビゲーションはコメントの下に表示されます。
ブログ ページのスタイルを設定する
投稿タイトル、テキスト、メタデータの色を変更するには、[色] の [見出し1の色]、[テキストの色]、[ブログのメタの色] 微調整オプションを使用します。
サイト スタイルの [ブログ スタイル] セクションで、以下を行います。
- [記事の投稿者を非表示にする] で投稿者を表示するかどうかを選択します。
- [ブログ投稿のスペース] で投稿のスペースを変更します。
- [ブログ投稿のタイトル] でタイトルのフォントを変更します。
ブログ サイドバー
ランディング ページと投稿にはサイドバーが表示されます。カスタマイズはブロックを使用して行います。サイトに複数のブログがある場合は、すべてのブログに同じサイドバーが表示されます。サイドバーはページとともに上にスクロールします。
サイト スタイルの [ブログ スタイル] セクションで、以下を行います。
- [ブログのレイアウト] で、サイドバーを有効にし、表示する場所を選択します。
- サイドバーを非表示にするには、[ ブログのレイアウト: 中央] を選択します。
- [ブログ サイドバーの幅] でサイドバーのサイズを設定します。
ヒント: 最初に有効にしたときにサイドバーが空白の場合は、サイト スタイルを終了し、ブログ ページの上隅にカーソルを合わせて、[サイドバー コンテンツを編集] の注釈をクリックします。
ギャラリーページ
Montaukのギャラリー ページでは、画像や動画が縦に積み重なります。片側にはページ タイトルと説明が表示され、反対側には画像が表示されます。以下の [インデックスのスタイル] 微調整オプションでギャラリー ページのスタイルを設定します。
- [プロジェクト レイアウト] でレイアウトを反転させます。
- [インデックスのサイドバーの幅] を調整して画像サイズを変更します。
ギャラリー テキスト
ページ タイトルと説明の場合:
- [インデックスのスタイル] の [インデックス サムネイルのタイトル] 微調整オプションでタイトルのフォントを設定します。
- [タイポグラフィー] の [見出し2] 微調整オプションでタイトルのサイズを制御します。
- 説明文は [本文] 微調整オプションに従います。
- 検索結果に別のテキストを使用するには、SEOタイトルと説明を追加します。
- テキストを非表示にするには、ページ設定からタイトルまたは説明を削除します。これを行う場合は、SEOタイトルと説明を追加します。これらはサイトには表示されませんが、SEOに役立ちます。
画像のタイトルと説明は各画像の下に表示されます。
- テキストは [本文] 微調整オプションに従います。
- 画像のタイトルは常に太字です。
- テキストを非表示にするには、画像のエディターでタイトルまたは説明を削除します。
ギャラリー ページに関するその他のヘルプ
- 下部にページ フッター付きのカスタム コンテンツを追加します。
- インデックスからページを開くと、下部にナビゲーションが表示されます。
- Montaukでは、クリックスルーURL、ディープリンクURL、またはライトボックス機能はサポートされていません。
- ページのバナーは表示されません。
- 別のレイアウトを作成するには、ギャラリー ブロック付きのレイアウト ページを使用します。
インデックス ページ
Montaukのインデックス ページでは、訪問者がさまざまなページを探索するために使用できるサムネイル グリッドが作成されます。
- ナビゲーション グリッドには、ページのアイキャッチ画像が表示されます。ページに動画バナーがある場合でも、アイキャッチ画像がグリッドに表示されます。
- ページ タイトルはサムネイルの下に表示されます。
- ページのバナーとページごとのフッターを追加できます。
- モバイルの場合、インデックス ページには行ごとに1つのサムネイルが表示されます。
サポートされているページ
インデックスには次のページを追加できます。
- レイアウト ページ
- ギャラリーページ
- ブログ ページ
- イベント ページ
- ストア ページ
- アルバム ページ
インデックスのスタイルを設定する
以下の [インデックスのスタイル] 微調整オプションでインデックス ページのスタイルを設定します。
- [インデックス サムネイルのタイトルの色] でページ タイトルの色を設定します。
- [行あたりのサムネイル数] で水平方向に表示するサムネイルの数を選択します。
- [サムネイルの比率] でサムネイル画像の高さを設定します。
- [サムネイルの不透明度] で、背景色がどの程度透けて見えるかを選択します。
- [サムネイルにカーソルを合わせたときの不透明度] で、訪問者がサムネイルにカーソルを合わせたときにサムネイルがどの程度フェードされるかを選択します。
インデックス内のギャラリー ページとレイアウト ページ
インデックスから開いたギャラリー ページとレイアウト ページには、特別な書式設定が適用されます。
- ページの上部はブラウザーの上部に表示されます。訪問者は上にスクロールしてサイト ヘッダーを表示できます。
- インデックス内の他のページのクリック可能なサムネイルは、ナビゲーション エレメントとともにページ コンテンツの下に表示されます。
- バナーはレイアウト ページには表示されません。インデックス ページにバナーがある場合は、代わりにバナーが表示されます。それ以外の場合、バナーは表示されません。
- URLにはハッシュタグ (#) が含まれます。URLに#が含まれていない場合、特別な書式設定は表示されません。
ページのタイトルと説明
ページのタイトルと説明は以下のように表示できます。
ソーシャル アイコン
情報フッターにはオプションの組み込みソーシャル アイコンがあります。
ヒント: Montaukのデモ コンテンツには、下部フッターに削除可能なソーシャル リンク ブロックが含まれています。
フォント
サイト上のテキストの場合:
- [タイポグラフィー] 微調整オプションでフォントとサイズのスタイルを設定します。
- [色] 微調整オプションで色のスタイルを設定します。
サイドバー
Montaukでは、ブログ ページと投稿にサイドバーが表示されます。
モバイル
Squarespaceに組み込まれたレスポンシブ デザインを使用すると、どの端末でも見栄えがよくなるようにサイトが調整されます。
- ナビゲーションは上部中央にメニュー リンクとして表示されます。
- 上部ナビゲーションが空であっても、モバイルではメニュー リンクが常に表示されます。
- メニューの背景は、[色] の [キャンバスの背景] 微調整オプションに従います。
- ギャラリーの画像は、ページの説明文の下に積み重ねて表示されます。
- モバイル用スタイルを無効にすることもできますが、推奨はしません。
バナーの表示はモバイルでは異なる場合があります。
- ページの説明は、幅が767ピクセル未満のスマートフォンやブラウザーでは表示されません。
- 訪問者の接続速度とブラウザーのバージョンによっては、モバイルで動画バナーが表示されない場合があります。動画バナーを読み込めないときにモバイル用代替画像が表示されるように設定します。
- モバイル バナーと背景画像の切り抜きの問題については、トラブルシューティングのヒントをご覧ください。
言語オプション
このファミリー内では、Julia、Kent、およびOmテンプレートは以下の2つの言語オプションがサポートされています。
- 送信フォームや注文確認メッセージなど、サイトの組み込みテキストの言語を選択するオプション。
- フランス語、ドイツ語、イタリア語、ポルトガル語、またはスペイン語のテンプレートを使用して新しいサイトを開始するオプション。
Montaukのトラブルシューティング
このテンプレートでよく生じる問題について説明します。これらの一部は、バグまたは既知の問題です。Squarespaceバージョン7.0は引き続きサポートされていますが、Squarespaceでは最新のプラットフォームであるバージョン7.1に重点を置いているため、バグや問題の修正の優先順位は低くなっています。弊社の更新ツールを使用することで、バージョン7.0サイトをバージョン7.1に移行できます。
サイトを通じて出欠連絡をすることはできますか？
フォーム ブロックを使用して、レイアウト ページに出欠連絡ボタンを作成できます。このブロックは訪問者から情報を収集します。フォーム ブロック エディターの [詳細設定] タブで、[ライトボックス モードを有効にする] にチェックが入っていることを確認してください。ライトボックス モードでは、ページ自体ではなくボタンがクリックされたときにフォームが開くように設定されます。
これが実際にどのように見えるかの例については、「Naomiテンプレートのデモ コンテンツ」を参照してください。
ギャラリー ページのヘッダーのフォントを変更するにはどうすれば良いですか？
ギャラリー ページのヘッダーのフォントとサイズは、以下の2つの異なる微調整オプションによって制御されます。
- サイト スタイルの [インデックスのスタイル] セクションの [インデックス サムネイルのタイトル] 微調整オプションを使用して、フォントを調整します。
- [タイポグラフィー] セクションの [見出し2] を使用してサイズを調整します。
Omデモ コンテンツからクラスまたはワークショップ ページを再作成するにはどうすれば良いですか？
クラス ページは、フォーム ブロックでカスタマイズされたレイアウト ページです。予約を組み込むには、「オンライン予約機能をサイトに追加する」を参照してください。
デモ コンテンツに表示されるワークショップ ページはイベント ページです。詳細については、「イベント ページ」を参照してください。
Juliaデモ コンテンツからレジストリ ページを再作成するにはどうすれば良いですか？
デモ コンテンツのレジストリ リンクは、クリックスルーURL付きの画像を使用して、グリッド ギャラリー ブロック付きのレイアウト ページに作成されます。
ビジネス情報を更新するにはどうすれば良いですか？
ビジネス情報は、サイト ヘッダーのサブタイトルとして表示できます。これは、[ビジネス情報] パネルの [所在地] セクションに表示されます。
これを編集するには、次の手順に従ってください。
- [設定] パネルを開き、[ビジネス情報] をクリックします。
- [所在地] まで下にスクロールし、情報を更新します。
- [保存] をクリックします。
[会社の住所] フィールドを変更してもサブタイトルには表示されません。
モバイル メニューが開きません
無効なURLまたは埋め込みコードを使用してトップページに動画バナーを追加した場合、モバイル メニューは開きません。動画URLを編集するには、次の手順に従ってください。
- [ページパネル] を開きます。
- 左のパネルでトップページのタイトルにカーソルを合わせ、
をクリックします。 - [メディア] タブをクリックし、[動画] タブをクリックします。
- 動画URLフィールドに有効なURLが含まれていることを確認します。
をクリックします。モバイルで背景画像が固定されません
iOSなどの多くのモバイル ブラウザーでは、固定背景画像がサポートされていません。同様の効果を得るには、[サイズ: カバー] および [サイズ: 含む] の背景画像のスタイル オプションを試してみてください。背景画像のスタイル設定はモバイルとコンピューターの両方に適用されることに注意してください。
さらに詳しいヘルプが必要な場合は、「レスポンシブ デザインのトラブルシューティングのヒント」を参照してください。
情報フッターが消えました
情報フッターの [編集] の注釈が表示されない場合、次の手順に従ってください。
- [サイト スタイル] パネルを開きます。
- [オプション] セクションまでスクロールします。
- [情報フッターを非表示] のチェックを外します。
- [保存] をクリックします。
- サイト スタイルを終了し、ページを更新します。これで注釈が表示されるはずです。
線ブロックが表示されません
線ブロックの色は、サイト スタイルの [色] セクションの [ページ境界線の色] 微調整オプションで設定します。すべての線と境界線が表示されるように、透明度を不透明にしてください。
ナビゲーションが2行に分かれています
上部ナビゲーションのリンクが1行に収まらない場合は、2行に分割されます。
[キャンバス スタイル: 奥付のロゴ (右)] または [奥付のロゴ (左)] が選択されていて、上部ナビゲーションが長すぎてサイトのタイトルまたはロゴの横に表示できない場合、上部ナビゲーションはその下に移動します。
上部ナビゲーションの見た目に不満がある場合は、以下の方法で書式設定を調整できます。
- ナビゲーション内のページ数を減らします。ドロップダウンを使用するのが1つの方法です。
- ページの名前を短いものに変更します。
- サイト スタイルの [サイズと値] セクションで、[ナビゲーション リンクの間隔] を小さくしてリンク同士を近づけるか、[サイドの幅] を大きくしてサイト全体の幅を広げます。
ページ タイトルとページの説明のサイズが変わらない
ページ タイトルとページの説明は、幅が1041ピクセル以下のブラウザーではフォント サイズが固定されます。画面のサイズによっては、プレビュー ウィンドウの幅が足りないため、サイト スタイルではサイズ変更の反映を確認できない場合があります。
この場合は、変更を保存してサイト スタイルを終了し、完全なプレビューを開き、更新されたページ タイトルとページの説明の高さをご確認ください。変更を保存して、別のプライベート ブラウザー ウィンドウでサイトを表示することもできます。
幅の狭いブラウザーでページ タイトルが大きく表示される
ページ タイトルはバナーの上に表示されます。幅が1041ピクセル以下のブラウザーの場合、サイズは固定されます。
- 767ピクセル以下 - フォント サイズ: 21ピクセル
- 768〜1040ピクセル - フォント サイズ: 52ピクセル
幅が1041ピクセル以上のブラウザーでは、サイト スタイルの [タイポグラフィー] セクションで [ページ タイトル] 微調整オプションを使ってサイズを設定します。
ページ タイトルが表示されない
Montaukのページ タイトルは、ページ バナーの上に表示する必要があります。ページ タイトルが表示されない場合は以下を実行してください。
- ページにアイキャッチ画像または動画のURLが設定されていることを確認する。
- サイト スタイルの [オプション] セクションで、[情報フッターを非表示にする] と [ページ バナーを非表示にする] の両方がオフになっていることを確認する。
動画バナーが表示されない
動画バナーが表示されない場合は、モバイル用代替画像を追加します。
- ページ設定を開きます。
- [メディア] タブで、[動画] をクリックします。
- 下にスクロールして、画像アップローダーに画像を追加します。
- [保存] をクリックします。
以下の点に留意してください。
- モバイル用代替画像の高さによって、バナーの高さが設定されます。
- インデックス ページの場合、動画はインデックスのランディング ページにバナーを作成します。インデックスのサムネイル グリッドには動画は表示されません。
上部のナビゲーションおよび「いいね！」ボタンと共有ボタンに水平線が入っている
この線は、サイト スタイルの [色] セクションの [キャンバスの背景] 微調整オプションが透明または部分的に不透明に設定されている場合に表示されます。[キャンバスの背景] 微調整オプションを変更するか、ページ境界線の色を透明にすることで、線を完全に隠すことができます。
フッターにソーシャル リンクが2つあるのはなぜですか？
Montaukテンプレートには、ソーシャル アイコンを表示するための組み込みオプションが2つあります。1つは情報フッターの一部として表示する方法、もう1つは下部のフッター (デモ コンテンツの一部) のソーシャル リンク ブロックで表示する方法です。
既定値では、情報フッターとそのソーシャル アイコンは非表示になり、ソーシャル リンク ブロックは下部のフッターに表示されます。
- 情報フッター: アイコンを表示するには、サイト スタイルの [オプション] セクションの [情報フッターを非表示にする] をオフにします。次に、[ソーシャル アイコンのスタイル] 微調整オプションを使用して外観を変更するか、[ソーシャルアイコンを非表示] 微調整オプションを使用して非表示にします。
- 下部のフッター: 外観を変更する場合はソーシャル リンク ブロックを編集し、フッターを削除する場合はブロックを削除します。