デスクトップとモバイルのメニューバーをDiviと一致させる方法

今日のDiviの投稿では、モバイルデザインの強化に役立つ簡単なヒントを紹介します。 モバイルでのデザインはデスクトップでのデザインと同じくらい重要であることは誰もが知っていますが、Divi内のいくつかの標準設定のため、テーマカスタマイザーで行ったすべての変更がデスクトップでモバイルと同じように見えるわけではありません。

具体的には、この投稿で行うことは、最大ロゴ高と最小メニュー高を使用したときにデスクトップのメニューバーと同じように見える小さなモバイルメニューバーを作成する方法を示しています。 デフォルトでは、モバイルとデスクトップの見通しは異なります。 特定のメニューの高さとロゴの最大の高さを設定したからといって、同じことがモバイルに適用されるわけではありません。

モバイルとデスクトップの違い

それほど高さのないプライマリメニューバーを意図的に選択するWebサイトはたくさんあります。 見た目がよりエレガントになり、占有スペースが少なくなります。これは、固定ナビゲーションを使用している場合にも検討するのが非常に興味深いことです。

テーマカスタマイザ内でLogoMax Heightの最大値（100）を選択し、Menu Heightの最小値（30）を選択すると、デスクトップで次の結果が得られます。

ただし、ロゴとメニューの高さの比率はモバイルでは異なります。 Logo Max Heightに最高値を選択し、Menu Heightに最低値を選択した場合、デスクトップと同じ結果は得られません。 代わりに、得られる結果は次のようになります。

結果

次に、モバイルメニューバーに同じレイアウトを適用する方法を説明します。 これは、ロゴがメニュー上で最大の高さになることを意味します。 それに加えて、メニューバー自体ははるかに小さくなります。 最終的には、ページのコンテンツを表示するための場所が画面上に残ります。

このチュートリアルを段階的に実行すると、次の結果が得られます。

これは明らかにデスクトップバージョンのように見えます：

デスクトップとモバイルのメニューバーをDiviと一致させる方法

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

プライマリメニューバーの設定

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

• ロゴ画像を非表示：無効にする
• メニューの高さ：30
• ロゴの最大高さ：100

モバイルメニューバー追加のCSSコード

次に行う必要があるのは、モバイルメニューバーをデスクトップのメニューバーと同じように表示するために、CSSコードを追加することです。 CSSコードを特定の1ページに追加するか（特定のページにのみそのようにメニューを表示したい場合）、Webサイト全体に追加するかを選択できます。 通常、CSSコードをWebサイト全体に適用して、Webサイトで必要な一貫性を維持しますが、それはあなた次第です。

特に1つのページにCSSコードを追加する

特に1つのページにCSSコードを追加するには、WordPressダッシュボード内でそのページを開く必要があります。 Divi Builderを使用している間、その中の次のアイコンをクリックする必要があります。

次に、CSSコードの次の行を取得して、[カスタムCSS]フィールドに配置できます。

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Webサイト全体にCSSコードを追加する

他の可能性、そしておそらく最も使用される可能性は、Webサイト全体にコードを追加することです。 これを行うには2つの方法があります。

テーマカスタマイザーを介して

最初の方法は、CSSコードをテーマカスタマイザーに追加することです。 これを行うには、WordPressダッシュボード>外観>カスタマイズ>追加のCSS>カスタムCSSフィールドにCSSコードの次の行を配置します。

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

このオプションを使用すると、変更がリアルタイムで発生することを確認できます。 これは、コード内のいくつかの変更を行い、変更を保存する前にどのように表示されるかを確認したい場合に、おそらく最も興味深い選択です。

テーマオプションを介して

2番目の方法は、CSSコードをテーマオプションに追加することです。 これを行うには、WordPressダッシュボード> Divi>テーマオプション> [全般]タブを下にスクロールし、[カスタムCSS]フィールドに次のCSSコードを配置します。

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

自分の好みに合わせてコードを変更する

もちろん、これがモバイルメニューバーのように見せることができる唯一の方法ではありません。 テーマカスタマイザーのプライマリメニューバーに異なる設定を適用する場合は、CSSコード内でも変更を加える必要がある可能性が非常に高くなります。 ただし、使用するCSSクラスとCSSIDは同じです。

ただし、必ず考慮しなければならないことの1つは、ページコンテナの上部のパディングです。 CSSコードで割り当てた値は、行った他の変更と一致します。 ただし、他のクラスの値を変更する場合は、上部のパディングが正しいままであることを確認する必要があります。 これを行う最も簡単な方法は、より高い値から始めて、ページコンテナが所定の位置に収まるのを確認するまで値を変更することです。

結果

このチュートリアルをステップバイステップで実行した場合、モバイルメニューバーで次の結果を達成できたはずです。

これは、デスクトップで得られる結果とほぼ同じに見えます。

CSSを変更する前のモバイルでの結果は、次のようになります。

最終的な考え

この投稿では、モバイルメニューバーを小さくしてデスクトップのメニューバーに合わせる方法を紹介しました。 このメソッドを機能させるには、必要なCSSコードを特定のページまたはWebサイト全体に追加するだけです。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

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