ブログのランディング ページと投稿に適用するレイアウトを選択します。

バージョン7.0では、Brine、Tremont、およびYorkテンプレート ファミリーは同じブログ ページを共有しています。このデザインでは、ブログ投稿を表示するためのオプションに以下の2種類が提供されています。

• グリッド - ブログ投稿にリンクするアイキャッチ画像をモダンな外観のグリッドで表示
• リスト - 最新の投稿から順に表示される従来型のスタック式リスト

このガイドでは、グリッド/リストの標準的なブログ ページ固有の機能について紹介します。

このガイドは、バージョン7.0のテンプレートを対象としています。バージョン7.1のブログ ページの詳細については、「コレクション ページのセクション」をご参照ください。バージョン7.0の他のテンプレートについては、テンプレートのガイドをご参照ください。

レイアウトを選択する

サイト上のすべてのブログ ページをグリッドまたはリスト レイアウトに設定する方法は以下の通りです。

1. ブログ ページに移動します。
2. [サイト スタイル] パネルを開きます。
3. [ブログ: リスト] セクションまで下にスクロールします。
4. グリッド レイアウトには [スタイル: グリッド] を、リスト レイアウトには [スタイル: スタック] を選択します。

グリッド ランディング ページのスタイルを設定する

グリッド レイアウトでは、アイキャッチ画像を投稿して画像タイルを作成します。投稿のタイトルとメタデータは下に表示されます。

サイト スタイルの [ブログ: リスト] セクションで以下の手順に従います。

• [行あたりの投稿数 (最大)] で投稿数を設定します。
• [間隔設定] で、アイキャッチ画像の間隔を調整します。この値を0pxに設定すると、アイキャッチ画像は間隔を空けずに横に並びます。
• [縦横比] でアイキャッチ画像タイルの形状を設定します。
• [画像を表示] のチェックボックスをオフにすると、アイキャッチ画像は非表示になります。
• [配置位置] でテキストやアイキャッチ画像の配置を選択します。

ページからすべてのテキストを削除し、アイキャッチ画像のみを表示する方法は以下の通りです。

1. [ブログ: メタデータ] セクションで [プライマリ: なし] と [セカンダリ: なし] を選択します。
2. [ブログ: リスト] セクションで [タイトルを表示] のチェックボックスをオフにします。
3. 投稿の抜粋または全文を有効にしている場合は、[抜粋を表示] または [投稿の本文を表示] のチェックボックスをオフにします。

アイキャッチ画像が含まれないタイルは、空白のスペースとして表示されます。間隔設定が0pxに設定されていても、アイキャッチ画像の行間にはある程度の空白が表示されます。

リスト ランディング ページのスタイルを設定する

リスト レイアウトでは、投稿のアイキャッチ画像が投稿タイトルの上に表示されます。投稿のタイトルとメタデータは下に表示されます。

サイト スタイルの [ブログ: リスト] セクションで以下の手順に従います。

• [画像の最大幅] の微調整オプションを使用して、アイキャッチ画像のサイズを設定します。
• [縦横比] でアイキャッチ画像タイルの形状を設定します。
• [画像を表示] のチェックボックスをオフにすると、アイキャッチ画像は非表示になります。
• [セパレーター] の微調整オプションで、投稿間の線のスタイルを設定したり非表示にしたりできます。
• [タイトルを表示] のチェックボックスをオフにすると、投稿タイトルを非表示にできます。
• [メタデータ] でメタデータの表示場所を選びます。
• [配置位置] でテキストやアイキャッチ画像の配置を選択します。

ランディング ページに投稿の抜粋または全文を追加する

ブログのランディング ページに表示するコンテンツの量に応じて、投稿の抜粋または全文を含めることもできます。

以下の手順に従い、ブログ設定でいずれかのオプションを有効にします。

1. [ページ] パネルで、ブログ ページにカーソルを合わせてをクリックします。
2. [詳細設定] タブで、[抜粋] または [全文] のいずれかを選択します。
3. [保存] をクリックします。
4. 新しい微調整オプションは、サイト スタイルの [ブログ: リスト] セクションに表示されます。これらの微調整オプションを使用して、投稿全文または抜粋テキストの表示/非表示を設定したり、抜粋に [続きを読む] のリンクを追加したりできます。
5. 投稿コンテンツまたは抜粋テキストをブログ投稿に追加します。

注: ここで非表示にしても、概要ブロック、検索エンジンの結果、およびソーシャル メディアの投稿に抜粋が表示される場合があります。

ブログ投稿のスタイルを設定する

サイト スタイルの [ブログ: アイテム] セクションにある微調整オプションを使用して、ブログ投稿のスタイルを設定します。

レイアウトのスタイルを設定する方法は以下の通りです。

• メタデータ、投稿タイトル、共有ボタン、コメント フィールドの並べ方を [配置位置] で設定します。
• 共有アイコンを使用して、投稿コンテンツの上と下のどちらに共有ボタンとコメント ボタンを表示するかを選択します。
• [メタデータ] でメタデータの表示場所を選びます。ブログ投稿には、ランディング ページと同じ2種類のメタデータが表示されます。

ナビゲーション エレメントのスタイルを設定する方法は以下の通りです。

• [ページ分割を表示] の微調整オプションで、矢印、「次へ」と「前へ」のラベル、ブログ投稿のタイトルを表示設定を行います。
• [ページ分割のメタ] で、メタデータを1種類追加します。
• ナビゲーション エレメントを非表示にするには、[ページ分割を表示] の微調整オプションのチェックボックスをオフにし、[ページ分割のメタ: 非表示] を選択します。

コメントを有効にする

これらのテンプレートでは、コメントは既定で無効になっています。コメントを有効にするには、以下の手順に従ってください。

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

詳細については、「コメントとシンプルないいね！を管理する」をご参照ください。

注: 個々の投稿へのコメントを有効にするには、先にすべてのコメントを有効にする必要があります。

メタデータ

ブログ ページと個々のブログ投稿に対し、[プライマリ] と [セカンダリ] の微調整オプションを使用して、サイト スタイルの [ブログ: メタデータ] セクションに表示するメタデータを選択します。次のいずれか2つを選択できます。

• カテゴリー
• 投稿者
• 投稿された日付
• 場所
• タグ
• コメント

[ブログ: リスト] セクションと [ブログ: アイテム] セクションの [メタデータ] 微調整オプションで、これらを表示する場所を選択します。

すべてのメタデータが1行で表示されるようにするには、[メタ フォント] のサイズまたはエレメントの長さを変更 (例: 投稿あたりのタグ数を減らすなど) します。

ランディング ページのページ分割

[ブログ: リスト] セクションの [ページ分割のラベルを表示] と [ページ分割の矢印を表示] の微調整オプションを使用して、ブログのランディング ページの下部にあるナビゲーション矢印やテキストのスタイルを設定します。

ブログ設定で、ページごとに表示する投稿の数を設定します。

ヒントと例

ご自分に合った設定を見つけるには、上記のオプションを試してみるのが一番です。この作業を開始する方法を下にいくつか提案します。

• 画像に焦点を当てる - グリッド レイアウトからテキストの一部または全部を削除して、アイキャッチ画像を強調します。これは、写真ブログを作成する場合に便利です。
• 動画に焦点を当てる - 投稿全文をリスト形式で表示して、動画ブロックのブログ リストを作成します。
• 複数のブログのスタイルを設定する - 複数のブログ ページで投稿の抜粋または全文を有効にして、それぞれに独自の雰囲気を演出します。

Aria、Basil、Brine、Pedroのデモ サイトにアクセスして、様々なスタイル設定が施されたページをご覧ください。

その他のヘルプ

• テキストのフォントと色は、サイト スタイルの [ブログ: タイポグラフィと色] セクションで変更できます。
• ブログ投稿にはカスタマイズ可能な共有ボタンがあります。
• どちらのレイアウトでも、スマートフォンではブログ ページとブログ投稿はスタック ビューで表示されます。
• 各テンプレートには、ブログ ページの外観に影響を与えるスタイル設定が他にもあります。たとえば、Brineにはページ ヘッダーとバナーがあります。詳細については、テンプレートのガイドをご参照ください。
• ブログ ページや投稿の追加に関する一般的なサポートが必要な場合は、「Squarespaceでブログを運営する」をご参照ください。