Diviを使用してモバイル用のカスタム固定ヘッダーを追加する方法

公開: 2017-09-01

モバイルで固定ヘッダー（またはナビゲーション）を使用すると、正しく実行された場合にサイトの使いやすさが向上します。一般に、固定ナビゲーションは、標準のヘッダーよりも22％速くナビゲートできるようです。この高速テクノロジーの世界では、それが半分であったとしても、それはかなりの統計です。

また、Diviを使用すると、数行のCSSでサイトに固定ヘッダーを追加できます。 Diviでは、テーマカスタマイザーを使用してモバイルヘッダーをカスタマイズできますが、現在、モバイル用の固定ヘッダーを展開するための組み込み設定はありません。このチュートリアルでは、以下を含むカスタム固定ヘッダーをモバイルに追加する方法を紹介します。

デスクトップバージョンとは異なる（よりモバイルフレンドリーな）ロゴ。
より多くの利用可能な表示スペースを可能にするための短いヘッダー。
モバイルナビゲーションの展開を容易にする、より大きなクリック可能なハンバーガーナビゲーションアイコン。
半透明の背景で、サイトを表示するときにヘッダーがさらに邪魔になります。

これは、ヘッダーがどのように表示されるかを少し覗いてみたものです。

固定ヘッダー

セットアップ

この設定は、固定ヘッダーでのロゴの切り替えに関する以前の投稿と同様です。開始する前に、次のことを完了してください。

最新バージョンのDiviがインストールされていることを確認してください。
サイトのアクティブなプライマリメニューを作成します。
WordPressサイトのバックエンドから、[テーマカスタマイザー]> [ヘッダーとナビゲーション]> [ヘッダー形式]に移動し、デフォルトのヘッダースタイルが選択されていることを確認します。
両方とも200×131の2つのバージョンのロゴを作成し、WordPressMediaライブラリに追加します。 1つのロゴはメインヘッダーに使用され、もう1つは固定ヘッダーに使用されます。可能であれば、ロゴの固定ヘッダーバージョンをより水平にして、小さい固定ヘッダーで垂直に押しつぶされないようにします。これは、私が使用しているメインヘッダーロゴの例です。これが私の固定ヘッダーロゴの例です。高さの少ないヘッダーにうまく収まる、よりシンプルで水平方向のロゴを作成するために、テキストを切り抜いたことに注意してください。とにかく誰もがそのテキストを読むことができる可能性は低く、ブランドはまだ表現されています。
メニュー項目を使用してプライマリメニューを設定します。
固定ヘッダーを実現するためにカスタムCSSを追加するため、テーマカスタマイザーで標準ヘッダーまたは固定ヘッダーオプションをカスタマイズする必要はありません。ただし、私の例でメニューとロゴのサイズの設定を複製する場合は、次の手順を実行します（これは完全にオプションです）。

テーマカスタマイザーのヘッダーとナビゲーションの設定に移動します。プライマリメニューバーを選択し、以下を更新します。
メニューの高さ：105
ロゴの最大高さ：80
テキストサイズ：20
次に、ヘッダーとナビゲーションに戻ります。 [固定ナビゲーション設定]を選択して、以下を更新します。
固定メニューの高さ：60
テキストサイズ：20

これらの手順を完了すると、開始する準備が整います。

Diviを使用してモバイル用のカスタム固定ヘッダーを追加する方法

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

入門

このデザインは、Diviテーマカスタマイザーの[追加のCSS]セクションでカスタムCSSを入力して実装します。モバイルデバイスのみを対象とするため、すべてのCSSをメディアクエリでラップし、スタイルを980px未満のブラウザー幅に制限します。先に進み、[追加のCSS]ボックスに次のように入力します。

@media (max-width: 980px) {



}

固定ヘッダー

CSSを使用したモバイル固定ヘッダーの作成

ユーザーがページを下にスクロールすると、Diviはすでに「et-fixed-header」というクラスを追加しているため、カスタムCSSでそのセレクターを使用して、モバイル固定ヘッダーを作成およびスタイル設定できます。

以下のCSSのこの最初のグループは、ページの上部でヘッダーを固定（またはスティッキー）にし、固定ヘッダーの高さを55pxに調整します。また、半透明の白い背景色を追加します。メディアクエリブラケット内のテーマカスタマイザの追加CSSに以下を追加します。

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Appleは、親指と指で簡単にクリックできるように、アプリのクリック可能なUI要素はすべて少なくとも44×44ピクセルにすることをお勧めします。これは、モバイル固定ヘッダーの要素の良いガイドになります。次のCSSは、ナビゲーションアイコンを45pxにします。

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

最後に、固定ヘッダーのロゴの高さを追加して、見やすくします。次のCSSを入力します。

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

それでおしまい！これですべて完了です。
モバイル固定ヘッダーを作成するためのCSSの最終コレクションは次のとおりです。

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

設定を保存します。これで、モバイル固定ヘッダーが機能します。

固定ヘッダー

モバイル固定ヘッダーのロゴを切り替える

モバイルの固定ヘッダーに別のロゴを使用する場合は、jQueryを使用してかなり簡単に行うことができます。必要なのは、使用する両方のロゴのURLだけです。最初のロゴ画像のURLは、サイトですでに使用しているデフォルトのロゴである必要があります。 2番目のロゴ画像のURLは、モバイル固定ヘッダーに使用するロゴである必要があります。必ず両方のロゴをメディアライブラリにアップロードし、URLを取得してください。

両方のURLを取得したら、WordPressダッシュボードに移動し、[Divi]> [テーマオプション]> [統合]に移動します。「ブログの先頭にコードを追加する」入力ボックスを見つけて、次のjQueryスクリプトを入力します。

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

固定ヘッダー

次に、「ENTER DESKTOP LOGO IMAGE URL」というテキストを、現在サイトで使用しているロゴのURLに置き換えます。

次に、「ENTER MOBILE LOGO IMAGE URL」というテキストを、モバイルデバイスでのみ使用するロゴのURLに置き換えます。

設定を保存して結果を確認してください。

固定ヘッダー

ブラウザのサポート

この投稿では、CSSプロパティ「position：fixed」に大きく依存して、CSSのみを使用して固定ヘッダーを作成しました。このCSSプロパティは、特にiOS SafariおよびAndroidで、古いバージョンのモバイルブラウザと矛盾する可能性があります。しかし、最近の「position：fixed」は、新しいバージョンのモバイルブラウザ（Opera Miniを除く）でかなりよくサポートされています。

他にももっと堅牢なプラグインとJavaScriptソリューションがありますが、単純なCSSバージョンを提供するのが最善だと思いました。この解決策がうまくいかない場合は、これらのオプションを検討することを検討してください。

最終的な考え

モバイルの固定ヘッダーは使いやすさに悪影響を与える可能性があることに注意してください。それらは常にブラウザの上部をブロックし続けるため、注意しないと、正当な理由もなく貴重な不動産を浪費する可能性があります。誰もがこの男のようなファブレットを持っているわけではないことを忘れないでください。

固定ヘッダー

そのため、モバイルデバイス用の固定ヘッダーをカスタマイズして、高さを短くし、ロゴを変え、ナビゲーションボタンを大きくすることが重要です。また、Divi Webサイトに数行のCSSを追加することで、サードパーティのプラグインを使用せずにモバイルで固定ヘッダーを作成できます。したがって、次のプロジェクトに1つ追加することが理にかなっている場合は、それを選択してください。この種の機能を持つことで、WebサイトのUIを改善できます。

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

乾杯！