Diviテーマビルダーを使用してモバイルでサイドバーを最適化する方法
公開: 2019-11-29場合によっては、モバイルでサイドバーを維持するのは少しやり過ぎかもしれません。 ユーザーは、タブレットや携帯電話で関連情報を（ある程度まで）スクロールできます。 ただし、ページのメインコンテンツの後に大量のサイドバーコンテンツがある場合、ユーザーはフッターに到達しない可能性があります。これは通常、いくつかの重要な行動の呼びかけで構成されます。 そのため、モバイルでサイドバーを最適化することが重要です。
このチュートリアルでは、Diviテーマビルダーを使用してモバイルディスプレイのサイドバーを最適化する方法について説明します。 この記事で取り上げる内容のいくつかを次に示します。
- サイドバーを使用してテンプレートを作成する方法
- DiviモジュールとWordPressウィジェットを使用したサイドバーコンテンツの作成
- 複数のウィジェット領域を使用して、モバイルで特定のウィジェットを表示/非表示にします
- モバイルのサイドバーコンテンツ間の間隔の制御
- モバイルでサイドバーコンテンツを完全に非表示にする
- モバイルでサイドバーコンテンツを非表示にする
- モジュール内の要素を非表示にして、モバイル上のコンテンツを最小限に抑える
- テキストのサイズと間隔を調整してサイドバーコンテンツをレスポンシブにする
- モバイルでサイドバーのスタック順序を変更する方法
始めましょう。
スニークピーク
デスクトップのサイドバーレイアウトと、モバイルディスプレイ用に最適化されている方法を簡単に説明します。
モバイルで最適化されたサイドバーを備えた無料テンプレートをダウンロードする
このチュートリアルのテンプレートを手に入れるには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 iresubscribediになったり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。
また、ページコンテンツに実際に結果を表示するには、テスト目的で作成されたいくつかの投稿/ページが必要になります。
その後、あなたは行く準備ができています。
モバイルでDiviテンプレートのサイドバーを最適化する方法
モバイルでサイドバーの最適化を開始する前に、まず動作モデルを稼働させる必要があります。 Divi Theme Builderを使用して、ページテンプレートにサイドバーを作成します。 これにより、Diviでサイドバーを構築する際に何が関係しているかをよりよく理解できるようになり、モバイルでサイドバーを最適化する方法をよりよく理解できるようになります。
サイドバーを使用したテンプレートの作成
Diviテーマビルダーパック＃3のインポート
まず、Divi Theme Builder Pack＃3を使用して、サイトのデザインをすぐに開始します。 次に、テンプレートの1つを使用して、モバイル向けに最適化するサイドバーを追加します。
パックをダウンロードしたら、フォルダーを解凍します。
WordPressダッシュボードから、Divi> ThemeBuilderに移動します。 次に、ページの右上のメニューにある移植性アイコンをクリックします。 移植性モーダルから、[インポート]タブを選択し、前にダウンロードしたフォルダーからdivi-theme-builder-pack-3-all.jsonファイルを選択します。 次に、インポートボタンをクリックします。
重要：ウェブサイトのライブコンテンツを上書きしたり、何かを壊したりしないように、Diviを新しくインストールしたテストサイトを使用してください。
すべてのテンプレートがテーマビルダーにインポートされていることがわかります。
カテゴリページテンプレート内のサイドバーレイアウトの構築
すべてのカテゴリページテンプレートを見つけ、クリックしてカスタムボディレイアウトを編集します。
ページの現在のレイアウトでは、ページのメインコンテンツ領域に1列の行が使用されます。 これをサイドバーレイアウト構造に変更する必要があります。 これを行うには、2行目の行メニューの[レイアウトの選択]アイコンをクリックして、3分の2、3分の1の列のレイアウト構造を選択します。
これで、サイドバーの右側に領域ができます。
注意：このサイドバーのレイアウトには特別なセクションを使用していません。 ページのサイドバーレイアウトを作成するときに特殊セクションは必要ありませんが、メインコンテンツ領域に個別の行機能を保持する場合は、特殊セクションを使用することをお勧めします。
このチュートリアルでは、モジュールの正確な設計を再現することに集中しすぎないようにします。 代わりに、モバイルのサイドバーを最適化するのに役立つ要素に集中します。
とはいえ、サイドバーの列に背景色とパディングを追加する必要があります。
サイドバーの列設定
サイドバーに指定された列の設定を開き、以下を更新します。
- 背景色：＃f2f5f9
- パディング：上25px、下25px、左25px、右25px
DiviモジュールとWordPressウィジェットを使用したサイドバーコンテンツの作成
サイドバーのコンテンツは、Webサイトのニーズによって異なります。 ただし、ブログサイトについて話している場合は、通常、次のサイドバーコンテンツ要素の組み合わせが見つかります。
- 著者情報（名前、写真、略歴）
- ソーシャルメディアはボタンをフォローします
- メールオプトイン
- 製品および/またはサービスへのリンク
- 広告
- カテゴリ
- 最近/人気のある投稿
Diviでこれらの要素を作成するには、Diviモジュールを組み合わせて使用します。 この例では、次のDiviモジュールを追加して、サイドバーコンテンツを作成します。
- 検索モジュール–これは検索フォームとして機能します。
- 電子メールオプチンモジュール–これは電子メールオプチンフォームとして機能します。
- テキストモジュール–これはソーシャルメディアのフォローボタンのタイトルになります
- ソーシャルメディアフォローモジュール–これはソーシャルメディアフォローボタンを紹介します。
- テキストモジュール（bg画像付き）–これはサイドバーの広告の例として機能します。
- 宣伝文モジュール（作成者コンテンツ付き）–これはサイドバーの作成者情報領域として機能します。
- テキストモジュール–これはその下のブログモジュールのタイトルとして機能します。
- ブログモジュール–これはサイドバーの最近の/注目の投稿コンテンツとして機能します。
サイドバーモジュールを使用してWordPressウィジェットをプルする
まだ慣れていない場合は、Diviにサイドバーモジュールがあり、ウィジェット領域のコンテンツ（またはウィジェット）をDiviサイドバー領域に取り込むことができます。 実際、このテンプレートは、作業中のウィジェットのすぐ下の行にあるサイドバーウィジェットをすでに使用しています。
サイドバーモジュールを行からドラッグして、メールオプチンモジュールのすぐ下に配置します。
次に、サイドバーモジュールの設定を開きます。 WordPressにデフォルトの設定がある場合、モジュールがサイドバーウィジェット領域をプルしていることがわかります。これは次のようになります。
複数のウィジェット領域の使用
現在、「サイドバー」ウィジェット領域には複数のウィジェットが表示されています。これは、サイドバーウィジェット領域内に複数のウィジェットがあるためです。 ただし、実際には、単一のウィジェットを含む複数のウィジェット領域を使用することで、Diviのサイドバーのデザインをより細かく制御できます。 複数のウィジェット領域を使用すると、ウィジェットのデザインとモバイルでのウィジェットの可視性をより細かく制御できます。
複数のウィジェットを作成するには、新しいタブを開いてWordPressダッシュボードに移動します。 [外観]> [ウィジェット]に移動します。
名前を入力して[作成]ボタンをクリックして、新しいウィジェット領域を作成します。 このウィジェット領域はCategoriesウィジェットを追加する場所になるので、この領域に「Categories」という名前を付けましょう。 ページを更新して、ウィジェット領域を表示します。 次に、CategoriesウィジェットをCategories WidgetAreaにドラッグします。
このプロセスを繰り返して、「アーカイブ」という名前の新しいウィジェット領域を作成します。 次に、アーカイブウィジェットをアーカイブウィジェット領域にドラッグします。
サイドバーレイアウトを使用してカテゴリページテンプレートに戻り、サイドバーモジュールのコンテンツを更新してカテゴリウィジェット領域を表示します。
サイドバーモジュールを複製します（デザインを維持するため）
複製サイドバーモジュールを更新して、アーカイブウィジェット領域をプルします。
サイドバーモジュール間の間隔を制御する
現在、サイドバーを含む行のガター幅の値は2です。これは、サイドバー内の各モジュール間にデフォルトの下部マージン/間隔があることを意味します。 この間隔をより細かく制御するために、サイドバー列のすべてのモジュールの下マージンを削除できます。 これを行うには、検索モジュールの設定を開き、以下を更新します。
- マージンボトム：0px（デスクトップ）、15px（タブレット）
次に、マージンオプションの[その他の設定]アイコン（または右クリックメニュー）をクリックします。 次に、「マージンの延長」を選択します。
[スタイルの拡張]モジュールで、[この列]の[すべてのモジュール]にマージンを拡張するオプションを更新します。
次に、分周器モジュールを使用してモジュール間に間隔を追加できます。
モバイルでのサイドバーの最適化
モバイルでサイドバーを非表示にする
モバイルでサイドバーを完全に非表示にしたい場合があります。 これを行うには、タブレットと電話でサイドバーを含む列の表示を無効にする必要があります。
行設定を開き、サイドバーに指定された列の設定を開きます。 次に、可視性を次のように更新します。
- 無効にする：タブレット、電話
これにより、タブレットとモバイルディスプレイのサイドバー全体が非表示になります。
モバイルでサイドバーコンテンツの一部を非表示にする
デスクトップでは、サイドバーコンテンツのほとんど（またはすべて）を、コンテンツの邪魔にならないように保持する余地がある場合があります。 ただし、モバイルでは、ユーザーは、見ることにほとんど興味がない可能性のある多くのサイドバーコンテンツをスクロールする必要があります。 したがって、Diviテーマビルダーでサイドバーを作成するときは、表示オプションを利用して、モバイルディスプレイのサイドバー要素の一部を無効にします。 また、サイドバーコンテンツにWordPressウィジェットを使用している場合は、複数のウィジェット領域を作成して、モバイルでも特定のウィジェットを設計および非表示にするのに役立ててください。
モバイルでモジュールを非表示にするには、ワイヤーフレームビューモジュールを開き、Diviの複数選択機能を使用して、タブレットと電話で非表示/無効にするすべてのモジュールを選択します。 次に、選択したモジュールの1つの設定を開き、以下を更新します。
- 無効にする：電話、タブレット
この図では、2つのサイドバーモジュール（カテゴリウィジェットとアーカイブウィジェットを含む）とテキストモジュール（広告を含む）を除くすべてのモジュール（仕切りを含む）をタブレットと電話のディスプレイに非表示にしています。 別の言い方をすれば、モバイルにはカテゴリ、アーカイブ、広告のみが表示されます。
ブログページでの結果のプレビュー
ライブページに結果を表示する前に、まずサイトのブログページに結果を割り当てましょう。 これを行うには、テンプレートの上にある歯車のアイコンをクリックし、リストからブログを選択して保存します。
[外観]> [閲覧]で投稿ページが選択されていることを確認してください。
結果
デスクトップサイドバーとモバイルサイドバーの違いは次のとおりです。 モバイルサイドバーにレッスンコンテンツがあることに注目してください。
モバイルでのサイドバーとフッターのコンテンツの重複の回避
デスクトップでは、サイドバーとフッターに重複するコンテンツを追加する必要がありません。 実際、これはコンバージョンを増やすための良い方法です。 たとえば、デスクトップ上で、それはだけでなく、記事の最後にポストの内容を読みながら、ユーザーが電子メールのoptinを見ることができるので、あなたのサイドバーの上部にあるとフッター内のモジュールのoptin電子メールを含めることは理にかなっています。 ただし、モバイルでは、サイドバーのレイアウトはありません。 すべてが1つの列（おそらく2つ）に表示されます。 右側のサイドバーは投稿/ページのコンテンツの下にスタックし、左側のサイドバーは投稿/ページのコンテンツの上にスタックします。 したがって、サイドバーの電子メールオプチンモジュールが投稿/ページコンテンツの下にスタックしている場合、ユーザーは複数の電子メールオプチンモジュール（サイドバーに1つ、フッターに1つ）をスクロールできます。 さらに、右側のサイドバーの下部とフッターの上部に電子メールオプチンがある場合、ユーザーはモバイルで2つの連続する電子メールオプトインをスクロールします。
モジュール内の要素を非表示にして、モバイル上のコンテンツを最小限に抑える
モジュール全体をモバイルで非表示にする必要はないと判断する場合があります。 代わりに、モバイルディスプレイでのみ特定の要素を非表示にすることで、モジュールのコンテンツを最小限に抑えることができます。
たとえば、デスクトップのサイドバーに注目の画像と注目の投稿の抜粋を表示したい場合があります。 ただし、モバイルでは、注目の画像と抜粋を非表示にして、コンテンツの最小化バージョンを作成できます。
サイドバーコンテンツをレスポンシブにする
サイドバーのすべてのコンテンツをモバイルディスプレイに保持することもできます。 なぜだめですか？ ユーザーが喜ぶとわかっている貴重な情報がある場合は、必ずそれを保管してください。 ただし、サイドバーのコンテンツがレスポンシブであることを確認するための手順を実行する必要があります。 つまり、小さい画面に合うように要素のサイズと間隔を調整する必要があります。 これにより、ページのスクロール距離が短縮され、コンテンツが読みやすくなります。
モバイルでテキストサイズを調整する
垂直方向の間隔を最小限に抑え、モバイルでの読みやすさを向上させる簡単な方法の1つは、サイドバーのモジュールコンテンツのテキストサイズを調整することです。 たとえば、見出しのテキストをデスクトップの24pxからモバイルの14pxに調整できます。
モバイルで間隔/仕切りを調整する
この例では、モジュール間に仕切りを追加してスペースを作成しました。 ただし、DiviのDivider設定を使用して、モバイルでこれらの仕切りの間隔を調整できます。 これにより、スクロール時に無駄なスペースが削減されます。
たとえば、タブレットと携帯電話でDividerの上下の余白を30pxから15pxに変更できます。
モバイルでのサイドバーのスタック順序の変更
積み重ね順序は、サイドバーの一般的な問題です。 これは特に左側のサイドバーに当てはまります。 前に述べたように、右側のサイドバーは投稿/ページのコンテンツの下（または後）にスタックし、左側のサイドバーは投稿/ページのコンテンツの上（または前）にスタックします。 つまり、モバイルで左側のサイドバーを使用してページを表示すると、ユーザーが最初に表示するのは、投稿/ページのメインコンテンツではなく、サイドバーのコンテンツです。 これはUXには適していません。 これを修正するには、サイドバーを完全に非表示にするか、左側のサイドバーがモバイルの投稿/ページコンテンツの下にくるようにスタック順序を変更します。
モバイルでページコンテンツの下（または後）にスタックするように左側のサイドバーのスタック順序を変更するには、サイドバーレイアウトを含む行の行設定を開きます。 次に、次のカスタムCSSをメイン要素に追加します。
display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;
次に、サイドバーとして指定された列の列設定を開き、次のカスタムCSSをMain ElementTabletディスプレイに追加します。
order: 2;
ご想像のとおり、この小さなスニペットは順序をデフォルト値（「1」）から「2」に変更します。これにより、列/サイドバー全体がメインコンテンツを含む列の下/後にスタックします。
最終的な考え
サイドバーは、ユーザーがページのメインコンテンツを操作するときに役立つセカンダリコンテンツを提供する、使い慣れたスペースであり続けます。 ただし、モバイルの同じサイドバーコンテンツが気を散らす可能性があります。 うまくいけば、この投稿があなたのサイドバーにタブレットや携帯電話にふさわしい注意を向けるようにあなたを刺激したことでしょう。 これは、サイドバーを完全に非表示にするか、一部のサイドバーコンテンツのみを表示するか、モバイルディスプレイ専用に既存のコンテンツを単純に最適化することを意味する場合があります。
このチュートリアルのテンプレート用に作成されたサイドバーは、テーマビルダーレイアウトパック＃3にある既存のデザイン要素を使用して設計されました。 サイドバー付きのこのテンプレートのデザインが気に入った場合は、上からダウンロードして詳細を確認してください。
詳細については、Divi ThemeBuilderでサイドバーを使用するためのこのガイドを確認してください。
コメントでお返事をお待ちしております。
乾杯！