価格表のカスタマイズ例飲食店のメニュー表②【完結編～機能追加】

カテゴリー: カスタマイズ

タグ: CSS

Microsoft Word のタブとリーダーに相当する機能を実装したカスタマイズ例の第2弾です。レスポンシブ対応済みです。

背景画像なし

カレーうどん	870
肉うどん	870
天ぷらうどん	900
皿うどん	930
冷やし中華 (夏季限定)	930
なべ焼きうどん (冬季限定)	1,050

背景画像あり

カレーうどん	870
肉うどん	870
天ぷらうどん	900
皿うどん	930
冷やし中華 (夏季限定)	930
なべ焼きうどん (冬季限定)	1,050

前回の記事で行ったカスタマイズとの違いは以下の通りです。

1. ブロック構成がシンプルになった

前回カスタマイズ例ではグループブロック・横並びブロック・段落ブロックを組み合わせていますが、この記事ではひとつのテーブルブロックを使ってブロック構成をシンプルにしてあります。

リスト表示で比べると、違いが明白です。

2. メニューの追加・削除がしやすくなった

前回のカスタマイズは、横並びブロックを選ぶ → 複製という手順が必要で、ブロック操作に慣れないお客様だと「横並びブロックを選ぶ」という操作がわかりづらいかもしれません。

今回のカスタマイズはテーブルブロックを使っているので、追加(挿入)の操作が迷いづらくなっています。

メニューの入力作業がかんたんです

行を挿入すると、↓このようになります。リーダー(点線)が表示され、そして「円」が表示され入力不要になっています。うっかり「円」を削除してしまう心配はありません。

フォントサイズなどの書式設定も不要で、メニュー名と価格を入力するだけ作業完了です。↓

このようなカスタマイズを行うとき、お客様がブロックエディター（ビジュアル編集）を使ってかんたんに更新作業を行えるように配慮しています。WordPress のアップデートによりそういうことがやりやすい環境になってきていますね。

2023.5.21 機能追加メニュー名の上下にコメントを付けられるようにしました

メニュー名の上または下にかんたんなコメントを書ける機能を追加しました。
長い文章には対応していませんので、そういうケースでは別ブロックを使うことになります。

カレーうどん	870
当店一番人気!!肉うどん	870
天ぷらうどん海老天は100円増	900
皿うどん大盛150円増	930
冷やし中華 (夏季限定)	930
なべ焼きうどん (冬季限定)調理にお時間をいただきます	1,050

類似のカスタマイズ例

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら