Velo初心者向け｜Wix Studioでパンくずリストを“手作り”で実装する方法
- 篠原 誠
- 5月14日
- 読了時間: 3分
✅ はじめに
Wix Studioでサイト制作をしていると、「パンくずリスト（現在位置を示すナビゲーション）」を自由に配置したいと思うことがありますよね。
でも、ナビゲーションツールで表示してみたら意外と自由が効かず、余計な影が付いてしまったり、思った通りのデザインにならなかったり……と困った経験をお持ちの方も多いのではないでしょうか？
実はこのパンくずリスト、Veloを使えば簡単に、そして自由に手作りできてしまいます。
今回は初心者の方でも無理なく取り組めるように、シンプルな「2階層（HOME ＞ BLOG）」のパンくずリストを作成する方法をご紹介します。
🎯 今回つくるパンくずリストのイメージ
HOME ＞ BLOG
「HOME」はトップページへのリンクです。
「BLOG」は現在表示しているページを表し、リンクを設定しません。
階層の区切りとしてスラッシュ（＞）を使います。
🧰 まずはエディターで準備しましょう
Wixエディターから「TextButton（テキストボタン）」要素を2つ配置します。
1つ目はトップページへのリンク（例：#breadcrumbHome）
2つ目は現在表示中のページ（例：#breadcrumbCurrent）
💡ここで大切なポイントです！
普通の「テキスト」ではなく、必ず「TextButton（テキストボタン）」を使ってください。見た目はほぼ同じですが、普通のテキストだとVeloでリンク操作ができないためです。
階層を区切るためのスラッシュ（＞）をテキスト要素として追加するか、1つ目のTextButton内に含めても構いません。
それぞれを横並びに配置し、「間隔（Spacing）」設定の「横」を0pxにすると、より自然な並びになります。
💻 Veloコードを設定します
以下のコードは、「BLOG一覧ページ」に設置することを想定しています。
import wixLocation from 'wix-location';
$w.onReady(function () {
// 「HOME」ボタンにラベルとリンクを設定
$w("#breadcrumbHome").label = "HOME ＞";
$w("#breadcrumbHome").link = "/";
// 「BLOG」部分には現在地のためリンクを設定しない
$w("#breadcrumbCurrent").label = "BLOG";
$w("#breadcrumbCurrent").link = "";
});
✨ 実際の動作を確認してみましょう
このコードを実行すると、ページ上には次のようなパンくずリストが表示されます。
「HOME」はクリック可能なリンクになっており、トップページへ遷移できます。
「BLOG」は現在のページを示すラベルで、リンクは設定されていません。
こうしたパンくずリストは、「導入事例」「よくある質問」「カテゴリ別ブログ」など、複数階層のあるページで特に効果を発揮します。
🎨 デザインのコツ
「HOME ＞」のようにスラッシュを含めると、高さがズレにくくレイアウトが整いやすくなります。 その際、記号との間にスペース（半角または全角）を入れておくと、読みやすさが向上します。
TextButtonの「間隔（Spacing）」で「横」を0pxにすると、2つのボタンがちょうどよく並びます。
ボタン幅は「サイズに合わせて縮める（ハグ）」に設定しておくと、文字数に応じて自然なサイズで表示されます。
また、TextButtonは初期状態だとボタンらしい見た目（背景や枠線）があるため、背景を透明にし、ボーダーを外し、フォントカラーをリンク風にカスタマイズすると、パンくずリストらしい軽やかな見た目に仕上がります。
💡こうした細かい調整テクニックについては、今後別記事でも詳しくご紹介する予定です。
🚀 応用編のご案内
今回はシンプルな「2階層（HOME ＞ BLOG）」で作成しましたが、今後はCMS連携や動的ページを使って、「HOME ＞ BLOG ＞ 記事タイトル」のような3階層以上のパンくずリストにも応用できます。
次回以降、その具体的な方法についてもご紹介していく予定ですので、ぜひお楽しみに！
Comentarios