Diviプラグインのハイライト–モバイルメニューカスタマイザー

公開: 2017-08-20

デスクトップメニューとは別にモバイルメニューのスタイルを設定したいと思ったことはありませんか？ Diviのメニューシステムには、メニューをハンバーガーアイコン内に配置するモバイルの設定が含まれていますが、モバイルに別のヘッダーを使用したり、新しいスタイルを追加したり、メニューの開閉アクションをアニメーション化したりしたい場合はどうでしょうか。これは、Mobile MenuCustomizerと呼ばれるサードパーティのプラグインを使用して行うことができます。

このプラグインのハイライトでは、Divicio.usのモバイルメニューカスタマイザーを見て、それが何をすることができるか、そしてそれがあなたのウェブサイトの読み込み時間に与える影響を見ていきます。これらの例の画像は、Unsplash.comから取得したものです。

モバイルメニューカスタマイザのインストール

まず、ダウンロードしたファイルを解凍する必要があります。その中には3つのファイルがあります。

変更ログ
Divi-mobile-menu-customizer
README

divi-mobile-menu-customizerファイルをアップロードしてアクティブ化します。

ダッシュボードのプラグインメニューには、DMMCプラグインライセンスと呼ばれる新しいリンクがあります。更新を受け取るには、これをクリックしてライセンスキーを入力します。

新しいテーマカスタマイザ設定

モバイルメニューカスタマイザーと呼ばれる新しいメニュー項目がテーマカスタマイザーに追加されます。これを選択すると、モバイルメニューを使用してモバイルビューにWebサイトが自動的に表示されます。タブレットモードを選択することもできます。メニューには7つのメニューがあります。

メニューヘッダー設定

メニューヘッダー設定には、ヘッダーの背景色、テキストとアイコンの色、アイコン形式、開いているメニューと閉じているメニューのテキストの入力、テキストサイズ、アイコンサイズ、メニューバーのフォントスタイル、およびドロップダウンメニューの上部オフセットの設定が含まれます。

ヘッダーの背景色とテキストおよびアイコンの色を変更しました。テキストとメニューアイコンを表示することを選択し、表示するテキストを入力し、太字と斜体のフォントスタイルを選択しました。テキストとフォントのサイズはデフォルトのままにしておきます。左側にアイコン、右側にテキスト、テキストのみ、またはアイコンのみを表示することもできます。

開いているメニューでは、表示するテキストを入力し、Xアイコンを表示するように選択しました。また、調整可能であることを示すために、ドロップダウンメニューの上部オフセットを5に設定しました。

メニュー設定

メニュー設定には、固定メニュー、全幅（ポートレートモード）、パディング、トップバーの背景色、テキスト設定、および境界線設定が含まれます。ウェブサイトがポートレートモードで自動的に表示されるのが好きですが、ランドスケープモードで表示する方法が見当たらないため、全幅メニューの効果を確認できません。

メニューがスクロール時に画面に表示されるように、固定に設定しました。トップバーとメニューの背景色を設定し、テキストを中央に配置しました。背景を少しだけ表示するように不透明度を設定したことがわかります。

また、間隔とフォントサイズ、フォントの色を増やし、境界線の幅、半径、色を調整しました。この2番目の例では、上部の境界線の半径と左右の境界線の幅を調整しました。小さなスライダーにデフォルト設定に戻すためのボタンがあると便利です。

メニュー項目の設定

メニュー項目設定は、メニュー内の個々の項目に適用されます。余白、高さ、背景色、境界線の幅、境界線の半径、および境界線の色を調整します。

この例では、余白を4に増やし、アイテムの高さを22に設定し、境界線の幅を5に設定し、境界線の半径を8に設定して、角を少し丸くしました。

サブメニュー設定

サブメニュー設定を使用すると、サブメニューを折りたたみ可能にしたり、背景やリンクの色を変更したり、フォントのサイズやスタイルを調整したりできます。色を調整し、フォントサイズを14から16に増やし、斜体に設定して折りたたみ可能にしました。

風邪

シャドウを使用すると、インとアウトの方向、XとYのオフセット、ぼかし、広がり、色を制御できます。これを、Xオフセット20、Yオフセット-17、シャドウブラー5、スプレッド10で開始するように設定しました。また、目立たせるために暗くしました。

グラデーション

グラデーションは、メニューヘッダーとメニュー自体に適用できます。それはあなたにそれぞれの停止場所であなたに3つの色を与えます。角度を変えることもできます。

これはメニューのグラデーションの外観です。

メニューとメニューヘッダーに異なるグラデーションを表示することもできます。これは、メニューヘッダーの角度と停止位置が異なる同じグラデーションです。

アニメーション

アニメーションには、2つのドロップダウンリストがあります。1つは開いているアニメーション用、もう1つは閉じているアニメーション用で、それぞれ10個のアニメーションがあります。アニメーションには、フェード、シュリンク、ズーム、フリップなどがあります。インアニメーションとアウトアニメーションは、任意の組み合わせで使用できます。

これは、Fade InRightとFadeOutLeftを使用しています。

これはGrowandShrinkを使用しています。

これはFlipInXとFlipOutYを使用します。

これはLightspeedInとFadeOutを使用しています。

設定を一緒に使用する

ここまでは、各メニュー項目を個別に強調表示して、それらが何をするかを確認できるようにしました。これらを組み合わせたときの外観の例をいくつか示します。

この例では、メニューの背景とリンクの色を調整し、メニューアイコンをテキストに交換し、バーの色を変更し、メニュー項目の高さを調整し、上部の境界線を指定し、サブメニューのフォントを太字と斜体に設定し、サブメニューの色、はめ込みを使用してシャドウを提供し、表示されるように設定を調整しました。

これは、角を丸めるために半径12のオフセット境界幅を使用します。ボーダーの色は赤です。フォントのサイズと幅を最大に増やしました。背景は黒で、不透明度は.87です。ヘッダーは黒で、不透明度は.55です。メニューリンクは、ドロップダウンメニューの境界線と一致するように赤で表示されます。

この例では、フォントサイズを大きくし、ヘッダーメニューとドロップダウンメニューの両方にさまざまな色合いの赤いグラデーションを使用しています。それに合わせて、トップバーの色を濃い赤に設定しました。メニューの高さも調整しました。

この例では、ドロップダウンメニューのトップオフセット100を使用しており、固定されていません。文字間隔とフォントサイズが最大になります。メニューの境界線の半径は50に設定され、境界線の幅は5に設定されています。テキストは右揃えになります。背景は白で、不透明度は30です。

メニュー項目の境界線の幅は1、半径は25です。同じ黒い背景を使用しましたが、不透明度は.08で、境界線の不透明度は.12です。

サブメニュー設定の背景の不透明度は.55で、フォントは白です。不透明度が.17の同じ黒を使用すると、影が少し目立ちます。シャドウオフセットは、xとyの両方で16に設定されます。さまざまなレベルの陰影と不透明度を持つ黒を使用して、ヘッダーにグラデーションを配置しました。

いくつかの小さな調整で外観が完全に変わります。これは、中央に配置され、背景の不透明度が.90の太字のフォントを使用しています。

タブレットモードのメニューを見てみましょう。カスタマイズするときにモードを切り替えることをお勧めします。

更新–2つの新しい設定

この記事が公開される前に、背景画像とメニューアイコンの2つの新しい設定が追加されました。

背景画像の設定

背景画像の設定では、画像をアップロードしてドロップダウンメニューの後ろに配置できます。サイズ、位置、繰り返しの場合、および境界線のクリップ方法を選択できます。

メニューアイコンの設定

メニューアイコン設定では、メニュー項目ごとにアイコンを選択し、サイズと場所を調整できます。

モバイルメニューカスタマイザーPageSpeedテスト

プラグインはすべての機能を有効にして多くの効果をレンダリングしているので、PageSpeedInsightsを使用してテストすることにしました。プラグインを無効にすると、テストサーバーのスコアは70になります。縮小プラグインやキャッシュプラグインを使用していません。

プラグインを有効にすると、スコアは70から69になりました。テストを2回試したところ、どちらも同じ結果が得られました。このレベルのカスタマイズを行うことは1ポイントの価値があります。

ライセンス

あなたとあなたのクライアントの両方のために無制限のウェブサイトにプラグインをインストールすることができます。これには、生涯の更新と6か月のサポートが含まれます。ドキュメントは、開発者のWebサイトでビデオとして提供されます。

最終的な考え

モバイルメニューカスタマイザは、モバイルメニューのスタイルを設定するための多くの機能を追加します。カスタマイズは使いやすいと思いました。メニューアイコンが含まれているのを見たかったのですが、今では含まれています。ロゴのいくつかの機能を確認したいと思います。デスクトップメニューでも利用できるカスタマイズを確認したいと思います。プラグインはExtraでは機能しません。

カスタマイズは見栄えがよく、選択できる設定はたくさんあります。ヘッダーとメニューを個別にスタイル設定できるのが好きです。モバイルメニューのスタイルをカスタマイズしてアニメーションを追加することに興味がある場合は、モバイルメニューカスタマイザーを一見の価値があります。

ご意見をお聞かせください。 モバイルメニューカスタマイザーを試しましたか？ コメントであなたの経験を教えてください。

Francois Poirier /shutterstock.comによる注目の画像