Wix エディタ:パンくずリストをカスタマイズする
読了時間:4分
パンくずリストを追加・設定したら、サイトのデザインやスタイルに合わせてカスタマイズしましょう。
プリセットから選択し、レイアウトやデザインをカスタマイズするなど、訪問者が簡単にページを行き来できるようにしてみましょう。
この記事では、次の項目について説明します:
重要:
パンくずリストを追加・カスタマイズするには、Velo 開発モードを有効にする必要があります。Velo を使用すると、サイトでコーディングを使用して、カスタム機能とインタラクションが作成できるようになります。Velo についての詳細はこちらをご覧ください。
パンくずリストのレイアウトを変更する
パンくずリストのレイアウトを、サイトの配置に合わせて調整してみましょう。区切り線、間隔、アイテムの方向などの設定を変更することができます。
リストのレイアウトを調整する方法:
- エディタでパンくずリストのパーツをクリックします。
- 「レイアウト」アイコン
をクリックします。
- 利用可能なオプションを使用してレイアウトを調整します:
- オーバーフローしたアイテムの表示方法:リストに収まらないアイテムの表示方法を選択します:
- すべてのアイテムを表示:アイテムが収まらない場合、リストに別の行を作成します。
- アイテムを折りたたむ:アイテムを 1行だけで表示します。収まらない場合は、省略記号が表示されます。
- 区切りアイコン:トグルを有効にしてアイテム間に区切り線を表示し、V字型またはバックスラッシュから使用するアイコンを選択します。
- 縦の間隔:スライダーをドラッグして、アイテム上下の間隔を変更します。
- 横の間隔:スライダーをドラッグして、アイテムの間隔を変更します。
- アイテムの配置:アイテムの配置方法を(左、中央、右)から選択します。
- パンくずリストの表示方向:アイテムの表示方向を、左から右または右から左から選択します。
- オーバーフローしたアイテムの表示方法:リストに収まらないアイテムの表示方法を選択します:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2022/04/22/a6973f1b-9341-497c-956f-533c9fe38d6f/5af5df00-cf61-488e-a6d5-9aae0fad6175.jpg)
パンくずリストをデザインする
利用可能なオプションから別のプリセットを選択するか、さらにカスタマイズして、訪問者にページの階層を表示するクリーンで洗練されたリストを作成してみましょう。間隔、色、サイズなどの設定で、リスト全体のデザインを調整することができます。
デザインをカスタマイズする方法:
- エディタでパンくずリストのパーツをクリックします。
- 「デザインを変更」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- ドロップダウンメニューからデザインするものを選択します。
背景
区切りアイコン
アイテム
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2022/04/22/3c834afc-3cd2-4b32-b0e8-f92bd3e84694/102b5230-8cc4-47de-8cc6-98e1b399ac78.jpg)