コレクション ページからイベントやその他のコレクション アイテムを取得して、カレンダー形式で表示します。

カレンダー ブロックを使用して、サイトの他のエリアにあるイベント ページのイベントを表示するカレンダーを作成します。カレンダー ブロックには、他のコレクション アイテムも表示できます。

動画を見る

始める前に

カレンダー ブロックは予約に対応していません。予約には、Acuity Schedulingブロックを使用することをおすすめします。

カレンダー ブロックを追加する

カレンダー ブロックを追加するには、次の手順に従ってください。

1. ページまたは投稿を編集し、[ブロックを追加] または挿入箇所をクリックしてから、[カレンダー] をクリックします。ヘルプについては、「ブロックを使用したコンテンツの追加」をご参照ください。
2. ブロックの鉛筆アイコンをクリックして、ブロック エディターを開きます。
3. コンテンツを表示するコレクション ページを選択します。カレンダー ブロックには、1つのコレクション ページのコンテンツのみを表示できます。サイトがバージョン7.0の場合は、[適用] をクリックして変更を公開します。

カレンダー ブロックに表示する

カレンダー ブロックには、以下のコレクションからのアイテムを表示できます。

• イベント - 今後のイベントや過去のイベントへのリンク。イベント タイトル、イベント時間、アイキャッチ画像を表示します。カレンダー ブロックは、イベント ページでの使用に最適化されています。
• ブログ - 公開日ごとのブログ投稿へのリンク。投稿タイトルとアイキャッチ画像を表示します。
• 商品 - 公開日ごとの商品へのリンク。商品名、説明、アイキャッチ画像を表示します。
• アルバム (バージョン7.0) - 公開日ごとのアルバム トラックへのリンク。トラックのタイトルを表示します。
• ギャラリー (バージョン7.0) - 公開日ごとの画像へのリンク。画像のタイトルを表示します。

最適な見た目を実現するには、カレンダー ブロックに表示されるコレクション内の各アイテムに、抜粋とアイキャッチ画像を追加することをおすすめします。

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

• アイテムの抜粋は、カーソルを合わせると表示されます。
• アイキャッチ画像は、指定されたカレンダーの日付の正方形のエリアに収まるようにトリミングされて表示されます。
• アイテムのない日付は、ブロックのサイズに応じて、灰色で表示されるかサイトの背景色と一致します。カレンダー ブロックには、固有のスタイル微調整オプションはありません。
• イベントが午前0時に終了するように設定されている場合、カレンダー ブロックでは午前0時をはさむ両方の日にイベントが表示されます。最初の日のみを表示するには、リンクされたイベント ページで終了時刻を午後11時59分に調整してください。
• カレンダー ブロックには、今後のイベントは表示されますが、今後の公開が予定されているブログ投稿は表示されません。

インタラクティブ機能

カレンダー ブロックには現在の月が表示された状態で読み込まれます。また、カレンダー ブロックには、訪問者が詳細をナビゲートして表示するのに役立つインタラクティブ機能が含まれています。

• 自動的に上部に矢印コントロールが表示され、月ごとに移動できます。
• アイテムの日付をクリックすると、元のアイテム ページが開きます。
• 同じ日付に複数のアイテムが発生する場合は、各アイテムの時間とタイトルが同じボックスに表示されます。週の高さは自動的に拡張され、追加のアイテムが表示されます。
• 特定の日付に複数のアイテムがある場合、個々のアイテムのアイキャッチ画像は表示されません。

レスポンシブ デザイン

カレンダー ブロックは、小さなディスプレイで表示したときにはページに合わせて調整されます。他のページのコンテンツに対してサイズを調整するには、ブロックのサイズを変更します。

• ブロック幅が600ピクセルより小さい場合、タイトル、イベント時間、抜粋は表示されますが、アイキャッチ画像は表示されません。
• ブロック幅が300ピクセル未満の場合は、タイトルのみが表示されます。