DiviWebサイトと重複する透明な垂直ナビゲーションを作成する方法

公開: 2017-07-26

今日のDiviチュートリアルでは、主にWebサイトの垂直ナビゲーションで何か特別なことをすることに焦点を当てます。垂直ナビゲーションは、Diviテーマが提供する忘れられがちなオプションです。あまり使用されませんが、Webサイトの全体的なルックアンドフィールを変更し、必要なレベルにすることができます。垂直ナビゲーションをこれまで以上に特別なものにするために、透過的にします。それに加えて、透明なメニューがWebサイトの他の部分と重なるようにします。

現在、垂直ナビゲーションを備えたWebサイトはあまりありません。しかし、場合によっては、驚くべき結果をもたらすことがあります。以前の投稿の1つで、垂直ナビゲーションを使用してWebデザインを強化するDiviWebサイトの12の例を紹介しました。

垂直ナビゲーションをWebサイトに重ねる場合は、透明な背景色を使用することが重要です。透明な背景色を使用していない場合、垂直ナビゲーションがWebサイトの一部のコンテンツと重複する可能性があります。あなたはあなたのウェブサイトのコンテンツへの主な焦点を取り除きたくありません、そしてあなたは絶対にそれを重複させたくありません。

私たちが正確に何を意味するのかを示すために、作成方法を示すエレガントで単純な例を作成しました。ステップバイステップで、次の結果を達成するために必要なさまざまなステップをガイドします。

今日の最終結果：シンプルでエレガントな縦型メニュー

透明な垂直ナビゲーション

上の画像では、透明な垂直ナビゲーションがWebサイトにもたらすシンプルさに気付くでしょう。透明な垂直メニューを作成する方法を示すだけでなく、自分のWebサイトに合わせてメニューを再作成するときに使用できる一般的なデザインのヒントもいくつか示します。

Diviでデザインを作成する

私たちのYoutubeチャンネルを購読する

一般設定

作成した例に飛び込む前に、透過的なナビゲーションを簡単な方法で統合するのに役立ついくつかの一般的な情報（およびCSSコード行）を提供します（例で行った他のすべての変更なしで）。

垂直ナビゲーションをアクティブにする

まず、Webサイトで垂直ナビゲーションを有効にする必要があります。これを行うには、 WordPressダッシュボード>外観>カスタマイズ>ヘッダーとナビゲーション>ヘッダー形式>に移動し、垂直ナビゲーションを有効にします。

テーマカスタマイザでデザイン設定を選択します

テーマカスタマイザーを使用しているので、上部のナビゲーションを変更するのと同じ方法で、垂直方向のナビゲーションのすべての設定を調整できます。 [ヘッダーとナビゲーション]> [プライマリメニュー]に戻り、プライマリメニューに加えたいすべての変更を加えます。

この部分では、不透明度が1未満の背景色をメニューに提供することが重要です。できれば、0.5未満でもかまいません。これが背景色を適用していることを確認してください。ドロップダウンメニューの背景色にも同じ色を適用する場合は、そこでも同じ色を選択します。

CSSコードを追加する

垂直ナビゲーションのデザイン部分に必要な変更をすべて加えたら、CSS部分に移動できます。すでにテーマカスタマイザーを使用しているので、そこにカスタムCSSコードを追加します。もちろん、CSSコードを特定のページに追加することも、テーマオプションを使用して追加することもできます。

提供するCSSコードは2つのことを行います。まず第一に、それはあなたの透明な垂直ナビゲーションとウェブサイトが重なっていることを確認します。次に、垂直ナビゲーションの幅を調整するのに役立ちます。幅をまったく変更したくない場合は、そのコードをWebサイトから除外して、透明な垂直ナビゲーションとWebサイトをオーバーラップさせることができます。

これらの変更は、デスクトップバージョンのWebサイトにのみ適用されます。幅が981px未満の画面では、変更は適用されません。

テーマカスタマイザーにCSSコードを追加する

まず、ウェブサイトがブラウザの幅全体に表示されるようにするコードがあります。次のコードをコピーして、テーマカスタマイザーの[追加のCSS]タブに貼り付けます。

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

さらに、垂直ナビゲーションの幅も調整する場合は、代わりに次のCSSコード行をコピーして貼り付けます。

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

単純な垂直ナビゲーションの再作成

Webサイトとオーバーラップする透明な垂直ナビゲーションを作成するために必要な手順を処理したので、例を再作成します。この例も、次のようになります。

透明な垂直ナビゲーション

全体的な設計のヒント

始める前に、覚えておくべき一般的な設計のヒントと考えをいくつか共有します。これらのヒントは、作成しているエレガントでシンプルなWebサイトを最大限に活用するのに役立ちます。間違いなく強調したい2つのヒントを見てみましょう。

すべてを一元化

まず、Webサイトのコンテンツを一元化するようにしてください。それは自明ですが、言及する価値があります。 Webサイトと重なる透明な垂直ナビゲーションを使用している場合は、コンテンツを一元化することが最適です。代わりに、すべてをWebサイトの左側に配置すると、透明な垂直ナビゲーションとコンテンツが混同される可能性が高くなります。それはおそらくあなたが達成したい結果ではありません。あなたはあなたのウェブサイトで対称性と読みやすさを優先したいと思っています。

異なる配置のコンテンツを選択する場合は、コンテンツのパディングとマージンを確認してください。それに応じてマージンとパディングを変更しても、結果は見栄えがすることがあります。ただし、おそらく手動で多くの変更を加える必要があります。

どこでも同じ色の背景

この例で使用しているように、垂直ナビゲーションに完全に透明な背景色を使用している場合は、一定の一貫性を維持することが重要です。人々があなたのウェブサイトをスムーズにナビゲートできるべきであるため、あなたはあなたの垂直ナビゲーションの色を読みやすくそして目立たせることを望みます。

透明な垂直ナビゲーションで明るいフォントの色を選択する場合は、背景画像または色に暗い色が含まれていることを確認してください。同様に、暗いフォントの色を使用している場合は、使用する背景画像または色が明るい色であることを確認してください。

例の作成を開始します

それ以上の期限なしで、私たちがあなたに示した例を再現し始めましょう。まず、新しいページを作成し、それに全幅セクションを追加します。ページの1つのセクションを再作成する方法のみを示します。もちろん、続行して、必要な数のセクションを追加できます。スクロールしてもメニューはまったく同じです。

全幅ヘッダーを作成する

全幅セクション内に、全幅ヘッダーを追加します。次に、[デザイン]タブに移動し、[テキストとロゴの向き]を[中央]に配置して、全幅ヘッダーのフルスクリーンモードも有効にします。

タイトル設定

また、同じタブを下にスクロールして、タイトルテキストサブカテゴリに次の変更を加えます。

タイトルフォント：Lato Light
タイトルフォントスタイル：大文字
タイトルフォントスタイル：60（デスクトップ）、50（タブレット）、40（電話）
タイトルテキストの色：#FFFFFF

小見出しの設定

さらに、スクロールを続け、小見出しテキストサブカテゴリの設定が次のとおりであることを確認します。

小見出しフォント：Lato Light
小見出しのフォントサイズ：22px（デスクトップとタブレット）、19（電話）
小見出しのテキストの色：＃c4c4c4

ボタンの設定

最後に、[デザイン]タブの[ボタン]サブカテゴリに次の変更を加えます。

ボタン1にカスタムスタイルを使用する：はい
ボタン1のテキストサイズ：15（デスクトップとタブレット）、12（電話）
ボタン1のテキストの色：＃000000
ボタン1の背景色：#FFFFFF
ボタン1フォント：ラトライト
ボタン1フォントスタイル：太字と大文字

グラデーションの背景設定

次に、[全幅]セクションの設定を開いて、[コンテンツ]タブの[背景]サブカテゴリ内にグラデーションオーバーレイ付きの背景画像を追加します。使用している背景と色の種類に応じて、一致する色を追加します。

この例では、暗い背景を使用しています。したがって、グラデーションの黒色から始めます。背景画像と一致させたもう1つの色は、「rgba（0,49,109,0.43）」です。

さらに、グラデーションカラーに使用した設定は次のとおりです。

グラデーションタイプ：線形
グラデーション方向：87度
開始位置：0％
終了位置：62％

次に、背景画像を追加し、次の設定を適用します。

背景画像サイズ：カバー
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：オーバーレイ

テーマカスタマイザの変更

次のステップでは、テーマカスタマイザーで他の変更を行う必要があります。 WordPressダッシュボードを使用している場合は、 [外観]> [カスタマイズ]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、次の変更を加えます。

ロゴの最大高さ：83
テキストサイズ：14
文字間隔：0
フォント：Lato Light
フォントスタイル：大文字
テキストの色：#FFFFFF
アクティブリンクの色：#FFFFFF
背景色：#FFFFFF
ドロップダウンメニューの背景色：rgba（221,153,51,0）
ドロップダウンメニューの線の色：＃1E73BE
ドロップダウンメニューのテキストの色：#FFFFFF

テーマカスタマイザーにカスタムCSSコードを追加する

テーマカスタマイザーを使用している間に、必要なCSSコード行を追加して、レイアウトが実際のように見えるようにします。

コードの最初の部分は、垂直ナビゲーションを使用するときにWebサイトの左マージンを削除します。 2番目の部分では、メニューを左側に配置します。 3番目の部分は、メニューの各ページに上余白と下枠を配置します。 4番目の部分は、ロゴに上部マージンを追加し、ロゴの後のマージンを削除します。そして最後に、上部のパディングを削除して、メニューがロゴとメニュー項目の間で同じ距離を保つようにしました。これらの変更は、スクロール時のメニューにも適用されます。したがって、メニューはWebサイト全体で同じように見えます。

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

最終結果

この投稿全体で実行したすべての手順の結果として、作業中のWebサイトで次の結果が得られるはずです。

透明な垂直ナビゲーション

まとめ

この投稿では、Webサイトと重なる透明な垂直ナビゲーションを作成する方法を紹介しました。さらに、この投稿をステップバイステップで実行すると、自分のWebサイトに使用できるエレガントでシンプルなデザインも共有しました。ご質問やご要望がございましたら、下のコメント欄にコメントを残してください。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。