この記事はアフィリエイト広告を利用しています。
先日の タブ切り替えを使った賃貸物件紹介ページのカスタマイズ例 に続いて、VK Blocks Pro のタブブロックの活用例をもうひとつ作ってみました。
今回制作したのは飲食店のサイトの「今週の日替わりランチ」です。
今週の日替わりランチ
- 日
- 月
- 火
- 水
- 木
- 金
- 土

ボンゴレビアンコ
1,000円(税込)

唐揚げ定食
1,000円(税込)

和食ランチ
1,000円(税込)

ワンプレートランチ
1,000円(税込)

冷製パスタ
1,000円(税込)

ランチプレート
1,000円(税込)

カルビランチ
1,000円(税込)
毎日変わる美味しさで、
\ランチタイムをもっと楽しく/
当店自慢の日替わりランチは
ボリューム満点&栄養バランスもバッチリ。
毎日違うメニューをご用意しているので
飽きずにお楽しみいただけます。
お仕事の合間やお出かけの際に
ぜひご利用ください。
ご提供時間
11:30〜14:00(L.O.13:30)
主なカスタマイズ内容
- ページを表示したときに曜日のタブが自動的に本日の曜日に切り替わり、曜日の下に [本日のランチ] のラベルを表示するようにしてあります。
- メニュー名と料金の間に点線を表示しています。(Microsoft Word のタブとリーダーと同じ動き)
- 料理の画像にライトボックス効果を設定してあります。
タブブロックを使うメリット「お客様が更新しやすい」
タブブロックを使ってこの例のようなタブ切り替えを実装すると、編集画面(ブロックエディター)でも下図に示すようにタブを切り替えて更新作業を行うことができますので、サイト制作をご依頼いただいたお客様ご自身で日替わりランチの写真をかんたんに差し替えることができます。
これは VK Blocks Pro のタブブロックで作る場合の大きなメリットです。

タブブロックを使うか、独自コーディングで実装するか
VK Blocks Pro のタブブロックを使わなくても、JavaScript と CSS を使って独自にコーディングしてタブ切り替えを実装することもできます。
タブブロックが適しているケース
今回の日替わりランチの例や こちらの賃貸物件紹介ページの例 のように、お客様がご自身で更新作業を行う場合は、更新作業がやりやすいタブブロックを使うのが適しています。
独自コーディングが適しているケース
新着情報のタブ切り替えのようにお客様がご自身で直接書き換えることがなく、なおかつデザインの自由度を求めたい場合は独自コーディングが適しています。
例えば、こちらのサイトの新着情報 のようなデザインをタブブロックで作ることはとても難しいと思いますが、独自にコーディングすれば比較的容易に実装できます。
Lighting 無料版で(VK Blocks Pro を使わずに)作った「今週の日替わりランチ」です。
VK Blocks Pro の入手方法
VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。
Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。
投稿者プロフィール

- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら











