Divi Webサイトの垂直ナビゲーションメニュー（またはヘッダー）を作成する方法

公開: 2020-06-14

垂直ナビゲーションメニューは、最前線でより多くのメニュー項目を必要とする特定のWebサイトに役立ちます。水平方向のメニューは、特にブラウザの幅が狭い場合、必要なすべてのメニューリンクに合わせるのが難しい場合があります。このチュートリアルでは、Divi ThemeBuilderを使用してカスタムの垂直ナビゲーションメニューを作成する方法を紹介します。これにより、WordPressメニュー項目を紹介するためのスペースが増えます。また、垂直ヘッダーにDiviモジュールを追加し、Diviビルダーを使用してそれらを設計するためのフルパワーがあります。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

divi垂直ナビゲーションメニューとヘッダー

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。

Diviの栄養士レイアウトパックのヘッダーとフッターのテンプレート

グローバルデフォルトのウェブサイトテンプレートをアップロードする

次に、右上隅に2つの矢印の付いたアイコンが表示されます。アイコンをクリックします。

Diviの栄養士レイアウトパックのヘッダーとフッターのテンプレート

[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。

Diviの栄養士レイアウトパックのヘッダーとフッターのテンプレート

Diviテーマビルダーの変更を保存

ファイルをアップロードすると、デフォルトのWebサイトテンプレートに新しいグローバルヘッダーとフッターが表示されます。テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。

Diviの栄養士レイアウトパックのヘッダーとフッターのテンプレート

チュートリアルに取り掛かりましょう。

パート1：新しいグローバルヘッダーの構築

このチュートリアルでは、Divi Theme Builderを使用して、グローバルヘッダーに垂直ナビゲーションメニューを作成します。ただし、サイトのメインメニューに加えて使用する場合に備えて、投稿の最後にあるページテンプレートの本文に同じメニューを追加する方法を示します。

開始するには、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。

次に、デフォルトのWebサイトテンプレートの[グローバルヘッダーの追加]領域をクリックし、ドロップダウンから[グローバルヘッダーの作成]を選択します。

divi垂直ナビゲーションメニューとヘッダー

次に、「最初からビルド」オプションを選択します。

divi垂直ナビゲーションメニューとヘッダー

パート2：垂直断面レイアウトの設計

グローバルヘッダーレイアウトエディタ内で、すでにそこにある通常のセクションの設定を開き、以下を更新します。

幅（デスクトップ）：300px
幅（タブレットと電話）：100％

高さ（デスクトップ）：100vh
高さ（タブレットと電話）：自動

パディング（デスクトップ）：4vh上部、0px下部
パディング（タブレットと電話）：0px上、0px下

divi垂直ナビゲーションメニューとヘッダー

次のようにボックスシャドウを追加して、デザインを続行します。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：20px
ボックスシャドウスプレッド強度：-10px
影の色：rgba（0,0,0,0.3）

divi垂直ナビゲーションメニューとヘッダー

ユーザーがスクロールしても垂直ナビゲーションメニューが左側に表示されたままになるようにするには、位置を固定に更新し、次のようにzインデックスを更新します。

位置：固定
Zインデックス：9999

divi垂直ナビゲーションメニューとヘッダー

セクションの外側に拡張されるサブメニューナビゲーションを確実に表示できるようにするには、次のカスタムCSSをメイン要素に追加します。

overflow: visible !important;

divi垂直ナビゲーションメニューとヘッダー

これで、セクションはテンプレートの左側に垂直レイアウトになりました。

divi垂直ナビゲーションメニューとヘッダー

パート3：垂直メニューの設計

セクションが配置されたら、垂直メニューを設計する準備が整いました。これを行うために、いくつかのカスタムCSSを備えたメニューモジュールを使用して、垂直に表示されるナビゲーションのスタイルを設定します。

また、vhの長さの単位を使用して、さまざまなブラウザーの高さに合わせてメニューが適切に拡大縮小されるようにします。

行の追加

まず、セクションに1列の行を追加します。

divi垂直ナビゲーションメニューとヘッダー

次に、次のように行設定を更新します。

サイズとパディング

側溝幅：1
幅：100％
最大幅：80％
パディング（デスクトップ）：3vh上部、3vh下部
パディング（タブレットと電話）：0px上、0px下

divi垂直ナビゲーションメニューとヘッダー

国境

ボーダー幅：1px
ボーダーカラー：#eeeeee

divi垂直ナビゲーションメニューとヘッダー

メニューモジュールの追加

1列の行内に、新しいメニューモジュールを追加します。

divi垂直ナビゲーションメニューとヘッダー

コンテンツトグルの下に表示するメニューを選択します。

divi垂直ナビゲーションメニューとヘッダー

次に、ロゴトグルの下に動的コンテンツとしてサイトロゴを追加します。

divi垂直ナビゲーションメニューとヘッダー

[デザイン]タブで、以下を更新します。

スタイル：中央揃え
メニューフォント：Nunito Sans
メニューテキストの色：＃535b7c
メニューテキストサイズ：18px（デスクトップ）、14px（タブレットと電話）
メニューラインの高さ：2em
ドロップダウンメニューの線の色：＃535b7c
ドロップダウンメニューアクティブリンクの色：＃535b7c

divi垂直ナビゲーションメニューとヘッダー

ショッピングカートのアイコンの色：＃535b7c
検索アイコンの色：＃535b7c
ハンバーガーメニューアイコンの色：＃535b7c

divi垂直ナビゲーションメニューとヘッダー

パディング（デスクトップ）：2vh上部、2vh下部
パディング（デスクトップ）：10px上、10px下

divi垂直ナビゲーションメニューとヘッダー

パート4：メニューのカスタムCSSの追加

メニューには、達成しようとしている垂直ナビゲーションを取得するためのカスタムCSSが必要です。まず、[詳細設定]タブに移動し、次のカスタムCSSを[メニューリンク]と[メニューロゴ]に追加します。

メニューリンクCSS（デスクトップ）：

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

メニューリンクCSS（タブレット）：

width: auto;
border:none;

メニューロゴCSS：

margin-bottom: 20px;

divi垂直ナビゲーションメニューとヘッダー

次に、次のようにカスタムCSSクラスをメニューモジュールに追加します。

CSSクラス：et-vert-menu

divi垂直ナビゲーションメニューとヘッダー

は、コードモジュールを使用して追加する外部カスタムCSSでこの特定のメニューをターゲットにするために使用されます。

コードモジュールを使用したカスタムCSSの追加

メニューモジュールの下に、新しいコードモジュールを追加します。

divi垂直ナビゲーションメニューとヘッダー

次に、次のコードをコードボックスに貼り付けます（必ずスタイルタグの間に配置してください）。

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

divi垂直ナビゲーションメニューとヘッダー

パート5：ボタンとソーシャルメディアのフォローアイコンのデザイン

メニューが完成したので、ボタンを追加し、いくつかのソーシャルメディアがリンクをたどって垂直ヘッダーを完成させることができます。

行の追加

現在の行の下に新しい1列の行を追加します。

divi垂直ナビゲーションメニューとヘッダー

ボタンの追加

次に、新しいボタンモジュールを行に追加します。

divi垂直ナビゲーションメニューとヘッダー

次のようにボタン設定を更新します。

ボタンの配置：中央
ボタンのテキストサイズ：18px（デスクトップ）、14px（タブレットと電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：＃535b7c
ボタンの境界線の幅：0px

divi垂直ナビゲーションメニューとヘッダー

次に、[詳細設定]タブに移動し、次のカスタムCSSをメイン要素に貼り付けます。

メイン要素CSS（デスクトップ）

display:block;
width: 100%;

主な要素CSS（タブレット）

display:inherit;

divi垂直ナビゲーションメニューとヘッダー

ソーシャルメディアフォローアイコンの追加

ボタンの下に、ソーシャルメディアフォローモジュールを追加します。

divi垂直ナビゲーションメニューとヘッダー

必要なソーシャルネットワークを[コンテンツ]タブに追加します。

divi垂直ナビゲーションメニューとヘッダー

[デザイン]タブで、以下を更新します。

モジュールの配置：中央
アイコンの色：＃535b7c

divi垂直ナビゲーションメニューとヘッダー次に、各ネットワークの設定を開き、背景色を削除します。

divi垂直ナビゲーションメニューとヘッダー

次に、次のように少し上マージンを追加します。

マージン：3vhトップ

divi垂直ナビゲーションメニューとヘッダー

行設定を更新する

ソーシャルメディアのフォローアイコンが完成したら、行の設定を開き、以下を調整します。

側溝幅：1
パディング（デスクトップ）：3vh上部、0px下部
パディング（タブレットと電話）：10pxトップ

divi垂直ナビゲーションメニューとヘッダー

レイアウトとテンプレートを保存

完了したら、レイアウトとテンプレートを保存します。

divi垂直ナビゲーションメニューとヘッダー

最終結果

これがライブページの最終結果です。

divi垂直ナビゲーションメニューとヘッダー

ページテンプレートの本文領域に垂直ナビゲーションメニューを追加する方法

（グローバルヘッダーではなく）ページレイアウトに垂直ナビゲーションメニューを追加する場合は、最初にセクションレイアウトをDiviライブラリに保存する必要があります。

これを行うには、グローバルヘッダーレイアウトエディターを開き、垂直セクション（メニューを含む）をDiviライブラリに保存します。

divi垂直ナビゲーションメニューとヘッダー

次に、レイアウトエディタを終了し、新しいテンプレートを作成して、必要なページに割り当てます。クリックして、ページテンプレートのカスタム本文を作成します。

divi垂直ナビゲーションメニューとヘッダー

ゼロから構築する場合に選択します。

divi垂直ナビゲーションメニューとヘッダー

レイアウトに新しい全幅セクションを追加します。

divi垂直ナビゲーションメニューとヘッダー

次に、全幅投稿コンテンツモジュールをセクションに追加します。

divi垂直ナビゲーションメニューとヘッダー

ページ上部のデフォルトの通常セクションを削除してから、全幅セクションの設定を開き、次のカスタムCSSをメイン要素に追加します。

メイン要素CSS（デスクトップ）

width: calc(100% - 300px);
margin-left:300px !important;

主な要素CSS（タブレット）

width: 100%;

通常のセクションで、クリックして新しいセクションを追加し、[ライブラリから追加]タブで、以前にライブラリに保存した垂直メニューセクションを選択します。

divi垂直ナビゲーションメニューとヘッダー

セクションをモバイルに表示したくないので、セクション設定を開き、タブレットと電話でセクションの表示を無効にします。

divi垂直ナビゲーションメニューとヘッダー

次に、セクションレイアウト内のコードモジュールを開き、このコードスニペットを置き換えます…

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

これとともに…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

divi垂直ナビゲーションメニューとヘッダー

これにより、メインヘッダーとフッターが移動して、ページテンプレートの左側にある固定の垂直メニューに合わせます。これは、Diviのデフォルトのヘッダーとフッターを使用したライブページでの表示です。

divi垂直ナビゲーションメニューとヘッダー

最終的な考え

ここで紹介する垂直ナビゲーションメニューの位置は固定されています。ただし、追加のメニュー項目またはコンテンツのためにより多くのスペースが必要な場合は、セクションの位置を絶対に変更できます。ユーザーがメニュー項目をスクロールできるようにするために、垂直オーバーフローをスクロールに変更することもできます（このオーバーフロー設定ではサブメニューを表示/使用できないことに注意してください）。

垂直セクションのセットアップは、いくつかのカスタムサイドバーを作成するための扉も開きます。これが将来のプロジェクトに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！

Divi Webサイトの垂直ナビゲーションメニュー（またはヘッダー）を作成する方法

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

グローバルデフォルトのウェブサイトテンプレートをアップロードする

Diviテーマビルダーの変更を保存

パート1：新しいグローバルヘッダーの構築

パート2：垂直断面レイアウトの設計

パート3：垂直メニューの設計

行の追加

サイズとパディング

国境

メニューモジュールの追加

パート4：メニューのカスタムCSSの追加

コードモジュールを使用したカスタムCSSの追加

パート5：ボタンとソーシャルメディアのフォローアイコンのデザイン

行の追加

ボタンの追加

ソーシャルメディアフォローアイコンの追加

行設定を更新する

レイアウトとテンプレートを保存

最終結果

ページテンプレートの本文領域に垂直ナビゲーションメニューを追加する方法

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。