サイト上で直接メニューを使用して、レストランの前菜、メインディッシュ、デザートを整理します。

メニュー ブロックを使用して、レストランのメニューをサイトに表示します。これは、PDFのメニューを埋め込むための優れた代替手段です。PDFメニューは、ページ上に直接表示されるテキストと同様にSEOに適しているとは限りません。特別なフォーマットを使用すると、単一のメニュー ブロックに複数のメニューを作成できます。

このガイドでは、レストラン サイトにメニュー ブロックを追加する方法について説明します。サイトのナビゲーションにドロップダウン メニューを作成するには、「ナビゲーションにドロップダウンを追加する」をご参照ください。

メニュー ブロックは、BusinessおよびCommerceプランでご利用になれるプレミアム機能です。

ヒント: レストランやその他のホスピタリティ業界のビジネスを運営している場合は、予約、注文、テーブル、イベントを管理するためのオールインワン ツールであるTockをおすすめします。

メニュー ブロックを追加する

メニュー ブロックを追加するには、次の手順に従います。

1. ページまたは投稿を編集し、[ブロックを追加] または挿入箇所をクリックして、メニューから [メニュー] をクリックします。ヘルプについては、「ブロックを使用してコンテンツを追加する」をご覧ください。
2. ブロックの鉛筆アイコンをクリックして、ブロック エディターを開きます。
3. [コンテンツ] タブのテキストを編集して、メニュー、メニュー セクション、およびメニュー項目を作成します。
4. [デザイン] タブを使用して、メニューのデザインをカスタマイズします。
5. 書式設定のヒントについては、[書式設定に関するヘルプ] タブを使用してください。

メニューを追加する

開始しやすいように、メニュー ブロックにはサンプル コンテンツが含まれています。フォーマットを維持するために、サンプル項目を1つずつ独自のメニュー項目に置き換えることをおすすめします。コンテンツを削除し、このセクションの手順に従って最初から始めることもできます。

メニュー ブロックでは、複数のメニューを保持できます。たとえば、ブランチ、ランチ、ディナーのメニューを同じブロックに追加することができます。

メニューを追加するには、次の手順に従います。

1. [コンテンツ] タブで、メニューの名前を入力します。
2. その下に少なくとも3つの等号 (=) を追加します。

3. 等号の真下に、メニューに関する説明やメモを任意で追加します。

4. 同じ形式を使用して、下にメニューを追加します。

これらのメニューは、ページ上のカテゴリー ナビゲーションに変わります。以下のセクションで、残りのメニュー コンテンツを追加する方法を説明します。

注: ブロックにメニューを1つだけ追加した場合、カテゴリー ナビゲーションが表示されないことがあります。

セクションを追加する

各メニューはセクションに分割できます。たとえば、セクションを使用すると、前菜、サラダ、主菜、サイド メニュー、デザートごとにメニューを整理できます。

セクションを作成するには、以下の手順に従います。

1. 目的のメニューの下にセクション名を入力します。
2. その下に少なくとも3つのハイフン (-) を追加します。
3. ハイフンのすぐ下の行に、セクションの説明をオプションで入力します。

セクションはページ上で見出しとして表示されます。

メニュー項目を追加する

メニュー項目を追加するには、次の手順に従います。

1. セクションの下に項目の名前を入力します。
2. 名前の下に項目の説明を追加します。
3. 価格を表示する場合は、説明の下に価格を追加します。
4. 価格バリエーションを追加する場合は、価格の間にスラッシュ (/) を使用します。これは、グラス/ボトル、または全部/半部の価格を設定するのに役立ちます。
5. 価格として$MKTまたは$Market Priceを追加して、市場価格を追加します。通貨記号が最初にあれば、メニュー項目または説明の直後に価格を配置できます。
6. メニューにオプションやアドオンを追加するには、価格の下の新しい行に「+」を入力します。
7. 項目の数が奇数の場合は、セクションの最後に
   タグを追加すると、メニュー列を均等にすることができます。
8. 一部のメニューに余分なパディングがある場合は、最初のメニューで最小の高さを設定する方法をご参照ください。

デザインをカスタマイズする

メニュー ブロックのメニュー スタイルと通貨記号をカスタマイズできます。

メニュー スタイル

ブロック エディターの [デザイン] タブをクリックし、スタイルを選択します。

• 中央に配置: テキストが中央に配置された、1列のメニューを作成します。このデザインは、短いメニューに最適です。
• 複数列: 複数の列に左揃えのテキストが表示されるメニューが作成されます。列数は、サイトとブラウザーの幅によって異なります。

通貨記号

[デザイン] タブをクリックし、[通貨記号] ドロップダウン メニューからメニュー価格の通貨を選択します。[$ドル]、[€ユーロ]、[£ポンド]、[¥円] から選択できます。

注: メニュー ブロック項目の3行目で、ここで選択した通貨記号が数字の前に表示されます。これは、[コンテンツ] タブでメニューを作成する際に別の通貨記号を使用した場合、あるいは記号をまったく使用しなかった場合でもどうようです。別の通貨記号を使用する場合は、以下の手順をご確認ください。

フォントと色

サイト スタイルを使用して、メニューのフォントと色を変更します。これらのスタイルの設定方法は、サイトが使用しているSquarespaceのバージョンによって異なります。

書式設定のヘルプ (コンピューターのみ)

[書式設定に関するヘルプ] タブには、フォーマットされたメニュー、セクション、およびメニュー項目の例があります。

ヒント: メニュー ナビゲーションとセクションのフォーマットが意図したとおりにならない場合は、メニュー ブロックを使用してメニュー項目を追加し、次にテキスト ブロックを含むヘッダーを追加できます。例については、 Hunterテンプレートのデモ コンテンツをご参照ください。

トラブルシューティング

メニュー項目の位置が揃っていない

メニュー ブロックの配置は、説明の有無、タイトルと説明のテキストの長さ、項目の数など、さまざまな要因によって異なります。

ブラウザーは、作成する各列のコンテンツが等しくなるようにするため、テキストは上から下、左から右に流れます。そのため、アイテムのタイトルが常に完全に揃って並ぶとは限りません。

アイテムの数が奇数の場合は、セクションの最後に次のHTMLタグを追加すると便利です。

これにより、メニュー項目が表示される行数が均等になるように書式を整えることが可能になります。

メニューの余分なパディング

メニュー カテゴリーの下に余分なパディングや空白スペースが表示される場合は、最初のメニュー カテゴリーのコンテンツ量が原因である可能性があります。メニュー ブロックの最小の高さは、最初のメニュー カテゴリーのコンテンツに応じて設定されます。これにより、他のカテゴリーに余分なパディングが表示される可能性があります。

例えば、朝食メニューが多く昼食メニューが短い場合、朝食メニューの高さに合わせて昼食メニューの項目の下に空白ができます。これを防ぐには、各メニューに同量のコンテンツを追加するか、コンテンツが最も少ないメニューを最初のカテゴリーとして追加します。

入力中にテキストが表示されない

入力中にテキストが表示されない場合は、コンテンツの入力を完了してからブロックを保存します。再度開くと、入力したとおりにコンテンツが表示されます。

通貨記号が利用できない

使用できない通貨を使用している場合は、項目の3行目に通貨記号を入力し、スペースを追加してください。次に、通貨記号と価格を入力します。これにより、組み込みの通貨記号がオーバーライドされ、入力した通貨記号が表示されます。

メニュー ブロックにテキストを貼り付けられない

コンピューターでは、編集中にメニュー ブロックを右クリックすることはできません。コンテンツをコピー&ペーストするには、代わりにキーボード ショートカットを使用します。書式設定の問題を防ぐために、次のショートカットをおすすめします。

Mac

• コピー - ⌘ + C
• 貼り付け - ⌘ + Shift + V

Windows

• コピー - Ctrl + C
• 貼り付け - Ctrl + Shift + V

テキストの書式が正しく設定されない

メニュー ブロック内のエラーは、テキストの書式設定に影響します。問題を回避するには、次のヒントを使用してテキストのトラブルシューティングを行ってください。

• メニューを区切る等号 (=) が3個以上あり、セクションを区切るハイフン (-) が3個以上あることを確認します。
• テキストを入力するたびにReturnまたはEnterを押して、各行が正しく配置されるようにしてください。
• コンテンツの区切りにスペース バーを使用しないでください。メニュー ブロックではこのようなスペースの使い方はしないため、テキストの書式が正しく設定されません。