ホームページ作成サービス「グーペ」の15日間無料体験でお店のホームページの体裁を整えるまでを図解しながら紹介しています。

 15日間は無料ですので、とりあえず試してみてください。⇒グーペの始め方はこちら

グーペで作成中のサンプルホームページ

 今回は飲食店にとっては大事なメニューページを作っていきます。美容室やカイロプラクティックなど、料金設定のあるお仕事ももちろんメニューページは必要ですよね。

 飲食店のホームページのメニューページは、やっぱり美味しそうな料理の写真があったほうが断然イメージがいいです。

 お料理の写真はぜひ頑張って美味しそうにとってください⇒ホームページの写真

 さて、今回このサンプルホームページで使っている”Oneplate”というデザインはすごくいいのですが、唯一メニューページがちょっと融通が効かないといいますか、写真のサイズが結構大きいです。

 写真のサイズを適当なままメニューページにのせると、

Goopemenu

 こんな感じにデカイ写真が入ってしまいます。これはこれでいいのですが、このサイズより小さな写真は小さいままになってしまって、凸凹な感じになってしまったので、これを

Goopemenu2

 こんな感じに写真のサイズを整えて調整します。

 これを”画像(写真)をリサイズする”と言います。ホームページを作る時に色々使えるので是非トライしてみてください。

画像(写真)をリサイズ、縮小する

 「画像を縮小する!」というそのまんまの名前の便利なサイトがあります。

 画像を縮小する!へアクセスします。

Resize

 このページで、縮小したい写真を選択して縮小したいサイズを選んで、縮小していきます。

 「ファイルを選択」をクリック。

Resize2

 縮小したい写真を選択して「開く」をクリック。

Resize3

 写真が選択されています。

Resize4

 これを繰り返して、縮小したい写真をどんどん選びます。「画像をもっと選択する」をクリックすると、もっとたくさんの画像を選択できるようになります。

Resize5

 こんな感じに、選択しました。

 縮小するサイズは320pxにしました。もっと小さくしたければ、自分で縮小するサイズも決められます。

 「縮小する」をクリック。

 しばらくすると、ズラッと縮小された写真が並びます。これはまだWEB上にあるので、これを一個ずつ「Download」のボタンをクリックしてダウンロードしていきます。

Resize6

 Macの場合はFinderのダウンロードのところに入ります。

Resize7

 こんな感じに元の名前に”s-“が付いています。

 これで、写真のリサイズ、縮小は完成です。

 この写真を使ってメニューページでメニューを作っていきます。

グーペのメニューページを作成する

 グーペの管理画面のページからコンテンツ管理・更新「メニュー更新」をクリックします。

Goopemenu3

 メニュー更新のページです。まず最初に「カテゴリー」から作成していきます。「カテゴリー」をクリックします。

Goopemenu4

 こんな感じになっているので、とりあえず全部削除します。

Goopemenu5

 何にもない状態からカテゴリー分けをします。

Goopemenu6

 カテゴリーって言うとなんだかピンときませんが、要はメニューの見出しです。

 居酒屋なら「おつまみ」「サラダ」「お刺身」「お肉」「お魚」「お鍋」「デザート」とかに分けて、メニューに書きますよね。それと同じです。

 分け方は料理の種類に限りません。例えば、

Goopemenu7

 こんなふうに”ランチセット”というカテゴリーを作って、ランチのセットメニューはごっそりそこに入れちゃっても。

 カテゴリーの名前を入れて「カテゴリー追加」をクリックすると

Goopemenu8

 カテゴリーが追加されます。カテゴリーはいくらでも作って消して、順番入れ替えてとできるので、思いついたままに入れていって修正していく感じで作っていけばいいと思います。

 今回のサンプルのホームページはカフェなので、こんな感じにカテゴリーを作ってみました。

Goopemenu9

 カテゴリーを作ったら、上の「投稿する」をクリックして、メニューを入れていきます。

Goopemenu10

 メニュー名は”オムレツランチ”、カテゴリーはさっき作った”ランチセット”を選択、価格は1000円にしました。

 メニューの紹介文には”当店自慢のフワッフワのオムレツに裏の畑で採れた野菜たちのサラダ、自家製パン、お飲み物のセット。”と入れました。

 その下から写真を選択します。「ファイルを選択」をクリックして

Goopemenu11

 写真を選択します。ちょっとセットっぽい写真がなかったので、とりあえずさっきリサイズしたオムレツの写真を選択して「開く」をクリック。

Goopemenu12

 「お勧めメニューに選択する」にチェックを入れると、おすすめという意味の★マークが入ります。
goopemenu22
こんな感じです。

 「登録する」をクリックすると完成です。

 上の「登録リスト」をクリックすると

Goopemenu14

 いま登録した”オムレツセット”が登録されているのが見れます。

 同じようにしてどんどんメニューを入れていきます。もし写真がなければ、写真だけあとからでも入れられるので、じゃんじゃんメニュー作っちゃいましょ。

Goopemenu15

 こんな感じに入れてみました。

 これで、メニューページの完成です。

 完成と言っても、飲食店の場合は特にですが、メニューページはちょっとずつ修正したり、新メニューが入ったら追加したり、ちょこちょこいじっていくページです。

グーペのメニューページの変更とか

カテゴリーの順番を入れ替える

 メニューのカテゴリーの順番を入れ替える時は

Goopemenu16

 カテゴリーのところで緑の矢印マークをドラッグして入れ替えます。

メニューの順番を入れ替える

 カテゴリーの中のメニューの順番を入れ替えたい時は「表示順並び替え」をクリックして、カテゴリーを選んで緑の矢印マークをグリグリ動かして入れ替えます。

Goopemenu17

メニューを下書きにひっこめる

 やめるわけじゃないんだけど、しばらくやらないんだよなーというメニューや、夏だけの限定メニューなどは「登録リスト」からそのメニューの「修正する」をクリックして、

Goopemenu18

 ズズーッと一番下に行って、「下書き保存」をクリックします。

Goopemenu19

 「下書きリスト」をクリックしてみてみると、移っています。

Goopemenu20

 下書きリストに入れたメニューはホームページに表示されなくなるので、またいつかやるメニューや、まだ始めていない新メニューはここに入れておきます。

 追加する時は「下書きリスト」から「修正する」「公開する」で、復活します。

 さてさて、チェックします。

【PC】
Goopemenu2

【スマホ】
Goopemenu21

 このサイトでもスマーとフォンで見た時の画像もあげていますが、何かを調べるのってスマートフォンからの割合が非常に高いです。

 必ずスマホの画面もチェックするようにしましょう。