エレガント ThemesのDiviでは、ヘッダを左右のサイドに配置したり、通常の場合のように上部に配置することができるオプションを提供しています。 そして、いくつかの追加のオプションを提供し、様々なヘッダーを構成することができます。
[この記事は、2022年5月16日に最後に更新されました。 ]
WordPress Diviテーマヘッダスタイルを変更する方法
ヘッダスタイルを変更するには、 WordPress 管理者ページで Divi > Theme Customizer（テーマカスタマイザー） > Header & Navigation（ヘッダーとナビゲーション） > Header Format（ヘッダーフォーム）に移動するようにします。
その後、次のようなオプションを設定することができます。
ヘッダスタイル：
- 기본
- 中央揃え
- 中央一列のロゴ
- スライドの
- フルスクリーン
加えて、 Enable Vertical Navigation(垂直ナビゲーションを有効に）を選択すると、ヘッダーがサイドに配置され、配置される位置を左右のいずれかから選択できます。
そして Hide Navigation Until Scroll(スクロール時までナビを隠す）オプションもあります。
個人的には WordPress 人気のテーマの一つである BEテーマをあまり好まないが、BEのテーマは、現在290以上のデモを提供しています。 様々なデモを見ながらのヒントをもらったりします。
BeThemeのデモ中 マリーナの場合は、以下の図のようにロゴが中央に配置されており、すぐ下にメニューが表示されます。
そしてスクロールすると、メニューが通常のメニュースタイルのようにロゴが左に行き、メニューが右に配置されます。
Diviで同様にメニューを構成するには、まず、 Divi>テーマ・カスタマイザー>ヘッダーとナビゲーション>ヘッダフォームから ヘッダスタイルを「中央揃え」に設定します。
その後、次のCSSコードを Divi>テーマオプション>一般的なに移動し、 ユーザーカスタムCSS 部分に追加します。
.et-fixed-header .logo_container { float: left; }
.et-fixed-header #et-top-navigation {float: right;width: 50% !important; margin-top: 20px;}
その後、サイトをロードすると、ロゴが中央に配置されてすぐ下にメニューが表示されます。 そして、マウスをスクロールすると、ロゴは左に、メニューは右に移動して配置されます。
他にもDiviメニューに関連して、以下の記事を参考にみることができます。
- Diviテーマメニューの背景色を透明に設定し、ページごとに異なるメニューの背景色を適用する方法
- Diviメニューがミディアムのように動作するように作成
- Diviテーマのメガメニューにハンバーガーのアイコンを追加する
- Diviテーマでスクロールすると、ヘッダーが減らないようにする方法
コメントを残す