ヘッダーとフッター

ウェブサイトのヘッダーはウェブページの上部セクションで、通常、ロゴ、メニュー、検索バー、サインイン/顧客アカウントボタンなどの要素が含まれます。フッターはウェブページの下部に表示され、通常、連絡先の詳細、リンク、法的通知、その他のオプションなどの情報が含まれます。

ヘッダーのデザイン

ヘッダーのデザインを変更するには、:guilabel:`編集`をクリックし、次にヘッダーをクリックします。ウェブサイトエディターの:guilabel:`カスタマイズ`タブの:guilabel:`ヘッダー`セクションで、次のオプションを使用できます:

  • ドロップダウンメニューから:guilabel:`テンプレート`を選択します。

  • 背景`設定を選択して、異なる:ref:`テーマスタイル <website/themes/theme-colors>、:guilabel:`カスタム`カラーオプション、:guilabel:`グラデーション`オプションを通じてカラーパレットを変更します。

  • ヘッダーに:guilabel:`境界線`を追加する場合、そのサイズ、スタイル、色を定義できます。

  • デザインに合わせて:guilabel:`角の丸み`を調整します。

  • 影`を追加し、その:guilabel:`色、オフセット、ぼかし、:guilabel:`広がり`を定義します。

  • :guilabel:`スクロール効果`を追加します。エフェクトにカーソルを合わせてプレビューします。

  • ヘッダー位置`を:guilabel:`通常、非表示、:guilabel:`コンテンツ上`から選択します。:guilabel:`コンテンツ上`を選択した場合、:guilabel:`背景`と:guilabel:`文字列色`をカスタマイズできます。

  • :guilabel:`要素`(文字列、検索バー、:guilabel:`サインイン`ボタン、ソーシャルメディアリンク、:guilabel:`お問い合わせ`ボタン、ロゴなど)の表示/非表示を切り替えます。

変更を確定するには、:guilabel:`保存`をクリックします。

ちなみに

ヘッダーを非表示にするには、:guilabel:`編集`をクリックし、ヘッダーをクリックして、ウェブサイトエディターの:guilabel:`テーマ`タブに移動します。:guilabel:`詳細`セクションまでスクロールし、:guilabel:`ヘッダーを表示`スイッチを切り替えてヘッダーの表示/非表示を切り替えます。

ヘッダーのコンテンツ

メニューはヘッダーのコンテンツを整理し、ユーザがウェブページを効果的にナビゲートするのに役立ちます。ユーザフレンドリーで適切に構造化されたメニューは、:doc:`検索エンジンランキング <seo>`の向上においても重要な役割を果たします。

メニュー項目を追加

デフォルトでは、ページは:doc:`作成時 <../structure/pages>`にドロップダウンメニュー項目としてメニューに追加されます。新しいメニュー項目を追加するには、次の手順に従います:

  1. :menuselection:`ウェブサイト --> サイト --> メニューエディター`に移動します。

  2. メニューエディターで:guilabel:`メニュー項目を追加`をクリックします。

  3. ポップアップウィンドウで、メニューに表示する:guilabel:`名前`を入力します。

  4. URLまたはメールアドレス`フィールドに `/ を入力してウェブサイト上のページを検索するか、# を入力して既存のカスタムアンカーを検索します。

  5. :guilabel:`OK`をクリックします。

  6. 必要に応じて:ref:`メニュー構造 <website/header_footer/menu-editor>`を編集し、:guilabel:`保存`します。

メガメニュー

メガメニューはドロップダウンメニューに似ていますが、単純なサブメニューのリストではなく、ナビゲーションオプションのグループに分割されたパネルを表示します。これにより、大量のコンテンツを含むウェブサイトやeコマースウェブサイトに適しています。すべてのウェブページやeコマースカテゴリをメニューに含めながら、すべてのメニュー項目を一度に表示できるためです。

ナビゲーションバーのメガメニュー。

メガメニューを作成するには、:menuselection:`ウェブサイト --> サイト --> メニューエディター`に移動し、:guilabel:`メガメニュー項目を追加`をクリックします。ポップアップでメガメニューの:guilabel:`名前`を入力し、:guilabel:`OK`をクリックしてから、:guilabel:`保存`します。

メガメニューのオプションとコンテンツを調整するには、ヘッダーのメガメニュー項目をクリックしてから、:guilabel:`編集`をクリックします。メガメニューはビルディングブロックで構成されているため、各構成品を個別にカスタマイズできます。例:

  • ビルディングブロック内で直接文字列を編集します。

  • メニュー項目のURLを編集するには、メニュー項目を選択し、小さなプレビューポップアップの:guilabel:リンクを編集`ボタンをクリックします。/`を入力してウェブサイト上のページを検索するか、`#`を入力して既存のカスタムアンカーを検索します。

    メガメニューオプションを編集します。

  • 関連するブロックをメガメニュー内の目的の位置にドラッグアンドドロップして、メニュー項目を移動します。

  • 関連するブロックを削除して、メニュー項目を削除します。

メガメニューの全体的なレイアウトを調整するには、ウェブサイトエディターの:guilabel:`カスタマイズ`タブに移動し、:guilabel:`メガメニュー`セクションで以下を行います:

  • :guilabel:`テンプレート`を選択します。

  • :guilabel:`サイズ`を選択します: :guilabel:`全幅`または:guilabel:`狭幅`のいずれかです。

変更を確定するには、:guilabel:`保存`をクリックします。

ログインしていないユーザーに対して動的メニュー項目を非表示にする

動的メニュー項目(つまり、アプリやモジュールをインストールしたときにOdooが自動的に生成するメニュー項目、例えば`イベント`、`コース`など)をログインしていないユーザーに対して非表示にするには、次の手順に従ってください:

  1. 開発者モードを有効にする。

  2. :menuselection:`ウェブサイト --> 設定 --> メニュー`に移動します。

  3. 必要に応じて関連ウェブサイトのメニューリストを展開し、非表示にしたいメニュー項目をクリックします。

  4. :guilabel:`表示グループ`セクションで、:guilabel:`グループ名`の下にある:guilabel:`明細追加`をクリックします。

  5. グループ:guilabel:`User types / Portal`を検索して選択し、:guilabel:`選択`をクリックします。

  6. セーブ。

ちなみに

Shopメニュー項目を非表示にするには、eコマースアクセスをログインユーザーに制限します。