Diviヘッダーをスティッキー/固定にする方法（ステップバイステップガイド）

公開: 2020-11-03

Diviを使用していて、固定ヘッダーを作成しますか？ あなたは正しい場所に来ました。 このガイドでは、Diviヘッダーをスティッキーにする2つの方法を段階的に説明します。

Elementorと並んで、Diviは最も人気のあるWordPressテーマの1つです。 ほぼ200万のサイトが、ビジネスのカスタムデザインを作成するためにそれを使用しています。 あなたがDiviユーザーでもあるなら、私たちはあなたのために特別な何かを持っています。 このチュートリアルでは、いくつかの簡単な手順で固定Diviヘッダーを作成する方法を示します。

なぜDiviヘッダーをスティッキーにするのですか？

Diviヘッダーをスティッキーにする主な理由の1つは、ユーザーのナビゲーションを容易にすることです。 ヘッダーはサイトの上部にあるため、顧客がサイトにアクセスしたときに最初に目にするものの1つです。 ヘッダーには非常に重要な情報が含まれており、ユーザーがコンテンツ内を移動して探しているものを見つけるのに役立ちます。 ヘッダーには、通常、サイトの最も重要なセクション、メインカテゴリ、製品へのリンクなどを配置します。

デフォルトでは、ユーザーがページを下にスクロールしても、WordPressメニューは表示されません。 したがって、競合他社の一歩先を行くために、ヘッダーを修正して、ユーザーが下にスクロールしてもいつでも簡単にアクセスできるようにすることができます。 これは、サイトのナビゲーションを改善するのに役立ちます。 さらに、それはあなたがあなたのユーザーを導きそしてあなたが彼らが行きたいところに彼らを連れて行くのを助けることができます。 したがって、スマートに使用すると、ヘッダーはコンバージョン率を上げるのに役立ちます。

ヘッダーの編集とWordPressメニューへのソーシャルメディアアイコンの追加とは別に、最も人気のあるeコマースサイトはメガメニューを使用して人気のある製品カテゴリを表示します。 そうすることで、買い物客が探しているアイテムを簡単に見つけられるようになります。

Flipkart.comメニュー

Diviテーマには、サイトで使用するためにインポートできる600以上の既成のテンプレートが付属しています。 ただし、ストアを次のレベルに引き上げるには、別のものが必要です。 WordPressでヘッダーを編集する方法はすでに見てきましたが、今日はDiviを使用してヘッダーをスティッキーにする方法を紹介します。

AvadaやGeneratePressなどの一部のWordPressテーマには、テーマパネルでヘッダーを固定するツールが付属しています。 ただし、Diviで同じことを行うには、いくつかの追加のカスタマイズが必要です。

Diviヘッダーをスティッキー/固定にする方法は？

ここでは、Diviヘッダーを修正するための2つの初心者向けの方法を紹介します。

  1. DiviBuilderプラグインを使用
  2. コーディング経由

このセクションでは、各オプションで実行する必要のある手順を見ていきます。 どちらもかなり効果的ですので、一番好きなものを選んでください。

1）DiviBuilderを使用してヘッダーをスティッキーにします

DiviテーマにはBuilderが統合されています。 つまり、Diviテーマをアクティブにしている場合は、追加のプラグインをインストールする必要はありません。 このデモンストレーションでは、サイトですでにDiviを使用していることを前提としています。 そうでない場合は、続行する前にDiviをインストールしてアクティブ化します。

Diviヘッダーをスティッキーにする-diviテーマをアクティブ化 次に、Diviが提供する多くの既成のテンプレートの1つをインポートするか、最初から作成することができます。 デザインを作成または選択したら、 WordPressダッシュボードで[Divi]> [ThemeBuilder]に移動します。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-divi builder

ここでは、サイトのカスタムテンプレートを作成できます。 どのテンプレートにも、3つの主要な要素があります。

  • ヘッダ
  • 体
  • フッター

グローバルヘッダーを編集する

Diviヘッダーを固定したいので、グローバルヘッダーを選択します。 スティッキーにするには、グローバルヘッダーを編集する必要があります。 したがって、マウスをグローバルヘッダーに合わせると、左側に鉛筆アイコンが表示されます。 それをクリックして編集を開始します。 次に、ヘッダーを編集するためのDiviビルダーページが表示されます。 ここでは、テキスト、画像、ソーシャルアイコン、メニューなどの要素を追加できます。 画面の上部にマウスを置き、左側の歯車アイコンをクリックします。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-ヘッダーギアアイコン 新しいポップアップボックスが開き、さまざまなオプションが表示されます。 Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-diviポップアップボックス Diviテーマの最新バージョンには、 Diviポジションと呼ばれる機能が付属しています。 これは、ヘッダーをスティッキーにするために使用する機能です。 [詳細設定]タブの下に、[位置]オプションが表示されます。 それを開き、ドロップダウンから[固定]オプションを選択します。 次に、ヘッダーを更新します。 Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-diviヘッダーの位置 その後、ポップアップボックスが消え、右隅の[保存]ボタンを押してグローバルな変更を保存する必要があります。 Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-変更を保存する ヘッダーを更新したら、このビルダーを閉じます。 次に、Diviビルダーオプションを保存します。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-diviビルダーオプションを保存する 次に、フロントエンドを確認します。 新しいタブでWebサイトを開き、一番下のセクションまでスクロールします。 下のGIFでわかるように、ヘッダーは固定されたままです。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-diviヘッダーが修正されました コードを1行も記述せずに、固定ヘッダーを作成しました。 Divi Builderを使用してヘッダー要素を更新するときは、必ず設定を保存してください。 そうしないと、Webサイトのフロントエンドで新しい変更を確認できません。

2）コーディングによってDiviヘッダーを修正します

それでは、コーディングしてDiviヘッダーをスティッキーにする方法を見てみましょう。 このために、いくつかのCSSコードを使用します。 開発者でなくても心配しないでください。使用するコード行は非常に単純です。

まず、 WordPressダッシュボードで、 Divi> Theme Builderに移動し、 Headerセクションを開きます。 次に、歯車のアイコンをクリックしてポップアップを開きます。 [詳細設定]セクションに、カスタムCSSIDおよびCSSクラスを追加するための設定が表示されます。 ここでは、以下を使用します。

  • CSS ID ：メインヘッダー
  • CSSクラス：et-fixed-header

そしてそれを保存します。 Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-カスタムIDとクラスをdiviに追加します その後、ビルダーを保存して終了します。 次に、Divi Builderオプションに戻り、変更を保存します。

新しい変更を保存する

次に行う必要があるのは、CSSコードをサイトに追加することです。 これを行うには2つのオプションがあります。

  • Diviのテーマオプションを介して
  • WordPressカスタマイザーの使用

両方の方法を段階的に見ていきましょう。

テーマオプションを使用してヘッダーを修正する

まず、テーマオプションセクションを使用してCSSコードを追加する方法を見てみましょう。 WordPressダッシュボードで、 [Divi]> [テーマオプション]> [カスタムCSS]に移動します。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-カスタムcssを追加します

次に、CSSコードを下からコピーします。

 @media only screen and（min-width：981px）{
＃main-header.et-fixed-header {
位置：固定;
    パディング-top：30px;
}
＃page-container {
padding-top：135px;
}
}

コードエディタに貼り付けて、変更を保存します。 その後、設定を保存し、Webサイトのフロントエンドをチェックして、サイトのDiviヘッダーがスティッキーになっていることを確認します。

注：CSSコードのパディングを調整し、サイトのサイズをカスタマイズしてください。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-変更を保存します

WordPressカスタマイザーでヘッダーをスティッキーにする

Diviヘッダーをスティッキーにするもう1つの簡単な方法は、WordPressカスタマイザーを使用することです。 カスタマイザーを開くには、 [外観]> [カスタマイズ]に移動し、[追加のCSS]を開きます。

次に、このコードをコピーして貼り付けます。

 @media only screen and（min-width：981px）{
＃main-header.et-fixed-header {
位置：固定;
    パディング-top：30px;
}
＃page-container {
padding-top：135px;
}
}

注：このコードはデモサイトで機能しますが、CSSコードのパディングを調整し、サイトサイズをカスタマイズすることをお勧めします。 Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-ワードプレスカスタマイザーを介してcssを追加します

最後に、変更を保存します。これで完了です。 WordPressカスタマイザーを使用してDiviヘッダーを修正しました。

Diviヘッダーをスティッキーにする方法（ステップバイステップガイド）-ヘッダーはcssで修正されました

ボーナス：Diviメニューに変更を加える

このセクションでは、CSSコーディングなしでDiviの固定メニューオプションを変更する方法を学習します。 これを行うには、 WordPressカスタマイザーに移動します。 [ヘッダーとナビゲーションの設定]の下に、 [固定ナビゲーション設定]というカスタマイズオプションが表示されます。

それを開くと、専用のカスタマイズオプションが表示されます。 この画面に表示される主なオプションは次のとおりです。

  • ロゴ画像を非表示
  • メニューの高さを固定
  • 文字サイズ
  • メニューの背景色
  • メニューリンクの色
  • その他

このように、スティッキーヘッダーに変更を加える必要があるときはいつでも、WordPressカスタマイザーに移動してこれらを変更するだけです。 そして最良の部分は、ライブプレビューセクションですべての更新を確認できることです。

結論

全体として、Diviヘッダーをスティッキーにすることで、サイトのナビゲーションを改善し、コンバージョン率を改善できる可能性があります。 このガイドでは、それを行うための2つの異なる方法を示しました。

  1. DiviBuilderで
  2. コーディングする
    1. Diviのテーマオプション経由
    2. WordPressカスタマイザーの使用

どちらの方法も非常に効果的であるため、スキルとニーズに最も適した方法を選択してください。 すばやく何かが必要な場合は、DiviBuilderを使用できます。 これは、数回クリックするだけでDiviヘッダーをカスタマイズするのに役立つ特別なWordPressプラグインです。 一方、CSSコードを少し使用して、テーマオプションまたはWordPressカスタマイザーを使用してヘッダーをスティッキーにすることもできます。 少しコーディングが必要ですが、このメソッドは非常に単純で、DiviBuilderに数行のコードを追加するだけで済みます。

最後に、この投稿が気に入った場合は、ソーシャルメディアで共有し、ブログセクションでさらに役立つチュートリアルを確認してください。

Diviヘッダーを修正する他の方法を知っていますか？ ご意見をお聞かせください。下のコメント欄でお知らせください。