Diviの全幅メニューモジュールにレスポンシブロゴを追加する方法

公開: 2022-06-05

インターネットトラフィックの50％以上がモバイルデバイスからのものであることをご存知ですか？つまり、モバイル版のWebサイトは非常に重要であり、誰かがあなたのページにアクセスする主な方法でさえある可能性があります。ウェブサイトがレスポンシブでモバイルフレンドリーであることを確認することは、ウェブサイトを設計する上で不可欠なステップです。このチュートリアルでは、Diviの組み込みのレスポンシブオプションを使用して、レスポンシブロゴを全幅メニューモジュールに追加する方法を示します。これにより、大きな画面に表示されるより大きなまたはより複雑なロゴと、より小さな画面に表示されるより小さなまたはより単純なロゴを追加できます。

飛び込みましょう！

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

スニークピーク

これが私たちがデザインするもののプレビューです。デスクトップ版のウェブサイトには、追加のテキストを含む使用済みのロゴがあり、モバイル版のロゴには、基本的なロゴマークのみがあります。

Diviレスポンシブロゴ全幅メニュー最終デザイン

レスポンシブロゴ全幅メニューモバイル

レスポンシブロゴが必要な理由

チュートリアルを開始する前に、Webサイトにレスポンシブロゴが必要な理由を確認しましょう。

まず、レスポンシブロゴとは何ですか？レスポンシブロゴとは、ロゴのバリエーションであり、小さいサイズでも見やすく、読みやすくするために、小さく、単純に、省略したり、再配置したりすることができます。ロゴに詳細な要素が多すぎると、小さいサイズではうまく表示されない場合があります。レスポンシブロゴの小さなフォントサイズと余分なタイポグラフィも、小さな画面では読みにくい場合があります。ユーザーの画面サイズに合わせてウェブサイトにレスポンシブロゴを実装することで、何があってもブランドアイデンティティを明確に表現できます。レスポンシブロゴの優れた例については、このWebサイトをご覧ください。

始めるために必要なもの

まず、Diviテーマをインストールしてアクティブ化し、Webサイトに最新バージョンのDiviがあることを確認します。次に、ロゴのバージョンが少なくとも2つあることを確認します。1つはサイトのデスクトップビュー用で、もう1つはモバイルビュー用です。最後に、Diviの高校レイアウトパックのヘッダーとフッターのテンプレートをダウンロードします。

これで、開始する準備が整いました。

Diviの全幅メニューモジュールにレスポンシブロゴを追加する方法

ヘッダーとフッターのレイアウトをインポートする

サイドバーのDiviメニューからテーマビルダーに移動します。移植性アイコンを選択して、高校のヘッダーとフッターのレイアウトをインポートします。 [インポート]タブを選択し、レイアウトファイルを選択します。次に、[Diviテーマビルダーテンプレートのインポート]を選択します。

Diviレスポンシブロゴ全幅メニューインポートレイアウト

ヘッダーを編集し、レスポンシブロゴをテーマビルダーに追加します。鉛筆アイコンをクリックして、ヘッダーを編集します。

全幅メニューモジュールを作成する

全幅セクションを追加

元のメニューは標準のメニューモジュールで作成されているため、レイアウトを変更して全幅のメニューモジュールを追加する必要があります。まず、既存のメニューの下のグローバルヘッダーに全幅セクションを追加します。

Diviレスポンシブロゴ全幅メニュー全幅セクションを追加

全幅セクションの設定で、[詳細]、[スクロール効果]の順に移動します。

スティッキーポジション：トップにこだわる

次に、背景色を追加します。

背景色：＃f5f0eb

Diviレスポンシブロゴ全幅メニューセクションの背景

粘着性のある背景に別の色を追加します。

粘着性のある背景色：#ffffff

Diviレスポンシブロゴ全幅メニュースティッキーな背景

全幅メニューモジュールを追加する

次に、全幅メニューモジュールを追加しましょう。

Diviレスポンシブロゴ全幅メニューメニューモジュールの追加

モジュール設定を開き、背景を削除します。

Diviレスポンシブロゴ全幅メニュー背景を削除

元のメニューの外観を簡単に複製するために、スタイルのコピー機能を使用して、カスタマイズされた設定の一部をコピーできます。元のメニューの設定を開き、[メニューテキストスタイル]を右クリックして、[メニューテキストスタイルのコピー]を選択します。

コピーしたら、全幅メニューモジュールの3つのドットをクリックし、[メニューテキストスタイルの貼り付け]を選択します。

ドロップダウンメニューの設定で同じ手順を繰り返します。元のメニューの設定を開き、[ドロップダウンメニュースタイル]を右クリックして、[ドロップダウンメニュースタイルのコピー]を選択します。全幅メニューモジュールの3つのドットをクリックし、[ドロップダウンメニュースタイルの貼り付け]を選択します。

アイコンスタイルについてもう一度繰り返します。元のメニューの設定を開き、[アイコンスタイル]を右クリックして[アイコンスタイルのコピー]を選択します。全幅メニューモジュールの3つのドットをクリックし、[アイコンスタイルの貼り付け]を選択します。

Diviレスポンシブロゴ全幅メニューコピー貼り付けアイコンスタイル

テキストの配置を右に設定します。

テキストの配置：右

Diviレスポンシブロゴ全幅メニューテキストの配置

[デザイン]、[サイズ]の順にロゴの最大の高さを設定します。

ロゴの最大高さ：50px

Diviレスポンシブロゴ全幅メニューロゴ最大高さ

次のCSSを[カスタムCSS]の下の[メニューリンク]セクションに追加します。

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Diviレスポンシブロゴ全幅メニューカスタムCSS

最後に、上部と下部のパディングを設定します。

パディング-トップ：10px
パディング-下：10px

Diviレスポンシブロゴ全幅メニューパディングを追加

次に、元のメニューセクションを削除します。

Diviレスポンシブロゴ全幅メニュー削除セクション

レスポンシブロゴを追加する

次に、レスポンシブロゴを追加します。ありがたいことに、Diviは組み込みのレスポンシブオプションでこれを簡単にします。

[全般]で、ロゴ設定を開き、デスクトップバージョンのロゴをアップロードします。

Diviレスポンシブロゴ全幅メニューロゴを追加

電話のアイコンを選択してレスポンシブオプションを使用し、モバイルロゴをレスポンシブロゴに置き換えます。

Diviレスポンシブロゴ全幅メニューアップロードレスポンシブロゴ

既成のレイアウトで新しいページを作成する

レスポンシブロゴが動作している全幅メニューを表示するには、Diviライブラリから事前に作成されたレイアウトで新しいページを作成しましょう。このデザインでは、High School LayoutPackのHighSchoolホームページを使用して、ヘッダーとフッターを一致させます。

Webサイトに新しいページを追加してタイトルを付け、DiviBuilderを使用するオプションを選択します。ヘッダーとフッターのレイアウトをグローバルヘッダーとフッターとしてインポートしたため、このページのデフォルトのレイアウトを使用します。

Diviレスポンシブロゴ全幅メニュー作成ページ

この例では、Diviライブラリから作成済みのレイアウトを使用するため、[レイアウトの参照]を選択します。

Diviレスポンシブロゴ全幅メニューレイアウトの参照

高校のホームページのレイアウトを検索して選択します。

[このレイアウトを使用]を選択して、ページにレイアウトを追加します。

Diviレスポンシブロゴ全幅メニューレイアウトを使用

最終結果

それでは、最終的なデザインを見てみましょう。

Diviレスポンシブロゴ全幅メニュー最終デザイン

レスポンシブロゴ全幅メニューモバイル

最終的な考え

モバイルフレンドリーでレスポンシブなウェブサイトを持つことは、これまで以上に重要です。また、Diviに組み込まれているレスポンシブオプションのおかげで、これまでになく簡単に作成できます。レスポンシブロゴを使用すると、画面のサイズに関係なく、ブランドアイデンティティが常に明確になります。 Diviのレスポンシブオプションについて詳しく知りたい場合は、レスポンシブな紹介文のコンテンツに関するこのチュートリアルをご覧ください。レスポンシブデザインをウェブサイトにどのように実装しましたか？コメントであなたの考えを聞いてみたいです！