コレクション ページからブログ投稿やイベントなどのコンテンツのセットを収集し、サイトの他の場所に独自のレイアウトで表示します。

概要ブロックを使用すると、ブログ投稿や商品など、特定のコレクション ページのコンテンツをさまざまなレイアウトで表示できます。

概要ブロックは、以下のような場合に適しています。

• ホームページでコレクション アイテムを目立たせる。
• 他では難しいレイアウトでブログ投稿、商品、動画を表示する。
• スタイルを大幅に変更せずに、コンテンツのレイアウトを変更する。
• ブログ投稿または商品詳細ページの最後に関連コンテンツへのリンクを追加する。
• レシピまたはコンテンツのインデックスを作成する。

動画を見る

表示されるコンテンツ

概要ブロックは、サイト上の特定のコレクション ページからコンテンツを取得します。サポートされているコレクション ページにコンテンツを追加してから、ブロックを追加してください。最適な表示を実現するには、ブロックに表示するすべてのアイテムにアイキャッチ画像を追加してください。概要ブロックに直接コンテンツを追加することはできません。

概要ブロックを使用して、以下を表示できます。

概要ブロックを追加する

概要ブロックを追加するには、次の手順に従ってください。

1. ページまたは投稿で [編集] をクリックし、[ブロックを追加] または挿入箇所をクリックしてから、[概要] をクリックします。ヘルプについては、「ブロックを使用したコンテンツの追加」をご参照ください。
2. ブロックに表示される鉛筆アイコンをクリックして、ブロック エディターを開きます。
3. [コンテンツ] タブで、表示するコンテンツを選択します。
4. [デザイン] タブをクリックしてレイアウトを変更し、レイアウト設定を編集します。
5. 完了したら、ブロック エディターの外側をクリックします。
6. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

各ステップの詳細については、以下のセクションをご参照ください。

コンテンツを選択する

概要ブロック エディターの [コンテンツ] タブで、[ページを選択] をクリックして、ブロックに掲載するページを選択します。ページをクリックすると、そのコンテンツが概要ブロックに表示されます。

イベント ページでは、[イベントの期間] を選択して、[今後のイベント] もしくは [過去のイベント] を表示できます。

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

• ひとつの概要ブロックにつき1ページのコンテンツのみを掲載できます。ただし、1つのページに複数のブロックを追加して、必要なコンテンツをすべて掲載することができます。
• 概要ブロックがコンテンツを取得するページはいつでも変更できます。
• タイトル テキストはコンテンツに直接リンクしています。画像はコンテンツにもリンクします。ただし、バージョン7.0のギャラリー ページとプロジェクト ページの画像は例外で、概要ブロック ページのライトボックスで開きます。

メタデータを選択する

[プライマリ メタデータ] と [セカンダリ メタデータ] をクリックして、各アイテムで最も目立つように表示する情報を選択します。

• アイテムに応じて、[投稿された日付]、[イベントの日付]、[イベントの時間]、[カテゴリー]、 [タグ]、[投稿者]、[場所]、[コメント]、もしくは [なし] を選択できます。
• この情報の配置は、レイアウトによって異なります。
• アイテムに選択したメタデータがない場合、アイテムとともに表示されません。そのため、この情報をブロックに表示させたい場合は、すべてのコレクション アイテムのすべてのフィールドに入力することをおすすめします。

コンテンツをフィルタリングする

[アイテムを絞り込む] をクリックして、コレクションから取得したコンテンツにさまざまなフィルターを適用します。

• カテゴリー - カテゴリーを選択すると、そのカテゴリーのコンテンツのみが表示されます
• タグ - タグを選択すると、そのタグが付けられたコンテンツのみが表示されます
• 注目のみ - このトグルをオンにすると、注目のブログ投稿や動画など、注目として指定されたコンテンツのみが表示されます。

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

• カテゴリーやタグを追加するか、コレクション ページ自体で注目としてアイテムを設定する必要があります。概要ブロックでは、これらの設定を変更することはできません。
• カテゴリーやタグが未公開のアイテムにのみ表示される場合、そのカテゴリーやタグは概要ブロック フィルターのオプションとして表示されません。
• バージョン7.1では、ストア ページの概要ブロックを一度に1つのカテゴリでのみフィルタリングできます。

概要ブロックのレイアウト

概要ブロックは4つあり、その動作はすべてのサイトで一貫しています。概要ブロックの [デザイン] タブでレイアウトを変更できます。レイアウトを選択すると、ページにレイアウトのプレビューが表示されます。以下は、各レイアウトのブログ投稿の例です。

デザイン設定を編集する

概要ブロックの [デザイン] タブでは、表示するアイテムの数、テキストの配置、アイテムのサイズとアイテム間のスペース、およびブロックの外観をカスタマイズできます。設定を変更すると、変更内容のプレビューがページに表示されます。

すべてのレイアウトには、次のオプションが含まれます。

デザイン オプション	目的
アイテム数	ブロックに表示するアイテムの数を設定します。最大30件のアイテムを表示できます。
テキスト	文字のサイズをS、M、L、XLから選択します (ウォール レイアウトでは使用できません)。XL設定では、抜粋と説明のサイズも大きくなります。 テキストの配置を [左]、[中央]、もしくは [右] から選択します。
タイトル	トグルをオンにすると、ブロック内のアイテムのタイトルが表示されます。オフにすると、アイテムのタイトルが非表示になります。
アイキャッチ画像	トグルをオンにすると、ブロック内のアイテム画像が表示されます。アイテム画像を非表示にするには、スイッチをオフにします。 ギャラリー ページやプロジェクト ページの画像を表示すると、画像はブロック内に表示されます。ブログ投稿、イベント、もしくは商品を表示する際、ブロックは次のリストの最初にある利用可能な画像を取得します。 アイテムのアイキャッチ画像 (ブログ投稿、商品、イベント用) 画像ブロック (ブログ投稿もしくはイベント内) ギャラリー ブロック (ブログ投稿もしくはイベント内)
抜粋	トグルをオンにすると、ブロック内にアイテムの抜粋や説明が表示されます。オフにすると、アイテムの抜粋や説明が非表示になります。 ブログ投稿を表示すると、抜粋がブロックに表示されます。イベント、ギャラリー ページの画像、商品、もしくはプロジェクト ページの画像を表示する場合、アイテムの説明がブロックに表示されます。
メタデータの位置	日付や投稿者などのアイテム メタデータの場所を [タイトルの上]、[タイトルの下]、[コンテンツの下] から選択します。[コンテンツ] タブに表示されるメタデータの種類を選択します。
背景 (バージョン7.1のみ)	トグルをオンにすると、ブロックに背景色を追加したり、角の半径を設定したり、背景のパディングを変更したりできます。
ストローク	ブロックの外枠を描く実線または点線を有効にします。実線と点線の両方で、ストロークの色と太さを設定します。
ブレンド モード	ドロップダウン メニューを使用して、透明度の設定を選択します。こうしたエフェクトは、画像やその他のビジュアル コンテンツの前に概要ブロックを重ねる場合に最適です。
ぼかし	トグルをオンに切り替えて、エレメントもしくは背景をぼかし、スライダーでぼかし具合を調整します。

創造エディター セクションでは、ストローク、ブレンド モード、ぼかしをカスタマイズできます。クラシック エディターが使用されているセクションでは、ストロークのみ使用できます。

レイアウト固有のオプション

各概要ブロックには、そのレイアウトに固有の追加のデザイン オプションがあります。

ヒント: 概要ブロックのキャプション スタイルは、サイトによって異なります。

アイテム固有のオプション

概要ブロックに表示するコレクション アイテムのタイプによっては、追加のオプションが表示される場合があります。

コレクションの種類	追加のデザインオプション
ブログ ページ	[続きを読む] リンク - これを有効にすると、投稿コンテンツの下とメタデータの上に [続きを読む] リンクが表示されます。[抜粋] トグルが無効になっていると、[続きを読む] リンクは表示されません。
ストア ページ	価格- 有効にすると、商品タイトルの下に商品価格が表示されます。 商品クイック ビューを有効にする - オンにすると、商品クイック ビューが有効になります。
動画ページ	説明 - 有効にすると、動画の説明が動画タイトルの下に表示されます

概要ブロックのテキストをスタイル設定する

概要ブロック スタイルのオプションは、サイトのバージョンによって異なります。

カルーセル レイアウトのブロックの上に表示されるヘッダー テキストのサイズは変更できません。

コレクション ページを概要ブロックに置き換える

バージョン7.0のテンプレートでブログ レイアウトが固定されている場合など、概要ブロックを使用してコレクション アイテムをさまざまなレイアウトで表示したい場合があります。以下の手順は、概要ブロックを使用してコレクション ページのレイアウトを置き換える方法を示しています。

ステップ1 - コレクションを [リンクなし] に移動します

オリジナルのコレクション ページをナビゲーション メニューから非表示にするには、そのページを [リンクなし] セクションにドラッグします。こうすることで、訪問者が重複したコンテンツを見ることなく、概要ブロックがページからアイテムを引き出すことができます。詳細な手順については、「ナビゲーション内でのページの移動」をご参照ください。

ページを [リンクなし] に移動したら、ブログ投稿や商品などの新しいコンテンツをここに追加することで、作成する概要ブロックに表示されます。

メモ: このページを削除しないでください。[リンクなし] に移動すると、訪問者からは非表示になりますが、コンテンツは概要ブロックにフィードされます。

ステップ2 - レイアウト ページを作成する

オリジナルのコレクション ページをナビゲーションから非表示にした後、メイン ナビゲーションにレイアウト ページを作成して、訪問者がコレクション コンテンツを見つけられるようにします。

これは、訪問者にあなたのコレクション アイテムを表示するページです。このページを設定すると、非表示のコレクション ページを更新するたびに自動的に更新されます。

ステップ3 - 概要ブロックを追加する

ナビゲーションで置き換えたレイアウト ページに概要ブロックを追加します。概要ブロックで、ステップ1で [リンクなし] に移動したコレクション ページを選択します。

コンテンツ設定とブロック レイアウトを使用して概要ブロックをカスタマイズします。コレクション ページに30個以上のアイテムがある場合は、概要ブロックを追加すると30個以上のアイテムを表示できます。

30件以上のアイテムを表示する

概要ブロックには30個以上のアイテムを表示できません。より多くのアイテムを表示するには、同じページに複数の概要ブロックを追加し、タグを使用してそれぞれに表示するアイテムを選択できます。

この例では、ブログ ページを使用します。

ステップ1 - 投稿のバッチにタグ付けする

まず、30本のブログ投稿それぞれにユニークなタグをつけます。

1. ブログ ページに移動します。
2. 最も古い30本のブログ投稿のセットまでスクロール ダウンします。
3. それぞれにbatch1のような覚えやすい同じタグをつけます。
4. 次の30件のブログ投稿までスクロールします。batch2のように、それぞれに異なるタグを付けます。

すべてのブログ投稿にタグを付けるまで、この方法で30個まとめてタグ付けを行います。タグの追加の詳細については、[カテゴリとタグ] をご参照ください。

ヒント: それぞれのブログ投稿を個別に編集できます。現在のところ、複数の投稿に同時にタグを付ける方法はありません。

ステップ2 - 複数の概要ブロックを追加する

レイアウト ページで、各バッチの概要ブロックを追加します。たとえば、90件のブログ投稿がある場合、30件ずつ3つのバッチになるため、3つの概要ブロックを追加します。

ステップ3 - 各概要ブロックをタグでフィルタリングする

一番下の概要ブロックの場合は、次の手順に従ってください。

1. [コンテンツ] タブで、概要ブロックをブログ ページに接続します。
2. [フィルター アイテム] をクリックして、最初の投稿にタグを追加します。この例では、batch1というタグを追加します。
3. [デザイン] タブで、[アイテム数] を30に設定します。

最初の30件の投稿がこの概要ブロックに表示されます。

バッチの一意のタグを使用して、各概要ブロックを更新し続けます。この例では、中央の概要ブロックをbatch2でフィルタリングし、一番上の概要ブロックをbatch3でフィルタリングします。

ステップ4 - 投稿のタグ付けと概要ブロックの追加を続行する

サイトにコンテンツを追加する際には、各投稿に30個ずつタグを付け続けます。新しいバッチを開始する際には、新しい概要ブロックを追加し、新しいタグでフィルタリングします。

この例では、91本目のブログ投稿を追加する際に、batch4というタグを付け、そのタグのフィルターで概要ブロックをページ上部に追加します。

テキスト アイテムを画像なしで表示する (バージョン7.0)

サイトがバージョン7.0で、画像なしでテキスト アイテムを表示したい場合は、ギャラリー ページと一緒に概要ブロックを使用できます。これは、お客様の声、レビュー、もしくは画像を添付する必要のないその他のコンテンツ セットに最適なオプションです。

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

1. 概要ブロックに表示したいテキスト コンテンツ専用のギャラリー ページを作成し、ページ パネルの [リンクなし] セクションに配置します。
2. 必要なテキスト アイテムごとに画像をアップロードし、そのテキストを画像の説明として追加します。
3. テキストを表示するページに概要ブロックを追加し、ステップ1で作成したギャラリー ページに接続します。
4. ブロック エディターの [デザイン] タブで画像を無効にして、テキストのみが表示されるようにします。

また、テキスト ブロックや引用ブロックで列や行を作成して、同様のテキスト中心のレイアウトを作成することもできます。サイトがバージョン7.1の場合、自動レイアウトを使用してテキストのみのアイテムを表示することをおすすめします。

モバイルでの概要ブロック

創造エディターでは、モバイル端末でも概要ブロックがコンピューターと同じように表示されます。クラシック エディターでは、概要ブロックはモバイルではレイアウトによって表示が異なる場合があります。