小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

レストラン/カフェのメニューページの作成

最終更新日: 2016-08-08
レストラン/カフェのメニューページ

CMS「すぐ使えるCGI」を使ってレストラン、バー、カフェ、喫茶店、パン屋さん、パティスリー、ケーキ屋さんなど飲食店のメニューを写真付きで紹介するページを作成する方法をご紹介します。

メニューページ管理機能

メニューページの管理機能

管理画面から画像をアップロードしてメニューに表示できます。

メインの紹介文の他、価格などの追加情報を最大10項目まで増やすことができます。

このツールの使い方

ダウンロードと設置

下のボタンから製品をダウンロードし、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

メニューページ管理ツール(CMS)ダウンロード ※お試し利用は1ヶ月間無料です。

動作確認

「8. 設置完了」まで設置がうまく行ったら、テストで2-3件新規登録して下さい。

表示確認

管理画面一覧の「チェック」ボタンを押して、デモと同様の表示になるかを確認して下さい。


メニューページのデザイン変更方法

「ステップ by ステップガイド」の「9. やりたいことができるかの確認」はこのツールを初期設定で使う場合の説明ですので飛ばして、代わりにこのページの説明をご覧下さい。このページでは、メニューページのデザイン変更に必要なポイントをご紹介します。

  1. 1段に表示するメニューの数
  2. 1ページに表示するメニューの段数
  3. メニュー画像のスタイル(枠、角丸等)
  4. 項目の追加

初めての方

初めて「すぐ使えるCGI」をお使いでこのページで説明している設定変更方法が全くイメージできない場合は、先に「テンプレート解説」にざっと目を通して下さい。

全般手順

以下に各設定方法をご説明しますが、いずれの場合も設定を変更したらサーバへの反映作業を行って下さい。反映作業とは、以下の手順です。

  1. 変更したファイルをサーバに上書きアップロード
  2. 管理画面一覧の「再構築(テンプレート変更反映)」ボタンを押す
  3. ブラウザの表示を再読み込みして確認

1段に表示するメニューの数

このページは、端末の幅によって1段に表示するメニューの数が変わる「レスポンシブWebデザイン」になっています。レスポンシブWebデザインの「フレームワーク」として「Pure」を使っています。

Pure の概要については下記ページをご覧下さい。なお、Pure について知らなくてもメニューページの編集は可能です。

Pureの使い方(CSSフレームワーク)

固定幅にしたい場合

レスポンシブWebデザイン(PC/スマホ両用)を止めて固定幅にしたい場合はまず下記をご覧下さい。

レスポンシブWebテンプレートを非レスポンシブ(PC専用/スマホ専用)に変更する方法

1段に表示するメニューの数の設定

1段に表示するメニューの数は、templates/article/article_list.txt の冒頭のクラス名として設定されています(下記部分)。(クラス名を指定すると幅が決まるのが、CSS フレームワーク Pure の仕組みです。)

<div class="pure-u pure-u-1 pure-u-sm-1-3 pure-u-lg-1-4 menu-item">


ぞれぞれ、以下の意味です。

pure-u-1一番小さい場合は1段に1つ
pure-u-sm-1-3タブレット程度以上の場合は3つ
pure-u-lg-1-4PC程度の幅だったら4つ

「1-3」「1-4」はそれぞれ「メニュー1個の幅が全体の『1/3』、『1/4』」を意味します。

例えば、スマホなど小さな画面では1段に2つずつ、それ以上だったら1段に3つずつメニューを表示したいのであれば、以下の様に設定を変更して下さい。

<div class="pure-u pure-u-1-2 pure-u-sm-1-3 pure-u-lg-1-3 menu-item">

最大幅の設定

大きなディスプレイで横幅が伸びすぎてしまわないように、このサンプルには最大幅が設定してあります。

この設定は webdir/parts/css/sugu-site.css にありますので適宜変更して下さい(下記青字部分)。

.sugu-window {
    max-width: 1024px;
    margin: 0 auto;
}

1ページに表示するメニューの段数

登録したメニュー数が多い場合でも、初期設定では全てのメニューを1ページに表示します。一定件数ごとにページを区切りたい場合は、下記の様に調整して下さい。

admin/admin.cgi の編集

admin/admin.cgi を開き、以下の青字部分を希望の数に変更して下さい。

幅によって1段の数が変わるように調整した場合、その公倍数(2個、3個、または4個の場合、公倍数 は 12)にすると1段に半端が出ずにうまくページが区切られます。

#--------------------------------------------------------[line 170]--
# 一覧に表示する件数
#--------------------------------------------------------------------
# 全一覧および管理画面の記事一覧に表示する記事件数を設定して下さい。
# これより多い登録があるとページ分割されます。
# 0を指定すると1ページに全件を表示します。

$conf{index_list_no} = 0;

メニュー画像のスタイル(枠、角丸等)の設定

メニュー画像には初期設定で枠が付いています。この設定は webdir/parts/css/sugu-218-food-menu.css にありますので適宜変更して下さい。

画像のスタイル設定例

  • 枠の太さや色を変えるには青字部分を変更します。枠が全く必要ないならこの行を削除して下さい。
  • 画像の角の丸みを変更するには赤字部分を変更して下さい。
.menu-item img {
	border: 6px solid #edede4;
	border-radius: 3px;
	margin: 0.8em 0;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.085);
	display: block;
	box-sizing: border-box;
	width: 100%;
}

画像用スタイルシート設定のための注意点

上記以外の部分も適宜変更できますが、「display: block;」、「box-sizing: border-box;」、「width: 100%;」の設定は必要ですので残して下さい。

画像の形が異なる場合

メニューによってアップロードされる画像の形(縦横比)が異なる場合は、この設定ではうまく行きません。下記ページをご覧の上調整して下さい。

画像の表示サイズを揃える方法

項目の追加

登録・表示する項目は、「タイトル」と「コメント」の他に、カスタム項目が最大10項目まで追加できます。「価格」はこの機能を使って追加した項目です。

詳しい方法は下記ページをご覧下さい。

カスタム項目(自由項目)の追加方法

関連リンク

さらに詳しく