概要
「デザイン」→「ウェブサイト構造」セクションの「カスタム」タブでは、ウェブサイトのヘッダー、ナビゲーションメニュー、モバイルメニューの外観を細かく調整できます。以下の手順に従って、新しいカスタムテンプレートを適用し、ヘッダーのプロパティを変更し、デスクトップメニューのスタイルを更新し、モバイルメニューのエクスペリエンスをカスタマイズしてください。
再現手順:
再現手順
- SITE123エディターにログイン
- ログイン ページに移動し、アカウントの資格情報を使用してサインインします。
- デザインセクションを開く
- メインダッシュボードから、左側のサイドバーの「デザイン」をクリックします。
- ウェブサイトの構造➜カスタムタブへ移動
- 上部のバーで、 [Web サイトの構造]を選択します。
- カスタマイズ可能なすべてのボックスを表示するには、 [カスタム]タブを選択します。
- カスタムテンプレートを選択
- 最初のボックス (「テンプレート」) で、ドロップダウン リストを開き、テンプレート21を選択して、サイトに新しい全体構造を適用します。
- ヘッダー設定を調整する
- ヘッダーボックスを開きます。
- サイズセレクターをクリックして希望のオプションを選択し、ヘッダーサイズを変更します。
- 同じ方法でヘッダーのフォント スタイルを変更し、ブランドに最適なフォント スタイルを選択します。
- デスクトップメニューのスタイルを更新する
- [メニュー ページ スタイル]ボックスで、スタイル セレクタをクリックします。
- スタイルのサムネイルを参照し、希望するレイアウト (例: ギャラリーの 9 番目のオプション) をクリックします。
- モバイルメニューオプションをカスタマイズする
- モバイル メニューボックスを展開します。
- それぞれのドロップダウン コントロールから、モバイル メニューの色とテキストの配置を設定します。
- 視聴者に適したモバイル メニュー タイプ(バーガー、ボトム バーなど) を選択します。
- 保存して公開する
- すべての変更は自動的に保存されます。サイトをプレビューし、満足したら「公開」をクリックします。
まとめ
ウェブサイト構造の「カスタム」タブを使用すると、新しいテンプレートの適用、ヘッダースタイルの微調整、デスクトップメニューのレイアウトの選択、モバイルメニューのあらゆる側面のカスタマイズを素早く行うことができます。これらの調整により、一貫したブランドアイデンティティを維持しながら、デスクトップとモバイルデバイスの両方でスムーズなナビゲーションエクスペリエンスを実現できます。
