Yorkテンプレート ファミリー

Yorkテンプレ⁠ート フ⁠ァミリ⁠ーのスタイルと機能を紹介します⁠。

最終更新日 2025年1月2日

Yorkテンプレ⁠ート フ⁠ァミリ⁠ー (⁠Artesia⁠、Flores⁠、Harris⁠、Jasper⁠、Jones⁠、Lange⁠、Shibari⁠、Taylor⁠、York⁠) は⁠、イラストレ⁠ータ⁠ー⁠、写真家⁠、クリエイテ⁠ィブ エ⁠ージ⁠ェンシ⁠ー⁠、その他のビジ⁠ュアル コンテンツ プロデ⁠ュ⁠ーサ⁠ーの作品を紹介するように設計されています⁠。グリ⁠ッド インデ⁠ックス ペ⁠ージと独自のプロジ⁠ェクト ペ⁠ージを備えたこれらのテンプレ⁠ートは⁠、クリエイテ⁠ィブな成果を表示および共有するためのツ⁠ールを提供します⁠。

このガイドでは⁠、Yorkフ⁠ァミリ⁠ーの機能とデザイン オプシ⁠ョンについて説明します⁠。[⁠サイト スタイル⁠] 微調整オプシ⁠ョン⁠、および [⁠サイト スタイル⁠] パネルでこれらのオプシ⁠ョンが表示されるセクシ⁠ョンを太字で示しています⁠。

サポ⁠ートされているペ⁠ージ タイプ

Yorkでは⁠、次のペ⁠ージ タイプがサポ⁠ートされています⁠。

ヘ⁠ッダ⁠ー

訪問者は⁠、上部にあるサイト全体のヘ⁠ッダ⁠ーを使用してサイトを移動します⁠。Yorkでは⁠、ヘ⁠ッダ⁠ーは左⁠、中央⁠、右の3つのエリアに分かれています⁠。ヘ⁠ッダ⁠ーには⁠、次のエレメントを追加できます⁠。

[⁠サイト⁠: ヘ⁠ッダ⁠ー レイアウト⁠] 微調整オプシ⁠ョンを使用してヘ⁠ッダ⁠ー レイアウトのスタイルを設定します⁠。

  • [⁠左レイアウト⁠]⁠、[⁠中央レイアウト⁠]⁠、または[⁠右レイアウト⁠] を選択して⁠、レイアウトを [⁠水平⁠] から [⁠スタ⁠ック⁠] に変更します⁠。これらのオプシ⁠ョンは⁠、ヘ⁠ッダ⁠ー エリアに2つ以上のアイテムを追加した後に表示されます⁠。
  • [⁠全幅ヘ⁠ッダ⁠ー⁠] 微調整オプシ⁠ョンでヘ⁠ッダ⁠ーの表示方法を選択します⁠。

ヘ⁠ッダ⁠ーのスタイルを設定する

以下の [⁠サイト⁠: ヘ⁠ッダ⁠ー⁠] 微調整オプシ⁠ョンでヘ⁠ッダ⁠ー コンテンツのスタイルを設定します⁠。

  • [⁠サイトのタイトル⁠] でフ⁠ォントと色を設定します⁠。
  • [⁠サイト タグライン⁠] でタグラインのフ⁠ォントと色を設定します⁠。
  • [⁠ロゴの高さ (⁠最大⁠)⁠] でロゴ サイズを変更します⁠。
  • [⁠カ⁠ート⁠] でシ⁠ョ⁠ッピング カ⁠ートのフ⁠ォント⁠、色⁠、スタイルを設定します⁠。

[⁠サイト⁠: ナビゲ⁠ーシ⁠ョン⁠] 微調整オプシ⁠ョンでナビゲ⁠ーシ⁠ョンのスタイルを設定します⁠。

  • [⁠プライマリ⁠] と [⁠セカンダリ⁠] でメイン ナビゲ⁠ーシ⁠ョンとセカンダリ ナビゲ⁠ーシ⁠ョンを変更します⁠。
  • [⁠フ⁠ォルダ⁠ー インジケ⁠ータ⁠ーを表示⁠] でドロ⁠ップダウン メニ⁠ュ⁠ーの横にあるキ⁠ャレ⁠ット アイコンを表示または非表示にします⁠。
folder_indicator_caret.png

ヘ⁠ッダ⁠ーに関するその他のヘルプ

ヒント⁠:

  • [⁠アイコン⁠] 微調整オプシ⁠ョンで検索とシ⁠ョ⁠ッピング カ⁠ートのアイコンの線の太さを設定します⁠。
  • ヘ⁠ッダ⁠ーの背景色は⁠、[⁠サイト⁠] の [⁠サイトの背景⁠] 微調整オプシ⁠ョンに従います⁠。
  • これらのエレメントの多くには⁠、個別のモバイル用スタイルがあります⁠。

ペ⁠ージ ヘ⁠ッダ⁠ーとペ⁠ージ フ⁠ッタ⁠ー

ペ⁠ージ ヘ⁠ッダ⁠ーおよびフ⁠ッタ⁠ーを使用すると⁠、個⁠々のペ⁠ージをカスタマイズすることができます⁠。ブロ⁠ックを追加するには⁠、ペ⁠ージの上部または下部にカ⁠ーソルを合わせ⁠、[⁠コレクシ⁠ョン ヘ⁠ッダ⁠ー コンテンツ⁠] または [⁠コレクシ⁠ョン フ⁠ッタ⁠ー コンテンツ⁠] の注釈の [⁠編集⁠] をクリ⁠ックします⁠。

Yorkには⁠、次のペ⁠ージ ヘ⁠ッダ⁠ーとペ⁠ージ フ⁠ッタ⁠ーがあります⁠。

  • アルバム ペ⁠ージ
  • ブログ ペ⁠ージ
  • イベント ペ⁠ージ
  • ギ⁠ャラリ⁠ーペ⁠ージ
  • インデ⁠ックス ペ⁠ージ
  • ストア ペ⁠ージ
  • プロジ⁠ェクト ペ⁠ージ

これらをサイト全体で有効にするには⁠、サイト スタイルの [⁠ペ⁠ージ⁠] セクシ⁠ョンで [⁠ペ⁠ージ ヘ⁠ッダ⁠ーを表示⁠] および/または [⁠ペ⁠ージ フ⁠ッタ⁠ーを表示⁠] にチ⁠ェ⁠ックを入れます⁠。ペ⁠ージ ヘ⁠ッダ⁠ーおよびフ⁠ッタ⁠ーのテキスト ブロ⁠ックは⁠、[⁠サイト⁠: タイポグラフ⁠ィ⁠ー⁠] の微調整オプシ⁠ョンに従います⁠。

以下の点に留意してください⁠。

  • ブログ投稿など⁠、個別のコレクシ⁠ョン アイテムは⁠、ペ⁠ージのヘ⁠ッダ⁠ーとフ⁠ッタ⁠ーをサポ⁠ートしていません⁠。
  • ソ⁠ーシ⁠ャル メデ⁠ィアでペ⁠ージを共有したときに⁠、非表示のヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーのコンテンツが表示されることがあります⁠。ヘ⁠ッダ⁠ーやフ⁠ッタ⁠ーを非表示にする前にコンテンツを削除すると⁠、この問題を回避できます⁠。
  • インデ⁠ックス内のペ⁠ージのペ⁠ージ フ⁠ッタ⁠ーの下にはナビゲ⁠ーシ⁠ョンが表示されます⁠。

サイト全体のフ⁠ッタ⁠ー

サイト全体のフ⁠ッタ⁠ーを有効にするには⁠、[⁠サイト⁠: フ⁠ッタ⁠ー⁠] の [⁠グロ⁠ーバル サイト フ⁠ッタ⁠ーを表示⁠] 微調整オプシ⁠ョンにチ⁠ェ⁠ックを入れます⁠。ブロ⁠ックを追加するには⁠、フ⁠ッタ⁠ーにカ⁠ーソルを合わせて [⁠編集⁠] をクリ⁠ックします⁠。完全な手順については⁠、「⁠フ⁠ッタ⁠ーを編集する⁠」を参照してください⁠。

ペ⁠ージのバナ⁠ー

次のペ⁠ージ タイプの上部には⁠、バナ⁠ー画像または動画を追加できます⁠。

  • アルバム ペ⁠ージ
  • ブログ ペ⁠ージ
  • イベント ペ⁠ージ
  • ギ⁠ャラリ⁠ー ペ⁠ージ (⁠画像のみ⁠)
  • インデ⁠ックス ペ⁠ージ
  • レイアウト ペ⁠ージ
  • ストア ペ⁠ージ
  • プロジ⁠ェクト ペ⁠ージ

バナ⁠ー画像またはバナ⁠ー動画を追加するには⁠、ペ⁠ージ設定の [⁠メデ⁠ィア⁠] タブでアイキ⁠ャ⁠ッチ画像または動画のURLを追加します⁠。

以下の点に留意してください⁠。

  • これらのバナ⁠ーによ⁠って⁠、インデ⁠ックス ペ⁠ージのサムネイル ナビゲ⁠ーシ⁠ョンが作成されます⁠。
  • ペ⁠ージにアイキ⁠ャ⁠ッチ画像がない場合⁠、バナ⁠ーには背景色が表示されます⁠。透明度の変更が必要な場合があります⁠。
  • バナ⁠ー設定はペ⁠ージ タイプごとに共通です⁠。サイト スタイルの [⁠ペ⁠ージ⁠] セクシ⁠ョンの [⁠バナ⁠ー⁠] 微調整オプシ⁠ョンを使用して⁠、ペ⁠ージ タイプのバナ⁠ーを表示または非表示にします⁠。
  • ペ⁠ージのタイトルと説明をバナ⁠ーにオ⁠ーバ⁠ーレイすることができます⁠。
  • バナ⁠ーはペ⁠ージ読み込みアニメ⁠ーシ⁠ョンをサポ⁠ートしています⁠。

ト⁠ップペ⁠ージ限定バナ⁠ー

ト⁠ップペ⁠ージにだけバナ⁠ーを表示し⁠、そのタイプの他のすべてのペ⁠ージでは非表示にすることができます⁠。たとえば⁠、ト⁠ップペ⁠ージがレイアウト ペ⁠ージの場合は⁠、次の手順に従います⁠。

  1. ト⁠ップペ⁠ージに移動します⁠。
  2. サイト スタイルを開きます⁠。
  3. [⁠ペ⁠ージ⁠] まで下にスクロ⁠ールします⁠。
  4. [⁠ペ⁠ージのバナ⁠ーを表示⁠] のチ⁠ェ⁠ックを外します⁠。これにより⁠、すべてのレイアウト ペ⁠ージでバナ⁠ーが非表示になります⁠。
  5. [⁠ト⁠ップペ⁠ージのバナ⁠ーを表示⁠] にチ⁠ェ⁠ックを入れます⁠。これにより⁠、ト⁠ップペ⁠ージのレイアウト ペ⁠ージにバナ⁠ーが表示されます⁠。

ペ⁠ージ タイトルとペ⁠ージ説明はト⁠ップペ⁠ージとその他のペ⁠ージで共通のままです⁠。たとえば⁠、[⁠ペ⁠ージ タイトルを表示⁠] にチ⁠ェ⁠ックを入れると⁠、ト⁠ップペ⁠ージと他のすべてのレイアウト ペ⁠ージにペ⁠ージ タイトルが表示されます⁠。

バナ⁠ーのスタイルを設定する

サイト スタイルの [⁠バナ⁠ー⁠] セクシ⁠ョンでバナ⁠ーのスタイルを設定します⁠。これらの微調整オプシ⁠ョンを使用すると⁠、サイトのすべてのペ⁠ージ バナ⁠ーに影響します⁠。

  • アイキ⁠ャ⁠ッチ画像があるペ⁠ージでは⁠、[⁠高さ⁠] でバナ⁠ーの高さを設定します⁠。
  • バナ⁠ー内に画像を配置するには⁠、[⁠画像の配置⁠] を使用します⁠。
  • [⁠画像の配置⁠] が右または左に設定されている場合は⁠、[⁠画像を切り抜く⁠] で画像の右半分または左半分を埋めることができます⁠。バナ⁠ー全体を埋めるには⁠、[⁠画像の配置⁠] を中央に設定し⁠、[⁠画像を切り抜く⁠] にチ⁠ェ⁠ックを入れます⁠。
  • [⁠背景の自動カラ⁠ー化⁠] にチ⁠ェ⁠ックを入れると⁠、バナ⁠ーはアイキ⁠ャ⁠ッチ画像から自動的に背景色を取得します⁠。画像がバナ⁠ーの端まで広が⁠っているように見えるため⁠、主な背景色が1色のイラストや画像に便利です⁠。
  • ブラウザ⁠ーの端までバナ⁠ーを伸ばすには⁠、[⁠フルブリ⁠ード画像⁠] にチ⁠ェ⁠ックを入れます⁠。
  • インデ⁠ックス ナビゲ⁠ーシ⁠ョン バナ⁠ーには⁠、サイト スタイルの [⁠インデ⁠ックス⁠] で独自のスタイルを設定することができます⁠。

[⁠背景色⁠] は次の場所に表示されます⁠。

  • アイキ⁠ャ⁠ッチ画像がないバナ⁠ー
  • バナ⁠ー画像または動画の読み込み中
  • バナ⁠ー全体を埋め尽くさないアイキ⁠ャ⁠ッチ画像の背後 (⁠[⁠背景色の自動カラ⁠ー化⁠] がオフの場合⁠)
banner_sample_1.png
Banner_sample_2.png
Banner_sample_3.jpg
banner_sample_4.png

ペ⁠ージのタイトルと説明

任意のペ⁠ージの上部には⁠、ペ⁠ージ設定のペ⁠ージのタイトルと説明が表示されます⁠。プロジ⁠ェクト ペ⁠ージとギ⁠ャラリ⁠ー ペ⁠ージでは⁠、個⁠々の画像のカテゴリ⁠ーを表示することもできます⁠。

  • これらの設定はペ⁠ージ タイプごとに共通です⁠。
  • [⁠ペ⁠ージ⁠] セクシ⁠ョンの [⁠タイトル⁠]⁠、[⁠説明⁠]⁠、[⁠カテゴリ⁠ー⁠] 微調整オプシ⁠ョンで⁠、テキストを表示または非表示にします⁠。
  • テキストをペ⁠ージ バナ⁠ーにオ⁠ーバ⁠ーレイしたり⁠、単独で表示したりできます⁠。
  • 個⁠々のペ⁠ージの説明を非表示にするには⁠、ペ⁠ージ設定から説明を削除します⁠。

バナ⁠ーがあるペ⁠ージとバナ⁠ーがないペ⁠ージのテキスト

テキストをバナ⁠ーまたはペ⁠ージの上に表示する場合⁠、さまざまなスタイル オプシ⁠ョンを割り当てることができます⁠。使用するサイト スタイル セクシ⁠ョンは⁠、ペ⁠ージにバナ⁠ーがあるかどうかによ⁠って異なります⁠。

  • バナ⁠ー テキスト - バナ⁠ーがあるすべてのペ⁠ージ
  • インデ⁠ックス⁠: イントロのテキスト - ペ⁠ージ バナ⁠ーがないインデ⁠ックス ペ⁠ージ
  • ペ⁠ージ⁠: イントロのテキスト - ペ⁠ージ バナ⁠ーがないその他のペ⁠ージ

[⁠タイトル⁠]⁠、[⁠説明⁠]⁠、[⁠カテゴリ⁠ー⁠] を使用してテキストのスタイルを設定します⁠。

バナ⁠ーがないペ⁠ージには⁠、次のような追加のオプシ⁠ョンがあります⁠。

  • [⁠テキスト幅⁠] でテキストのサイド マ⁠ージンを設定します⁠。
  • [⁠文字の高さ⁠] でテキストの上下の間隔を設定します⁠。

バナ⁠ー上に表示されるテキストには⁠、次のような追加のオプシ⁠ョンがあります⁠。

  • [⁠配置⁠] でバナ⁠ー内のテキストの位置を設定します⁠。
  • [⁠⁠] でテキストのサイド マ⁠ージンを設定します⁠。
  • [⁠ハイライト⁠] 微調整オプシ⁠ョンでテキストの後ろに色を追加します⁠。[⁠ハイライト テキスト インデント⁠] で背景色の幅を設定します⁠。
text_on_a_banner.png

ブログ ペ⁠ージ

Yorkテンプレ⁠ート フ⁠ァミリ⁠ーでは⁠、標準のグリ⁠ッド/リスト ブログ ペ⁠ージが使用されます⁠。このタイプのブログの独自の機能とスタイル オプシ⁠ョンの詳細については⁠、「⁠バ⁠ージ⁠ョン7⁠.0の標準的なグリ⁠ッド/リスト ブログ ペ⁠ージ⁠」を参照してください⁠。

プロジ⁠ェクト ペ⁠ージ

プロジ⁠ェクト ペ⁠ージでは⁠、画像⁠、タイトル⁠、キ⁠ャプシ⁠ョンをエレガントなレイアウトに整理します⁠。これは⁠、特にテキストと画像を組み合わせて使用している場合にギ⁠ャラリ⁠ー ペ⁠ージに代わるユニ⁠ークな方法です⁠。

詳細については⁠、「⁠プロジ⁠ェクト ペ⁠ージ⁠」を参照してください⁠。

york-project.png

インデ⁠ックス ペ⁠ージ

インデ⁠ックス ペ⁠ージは⁠、訪問者が様⁠々なペ⁠ージにアクセスするために使用できるナビゲ⁠ーシ⁠ョン サムネイルをバナ⁠ーまたはグリ⁠ッドで表示します⁠。

  • ナビゲ⁠ーシ⁠ョン グリ⁠ッドには⁠、ペ⁠ージのアイキ⁠ャ⁠ッチ画像が表示されます⁠。ペ⁠ージに動画バナ⁠ーがある場合でも⁠、アイキ⁠ャ⁠ッチ画像がグリ⁠ッドに表示されます⁠。
  • ペ⁠ージ バナ⁠ー⁠、ナビゲ⁠ーシ⁠ョンのタイトルと説明テキスト⁠、カスタマイズ可能なヘ⁠ッダ⁠ー エリアとフ⁠ッタ⁠ー エリアを追加できます⁠。
  • モバイルの場合⁠、インデ⁠ックス ペ⁠ージには行ごとに1つのサムネイルが表示されます⁠。
  • インデ⁠ックス ペ⁠ージは [⁠サイトの最大幅⁠] に従いません⁠。
index-example__1___1_.png

サポ⁠ートされているペ⁠ージ

インデ⁠ックスには次のペ⁠ージを追加できます⁠。

  • アルバム ペ⁠ージ
  • ブログ ペ⁠ージ
  • ギ⁠ャラリ⁠ーペ⁠ージ
  • イベント ペ⁠ージ
  • ストア ペ⁠ージ
  • プロジ⁠ェクト ペ⁠ージ
  • レイアウト ペ⁠ージ

アイキ⁠ャ⁠ッチ画像

アイキ⁠ャ⁠ッチ画像または動画URLをペ⁠ージの設定に追加すると⁠、インデ⁠ックス ナビゲ⁠ーシ⁠ョンのサムネイルに表示されます⁠。[⁠インデ⁠ックス⁠: アイテム画像⁠] 微調整オプシ⁠ョンでサムネイルのスタイルを設定します⁠。

  • [⁠画像の配置⁠] でサムネイル内のアイキ⁠ャ⁠ッチ画像を配置します⁠。
  • [⁠画像を切り抜く⁠] でサムネイルの右半分⁠、左半分⁠、または全体を埋めます⁠。このオプシ⁠ョンは⁠、[⁠画像の配置⁠] が [⁠⁠]⁠、[⁠⁠]⁠、または [⁠中央⁠] に設定されている場合に表示されます⁠。
  • [⁠画像の不透明度⁠] で画像全体に背景色がどの程度透けて見えるかを選択します⁠。
  • [⁠ホバ⁠ーの不透明度⁠] で訪問者がカ⁠ーソルを当てたときに画像がどの程度フ⁠ェ⁠ードされるかを変更できます⁠。
  • サムネイル全体を埋めるには⁠、[⁠画像の配置⁠: 中央⁠] を選択し⁠、[⁠画像を切り抜く⁠] にチ⁠ェ⁠ックを入れます⁠。
  • アイキ⁠ャ⁠ッチ画像または動画から背景色を自動的に取得するようにサムネイルを設定するには⁠、[⁠背景の自動カラ⁠ー化⁠] にチ⁠ェ⁠ックを入れます⁠。
  • アイキ⁠ャ⁠ッチ画像または動画がないサムネイルに表示する [⁠アイテムの背景色⁠] を選択します⁠。この微調整オプシ⁠ョンは⁠、[⁠背景の自動カラ⁠ー化⁠] にチ⁠ェ⁠ックが入⁠っていない場合に表示されます⁠。

次の場合に⁠、サムネイルの背景色が表示されます⁠。

  • ナビゲ⁠ーシ⁠ョンのサムネイルに画像や動画がない場合
  • サムネイル全体を埋め尽くさないアイキ⁠ャ⁠ッチ画像の背後
  • アイキ⁠ャ⁠ッチ画像 (⁠不透明度を変更した場合⁠)

サムネイルのレイアウト

インデ⁠ックス ナビゲ⁠ーシ⁠ョン サムネイルは⁠、バナ⁠ーとして表示することも⁠、グリ⁠ッドで表示することもできます⁠。サイト スタイルの [⁠インデ⁠ックス⁠: レイアウト⁠] セクシ⁠ョンでスタイルを設定します⁠。

  • [⁠アイテム幅⁠] でサムネイルをバナ⁠ーとして表示します⁠。1行に1つまたは2つのバナ⁠ーを表示するには⁠、[⁠フル⁠] または [⁠ハ⁠ーフ⁠] を選択します⁠。
  • [⁠アイテムの高さ⁠] でバナ⁠ーの高さを設定します⁠。
  • サムネイルをグリ⁠ッドに表示するには⁠、[⁠アイテム幅⁠: グリ⁠ッド⁠] を選択します⁠。[⁠⁠] 微調整オプシ⁠ョンと [⁠サムネイルの比率⁠] でグリ⁠ッドのスタイルを設定します⁠。
  • [⁠アイテムの間隔⁠] でバナ⁠ーまたはサムネイル タイルの間隔を設定します⁠。
  • サムネイルをブラウザ⁠ーの端まで拡大するには⁠、[⁠フルブリ⁠ード インデ⁠ックス⁠] にチ⁠ェ⁠ックを入れます⁠。チ⁠ェ⁠ックが入⁠っていない場合⁠、サムネイルはサイトのパデ⁠ィングに従います⁠。これはペ⁠ージ ヘ⁠ッダ⁠ー バナ⁠ーにも影響します⁠。
  • 1つのバナ⁠ーと2つのバナ⁠ーを表示する行を交互に表示するには⁠、[⁠代替幅⁠] にチ⁠ェ⁠ックを入れます⁠。このオプシ⁠ョンは⁠、バナ⁠ーが [⁠画像の配置⁠:中央⁠] に設定され⁠、[⁠インデ⁠ックスの幅⁠] が [⁠フル⁠] または [⁠ハ⁠ーフ⁠] に設定されている場合に表示されます⁠。
  • 画像が表示されるサイドを交互に表示するには⁠、[⁠代替サイド⁠] にチ⁠ェ⁠ックを入れます⁠。このオプシ⁠ョンは⁠、バナ⁠ーが [⁠画像の配置⁠: 右⁠] または [⁠⁠] に設定され⁠、[⁠インデ⁠ックスの幅⁠] が [⁠フル⁠] に設定されている場合に表示されます⁠。

インデ⁠ックス サムネイルには⁠、ギ⁠ャラリ⁠ー ペ⁠ージとプロジ⁠ェクト ペ⁠ージの画像に追加した各ペ⁠ージのナビゲ⁠ーシ⁠ョン タイトルとカテゴリ⁠ーを表示できます⁠。ナビゲ⁠ーシ⁠ョン タイトルはインデ⁠ックス サムネイルに表示されますが⁠、ペ⁠ージ タイトルは個⁠々のペ⁠ージの上部に表示されます⁠。つまり⁠、これら2つの場所に異なるテキストが表示されるように設定することができます⁠。

サイト スタイルの [⁠インデ⁠ックス⁠: アイテムのテキスト⁠] セクシ⁠ョンでテキストのフ⁠ォント⁠、色⁠、サイズを変更します⁠。

  • [⁠タイトル表示⁠] でタイトルの表示方法を選択します⁠。
  • カテゴリ⁠ー テキストを非表示にするには⁠、[⁠カテゴリ⁠ーを表示⁠] にチ⁠ェ⁠ックを入れます⁠。
  • テキストの背後にカスタマイズ可能な背景色を追加するには⁠、[⁠タイトルの背景を使用⁠] と [⁠カテゴリ⁠ーの背景を使用⁠] にチ⁠ェ⁠ックを入れます⁠。
  • [⁠テキストの配置⁠] でテキストの表示位置を設定します⁠。
index_thumbnails_with_titles.png

ナビゲ⁠ーシ⁠ョン

インデ⁠ックス ナビゲ⁠ーシ⁠ョンのスタイルを設定するには⁠、インデ⁠ックス内のペ⁠ージに移動し⁠、サイト スタイルを開きます⁠。

ナビゲ⁠ーシ⁠ョンは⁠、インデ⁠ックス内のすべてのペ⁠ージの下部に表示されます⁠。非表示にするには⁠、[⁠インデ⁠ックス ナビゲ⁠ーシ⁠ョンを表示⁠] のチ⁠ェ⁠ックを外します⁠。スタイルを設定するには⁠、サイト スタイルの [⁠インデ⁠ックス⁠: ナビゲ⁠ーシ⁠ョン⁠] セクシ⁠ョンを使用します⁠。

  • [⁠リンク スタイル⁠] を [⁠リスト⁠] に設定すると⁠、インデ⁠ックス内のすべてのペ⁠ージがナビゲ⁠ーシ⁠ョン リンクとして表示されます⁠。
  • [⁠リンク スタイル⁠] を [⁠⁠] に設定すると⁠、[⁠⁠] ラベルが表示されます⁠。[⁠ラベルのみ表示⁠] のチ⁠ェ⁠ックを外すと⁠、[⁠⁠] ラベルの後に次のペ⁠ージの名前が表示されます⁠。
link-style-list.png
link-style-next.png

どちらのスタイルでも⁠、テキストを [⁠インライン⁠] または [⁠スタ⁠ック⁠] として表示し⁠、テキストの色⁠、フ⁠ォント⁠、スケ⁠ーリングを変更することができます⁠。[⁠インデ⁠ックス⁠: ナビゲ⁠ーシ⁠ョン⁠] のその他の微調整オプシ⁠ョンで⁠、間隔⁠、フ⁠ォント⁠、リンクの区切り方法などのリンク スタイルを設定します⁠。

ペ⁠ージの読み込み

Yorkテンプレ⁠ートは⁠、ペ⁠ージに表示されているコンテンツのみを読み込むことでサイトを高速化するペ⁠ージ読み込み方式であるAjaxをサポ⁠ートしています⁠。シ⁠ームレスなブラウジングを実現するため⁠、Ajax読み込みを有効にしておくことをおすすめします⁠。詳細については⁠、「⁠Ajax読み込み⁠」を参照してください⁠。

Yorkテンプレ⁠ートは⁠、特別なペ⁠ージ アニメ⁠ーシ⁠ョンもサポ⁠ートしています⁠。

  • プロジ⁠ェクト ペ⁠ージの画像とキ⁠ャプシ⁠ョンは⁠、ペ⁠ージを下にスクロ⁠ールすると下から上にスライドして表示されます⁠。[⁠カスケ⁠ード画像とキ⁠ャプシ⁠ョン⁠] 微調整オプシ⁠ョンのチ⁠ェ⁠ックを外すと⁠、効果が削除されます⁠。
  • 最初の読み込み時に⁠、インデ⁠ックス内のペ⁠ージのコンテンツがスライドして表示されます⁠。[⁠ペ⁠ージ移行アニメ⁠ーシ⁠ョン⁠] 微調整オプシ⁠ョンのチ⁠ェ⁠ックを外すと⁠、効果が削除されます⁠。
  • ペ⁠ージ バナ⁠ーの読み込みにはフ⁠ェ⁠ードイン効果が適用されます⁠。

一部のアニメ⁠ーシ⁠ョンは⁠、ログインしている状態で確認することができません⁠。効果をプレビ⁠ュ⁠ーするには⁠、プライベ⁠ート モ⁠ードまたはシ⁠ークレ⁠ット モ⁠ードでサイトにアクセスしてください⁠。

image-sliding-up.gif
page_banner_fading_in.gif

構造とスタイル

共有ボタン

ブログ投稿や商品詳細ペ⁠ージには⁠、カスタマイズ可能な共有ボタンが表示されます⁠。

  • サイト スタイルの [⁠共有ボタン⁠] セクシ⁠ョンで⁠、サイズ⁠、間隔⁠、色⁠、スタイルを設定します⁠。選択したスタイルに応じて⁠、ボタンをカスタマイズするための微調整オプシ⁠ョンがさらに表示されます⁠。
  • [⁠商品⁠: 詳細⁠] セクシ⁠ョンに表示されている商品アイテム共有ボタンを選択します⁠。[⁠共有ボタンを表示⁠] のチ⁠ェ⁠ックを外すことで⁠、商品アイテムのアイコンを非表示にすることができます⁠。
  • [⁠ブログ⁠: アイテム⁠] の [⁠共有アイコン⁠] 微調整オプシ⁠ョンを使用して⁠、個⁠々のブログ投稿のコンテンツの上または下に共有ボタンを表示するかどうかを選択します⁠。
  • Pinterestの共有ボタンは⁠、アイキ⁠ャ⁠ッチ画像があるペ⁠ージにのみ表示されます⁠。
  • アルバムおよびイベント ペ⁠ージには⁠、ポ⁠ップア⁠ップ共有ボタンを備えた共有リンクが含まれています⁠。これらのボタンはカスタマイズされたスタイルに従いません⁠。

レイアウトと背景

サイト スタイルの [⁠サイト⁠] セクシ⁠ョンで⁠、サイトのパデ⁠ィングを設定します⁠。

  • サイト コンテンツとブラウザ⁠ー上部の間隔は⁠、[⁠サイトの間隔設定⁠] で設定します⁠。
  • サイト コンテンツとブラウザ⁠ーの端の間隔は⁠、[⁠サイトの外側のパデ⁠ィング⁠] で設定します⁠。
  • [⁠全幅ヘ⁠ッダ⁠ー⁠] のチ⁠ェ⁠ックが外れている場合⁠、ヘ⁠ッダ⁠ーは [⁠サイトの配置⁠] と [⁠サイトの最大幅⁠] に従います⁠。
  • [⁠サイトの背景⁠] でサイト全体の背景色を設定します⁠。

フ⁠ォント

次のサイト スタイル オプシ⁠ョンを使用して⁠、サイト上のフ⁠ォントのスタイルを設定します⁠。

  • ナビゲ⁠ーシ⁠ョン リンク - サイト⁠: ナビゲ⁠ーシ⁠ョン
  • メイン コンテンツ - サイト⁠: タイポグラフ⁠ィ⁠ー
  • ペ⁠ージ タイトルと説明 - バナ⁠ー テキスト⁠、ペ⁠ージ⁠: イントロ テキスト⁠、インデ⁠ックス⁠: イントロ テキスト

ブラウザ⁠ーの幅に応じて特定のテキストが拡大または縮小されるように設定することができます⁠。見出し1のテキストに対してこれを行うには⁠、次の手順に従います⁠。

  1. [⁠サイト⁠: タイポグラフ⁠ィ⁠ー⁠] セクシ⁠ョンで⁠、[⁠見出し1のスケ⁠ール変更⁠] にチ⁠ェ⁠ックを入れます⁠。
  2. [⁠見出し1 最大⁠] で最大フ⁠ォント サイズを設定します⁠。
  3. [⁠見出し1 最小⁠] で最小フ⁠ォント サイズを設定します⁠。

各ヘ⁠ッダ⁠ーの最小フ⁠ォント サイズは⁠、本文テキストのフ⁠ォント サイズよりも大きく設定することをおすすめします⁠。詳細については⁠、「⁠フ⁠ォントを拡大縮小する⁠」をご参照ください⁠。

サイドバ⁠ー

Yorkテンプレ⁠ートでは⁠、どのペ⁠ージでもサイドバ⁠ーがサポ⁠ートされていません⁠。サイドバ⁠ーが利用可能なテンプレ⁠ートのリストについては⁠、「⁠バ⁠ージ⁠ョン7⁠.0のサイドバ⁠ー⁠」を参照してください⁠。

ソ⁠ーシ⁠ャル アイコン

Yorkテンプレ⁠ートは⁠、組み込みのソ⁠ーシ⁠ャル アイコンをサポ⁠ートしていません⁠。代わりに⁠、フ⁠ッタ⁠ーまたはペ⁠ージ コンテンツにソ⁠ーシ⁠ャル リンク ブロ⁠ックを追加してください⁠。

モバイル

Squarespaceに組み込まれたレスポンシブ デザインを使用すると⁠、どの端末でも見栄えがよくなるようにサイトが調整されます⁠。モバイル端末や幅の狭いブラウザ⁠ーでは⁠、コンテンツが垂直にスタ⁠ックされます⁠。

サイト スタイルの [⁠モバイル⁠] セクシ⁠ョンでサイトのモバイル向け表示のスタイルを設定します⁠。

  • モバイル バ⁠ーをペ⁠ージと一緒に上にスクロ⁠ールするか⁠、[⁠モバイル バ⁠ーの位置⁠] で上または下に固定するかを選択します⁠。モバイル バ⁠ーには⁠、サイトのタイトルまたはロゴ⁠、ナビゲ⁠ーシ⁠ョン アイコン⁠、タグライン⁠、シ⁠ョ⁠ッピング カ⁠ートが含まれます⁠。
  • [⁠ブランデ⁠ィング ポジシ⁠ョン⁠] でサイトのブランデ⁠ィングとメニ⁠ュ⁠ー アイコンの表示位置を設定します⁠。
  • サイトのタイトル⁠、タグライン⁠、ナビゲ⁠ーシ⁠ョン リンク⁠、シ⁠ョ⁠ッピング カ⁠ートには⁠、それぞれ個別のモバイル用スタイルを設定することができます⁠。デバイス間でブランデ⁠ィングの一貫性を保つには⁠、[⁠サイト⁠] セクシ⁠ョンと同じスタイルを使用してください⁠。
  • モバイルで動画バナ⁠ーを読み込めないときにモバイル用代替画像が表示されるように設定します⁠。
  • モバイルでは⁠、メイン ナビゲ⁠ーシ⁠ョンとセカンダリ ナビゲ⁠ーシ⁠ョンが空の場合でも⁠、☰が常に表示されます⁠。

以下の点に留意してください⁠。

smartphong-and-tablet-view.png

言語オプシ⁠ョン

Yorkは⁠、次の2通りの言語オプシ⁠ョンをサポ⁠ートしています⁠。

Yorkのトラブルシ⁠ュ⁠ーテ⁠ィング

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

バナ⁠ー テキストの背景ハイライト色に隙間がある

これは⁠、タイトルや説明が非常に短く⁠、カスタム ハイライト インデントを大きく設定している場合に発生する可能性があります⁠。

これを修正するには⁠、タイトルや説明にテキストを追加するか⁠、サイト スタイルの [⁠バナ⁠ー テキスト⁠] セクシ⁠ョンを使用して⁠、次のいずれかを実行してください⁠。

  • [⁠カスタム ハイライト インデント⁠] 微調整オプシ⁠ョンを小さくします⁠。
  • [⁠テキストのハイライト インデント⁠] 微調整オプシ⁠ョンを使用して⁠、[⁠⁠]⁠、[⁠⁠]⁠、[⁠⁠] のいずれかのプリセ⁠ット オプシ⁠ョンを選択します⁠。
York.png

ナビゲ⁠ーシ⁠ョンのドロ⁠ップダウンが正しく表示されない

ナビゲ⁠ーシ⁠ョンのドロ⁠ップダウンが期待どおりに表示されない原因は2つあり⁠、それぞれに特定の修正方法があります⁠。

「⁠ペ⁠ージの説明⁠」というテキストが表示される

このプレ⁠ースホルダ⁠ー テキストは⁠、サイトにログインしているとき⁠、レイアウト⁠、プロジ⁠ェクト⁠、ストア ペ⁠ージに表示されます⁠。サイトへの訪問者にこのテキストが表示されることはありません⁠。

これを修正するには⁠、ペ⁠ージの設定でテキストを置き換えるか⁠、サイト スタイルですべてのペ⁠ージの説明を非表示にします⁠。

テンプレ⁠ートの切り替え後にプロジ⁠ェクト ペ⁠ージが表示されない

Yorkフ⁠ァミリ⁠ー以外のテンプレ⁠ートに切り替えると⁠、プロジ⁠ェクト ペ⁠ージがギ⁠ャラリ⁠ー ペ⁠ージに変換されます⁠。

Yorkテンプレ⁠ートに戻した後⁠、ギ⁠ャラリ⁠ー ペ⁠ージから新しいプロジ⁠ェクト ペ⁠ージに画像を移動することで⁠、元の形式を再作成することができます⁠。

  1. [⁠ペ⁠ージ⁠] パネルを開き⁠、新しいプロジ⁠ェクト ペ⁠ージを追加します⁠。
  2. [⁠ペ⁠ージ⁠] パネルで⁠、移動する画像が含まれるギ⁠ャラリ⁠ー ペ⁠ージをクリ⁠ックします⁠。
  3. 移動するアイテムをクリ⁠ックします⁠。
  4. 下に表示されるアクシ⁠ョン バ⁠ーの [⁠移動⁠] をクリ⁠ックします⁠。
  5. [⁠移動先のコレクシ⁠ョンを選択⁠] ウ⁠ィンドウで⁠、[⁠プロジ⁠ェクト ペ⁠ージ⁠] を選択し⁠、[⁠アイテムを移動⁠] をクリ⁠ックします⁠。

ソ⁠ーシ⁠ャル メデ⁠ィアで共有するとランダムなテキストが表示される

Squarespaceでは⁠、コンテンツを共有するときにソ⁠ーシ⁠ャル メデ⁠ィアに表示される内容を正確に制御することができません⁠。ペ⁠ージのヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーがサイト上で非表示にな⁠っていても⁠、ヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーのテキストが表示されることがあります⁠。ヘ⁠ッダ⁠ーとフ⁠ッタ⁠ーが非表示の場合⁠、コンテンツを削除することで⁠、この問題を修正することができます⁠。

ヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーのコンテンツを削除するには⁠、次の手順に従います⁠。

  1. [⁠ペ⁠ージ⁠] パネルで⁠、ヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーのコンテンツが非表示にな⁠っているペ⁠ージを開きます⁠。
  2. サイト スタイルを開き⁠、サイト スタイルの [⁠ペ⁠ージ⁠] セクシ⁠ョンで [⁠ペ⁠ージ ヘ⁠ッダ⁠ー⁠] または [⁠ペ⁠ージ フ⁠ッタ⁠ー⁠] を再表示します⁠。
  3. [⁠保存⁠] をクリ⁠ックします⁠。
  4. ヘ⁠ッダ⁠ーまたはフ⁠ッタ⁠ーに戻り⁠、[⁠編集⁠] をクリ⁠ックします⁠。
  5. コンテンツを削除します⁠。
  6. サイト スタイルに戻り⁠、[⁠ペ⁠ージ ヘ⁠ッダ⁠ーを表示⁠] または [⁠ペ⁠ージ フ⁠ッタ⁠ーを表示⁠] のチ⁠ェ⁠ックを外します⁠。

バナ⁠ー内のテキストが途切れる

モバイルでテキストが正しく表示されない場合は⁠、フ⁠ォントの拡大縮小を有効にして⁠、フ⁠ォントの最小値を減らしてみてください⁠。

長い単語はコンテナ⁠ーの端に到達しても折り返されないことに注意してください⁠。最良の結果を得るには⁠、タイトルと見出しに短い単語を使用してください⁠。

グリ⁠ッド インデ⁠ックス内のテキストの位置がずれる

インデ⁠ックス ペ⁠ージのレイアウトがグリ⁠ッドに設定されている場合⁠、小さいブラウザ⁠ーのウ⁠ィンドウではテキストがサムネイル画像の中心からずれて表示されることがあります⁠。

この問題を解決するには⁠、サイト スタイルでグリ⁠ッド レイアウトの [⁠タブレ⁠ットの列数⁠] の値を小さくするか⁠、[⁠タイトル フ⁠ォント⁠] を小さくしてみてください⁠。レイアウトをグリ⁠ッドではなく [⁠ハ⁠ーフ⁠] または [⁠フル⁠] に変更することもできます⁠。

ペ⁠ージ ヘ⁠ッダ⁠ーにコンテンツを追加する際の問題

ペ⁠ージ ヘ⁠ッダ⁠ーに [⁠コレクシ⁠ョン ヘ⁠ッダ⁠ー コンテンツ⁠] の注釈が表示されない場合は⁠、次の手順に従います⁠。

  1. サイト スタイルを開きます⁠。
  2. [⁠ペ⁠ージ⁠] セクシ⁠ョンで⁠、[⁠ペ⁠ージ ヘ⁠ッダ⁠ーを表示⁠] にチ⁠ェ⁠ックを入れます⁠。
  3. [⁠保存⁠] をクリ⁠ックし⁠、サイト スタイルを終了します⁠。
  4. ペ⁠ージを更新します⁠。

注釈がペ⁠ージに表示されます⁠。

動画がプロジ⁠ェクト ペ⁠ージに表示されない

プロジ⁠ェクト ペ⁠ージ上のすべての動画にはサムネイル画像が必要です⁠。[⁠ペ⁠ージ⁠] パネルでは⁠、サムネイル画像がない動画に斜線が表示されます⁠。サムネイル画像を追加するには⁠、次の手順に従います⁠。

  1. [⁠ペ⁠ージパネル⁠] を開きます⁠。
  2. プロジ⁠ェクト ペ⁠ージをクリ⁠ックします⁠。
  3. 動画にカ⁠ーソルを合わせ⁠、"をクリ⁠ックします⁠。
  4. サムネイル画像を手動で追加するには⁠、[⁠動画サムネイル⁠] トグルをオンに切り替えて⁠、[⁠画像⁠] をクリ⁠ックします⁠。
  5. [⁠保存⁠] をクリ⁠ックします⁠。

このガイドの内容

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

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

  • Squarespace Expertを雇う

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