Diviでスティッキーオーディオコンテンツバーを作成する方法

公開: 2021-03-15

スティッキーオーディオコンテンツバーを追加することは、ユーザーがページコンテンツをスクロールするときに簡単にアクセスできるオーディオクリップを備えた優れた方法です。 たとえば、ポッドキャスターはエピソードページの上部に注目のオーディオを「貼り付ける」ことができるため、ユーザーはページの残りのコンテンツを聴いたり操作したりしながら、いつでもこれらのオーディオコントロールにアクセスできます。

このチュートリアルでは、Diviに組み込まれているスティッキーポジションオプションを使用して少しクリエイティブになり、Diviでスティッキーオーディオコンテンツバーを作成します。 ページ上の既存のオーディオコンテンツ（オーディオモジュールのある行など）を、ユーザーがスクロール中にオーディオコンテンツを渡すと、ウィンドウの上部に表示されるスティッキーオーディオコンテンツバーに変換する方法を説明します。 さらに、スティッキー状態が有効になった（またはウィンドウの上部で動かなくなった）ときに、バーのコンテンツ、スタイル、およびレイアウトを変更する方法も示します。 このデザインのスムーズな移行と機能は、DiviWebサイトでオーディオコンテンツを紹介するための独自のソリューションを提供します。

それを手に入れよう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

オーディオコンテンツからスティッキーオーディオコンテンツバーへの移行を見てみましょう。

そして、ページをスクロールしながらオーディオバーを操作する方法を見てみましょう。

レイアウトを無料でダウンロード

diviスティッキーオーディオコンテンツバー

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

  1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
  2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
  3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1：DiviBuilderからPodcastPremade LayoutPackをアップロードする

Diviでスティッキーオーディオバーのデザインをすぐに開始するには、事前に作成されたポッドキャストのランディングページレイアウトを使用します。 設定メニューから、「ライブラリからロード」プラスアイコンを選択します。 次に、ポッドキャストのランディングページのレイアウトを見つけて、ページにロードします。

diviスティッキーオーディオコンテンツバー

パート2：オーディオコンテンツを保持するためのスティッキー行の作成

事前に作成されたレイアウトの一番上のセクションで、その一番上のセクション内の行を見つけます。 次に、既存の行の下に新しい1列の行を追加します。

diviスティッキーオーディオコンテンツバー

diviスティッキーオーディオコンテンツバー

行設定

モジュールを追加する前に、新しい行の設定を開き、以下を更新します。

  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％
  • パディング（デスクトップ）：10px上、10px、下、10％左、10％右
  • パディング（タブレットと電話）：10px上、10px、下、10px左、10px右

diviスティッキーオーディオコンテンツバー

行をスティッキーにするには、[詳細設定]タブに移動し、以下を更新します。

  • スティッキーポジション：トップに固執

これにより、ページを下にスクロールしたときに、行（まもなくオーディオコンテンツバーになります）がブラウザウィンドウの上部に固定されます。

diviスティッキーオーディオコンテンツバー

パート3：オーディオコンテンツの追加

行へのオーディオモジュールの追加

次に、既存の（事前に設計された）オーディオモジュールを上部セクションの最初の行から作成したばかりの新しい行に移動/ドラッグします。 これは、スティッキーオーディオプレーヤー内に含める注目のオーディオとして機能します

diviスティッキーオーディオコンテンツバー

宣伝文モジュールを使用したCTAの追加

次に、スティッキーオーディオコンテンツバーの右側に表示されるCTAを作成します。

CTAを作成するには、レイアウトの上部に再生アイコンが付いた宣伝文モジュールをコピーします。

diviスティッキーオーディオコンテンツバー

次に、上部セクションの2行目のオーディオモジュールの下に複製の宣伝文句モジュールを貼り付けます。

diviスティッキーオーディオコンテンツバー

パート4：オーディオコンテンツのスタイリング

オーディオモジュールのスタイリング

行がスティッキー位置を継承したら、オーディオモジュールに異なるスタイルを設定する必要があります。 これを行うには、オーディオモジュールの設定を開き、次のスティッキー状態オプションを更新します。

  • タイトルテキストサイズ（スティッキー）：14px
  • タイトルラインの高さ（スティッキー）：1.3em
  • キャプションラインの高さ（スティッキー）：1.3em

これは、テキストと間隔を少し縮小して、オーディオコンテンツがスティッキーバーの垂直方向のスペースをあまり占有しないようにするだけです。

diviスティッキーオーディオコンテンツバー

次に、スティッキー状態のオーディオモジュールの幅を次のように変更します。

  • 幅（デスクトップ）：80％
  • 幅（粘着性）：100％
  • 最大幅（粘着性）：100％

diviスティッキーオーディオコンテンツバー

次に、オーディオモジュールの間隔を次のように調整する必要があります。

  • マージン：0px上、0px下
  • パディング：上0px、下0px、左0px、右20px

diviスティッキーオーディオコンテンツバー

最後に、テキストを左揃えにし、オーディオプレーヤーのボタンとスライダーに独自の色を追加するために、詳細設定の下にいくつかのカスタムCSSスニペットを追加する必要があります。

スティッキータブの下のオーディオタイトルにのみ、次のCSSを追加します。 

text-align:left;

スティッキータブの下でのみ、次のCSSをオーディオメタに追加します。 

text-align:left !important;

スティッキータブの下のプレーヤーボタンにのみ、次のCSSを追加します。 

color: #fe4943;

次のCSSを[スティッキー]タブの下の[現在のプレーヤースライダー]に追加します。 

background: #2c4ca3;

diviスティッキーオーディオコンテンツバー

宣伝文句CTAのスタイリング

次に、すべてのエピソードを表示するためのモックCTAとして機能する宣伝文句モジュールのスタイルを設定します。

まず、宣伝文の本文に「すべてのエピソード」というテキストを追加します。

diviスティッキーオーディオコンテンツバー

[デザイン]タブで、以下を更新します。

  • ボディフォント：ラト
  • ボディフォントの太さ：太字
  • ボディフォントスタイル：TT
  • 本文サイズ：10px
  • 本文の文字間隔：2px
  • ボディラインの高さ：1.3em

diviスティッキーオーディオコンテンツバー

次に、宣伝文アイコンのサイズを調整します。

  • アイコンフォントサイズ：50px

diviスティッキーオーディオコンテンツバー

次に、モジュールのサイズを次のように調整します。

  • コンテンツの幅：100％
  • 幅：20％

diviスティッキーオーディオコンテンツバー

次に、[コンテンツ]タブに戻り、次のように宣伝文の背景を追加します。

  • 背景色：＃1a1844
  • 背景画像：[画像を追加]
  • 背景画像のブレンド：明度

diviスティッキーオーディオコンテンツバー

このモジュールは、行がスティッキー状態になり、オーディオコントロールバーがウィンドウの上部で動かなくなるまで、最初はビューから非表示にする必要があります。 これを行うには、デスクトップでモジュールを非表示にし、モジュールをスティッキー状態で表示するcssのスニペットをいくつか追加します。

[詳細設定]タブで、次のカスタムCSSを更新します。

メイン要素CSS（デスクトップ）： 

display:none;

メイン要素CSS（スティッキー）： 

display:block;

宣伝文の画像CSS： 

margin-bottom: 10px

diviスティッキーオーディオコンテンツバー

パート5：スティッキー状態でのオーディオバーコンテンツの配置の変更

現在、スティッキー行には1つの列しかなく、2つのモジュールが互いに積み重ねられています。 したがって、スティッキーバーには、オーディオモジュールの下にCTAの宣伝文句が表示されます。 これは、粘着性のあるバーには垂直方向のスペースを取りすぎて、見栄えが悪くなります。

すべてが列内で水平方向と垂直方向に整列していることを確認するために、 CSS flexプロパティを使用して、スティッキー状態のモジュールのレイアウトを調整できます。

これを行うには、両方のモジュールを含む列の設定を開きます。

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します

主な要素（デスクトップ）： 

display:flex;
flex-direction:column;

主な要素（粘着性）： 

display:flex;
flex-direction: row;
align-items:center;
justify-content:center;

diviスティッキーオーディオコンテンツバー

それでおしまい！ 結果を確認しましょう。

最終結果

これは、行がスティッキー状態になった後のデスクトップ上のデザインです。

diviスティッキーオーディオコンテンツバー

そして、これがモバイルでのデザインです。

diviスティッキーオーディオコンテンツバー

そして、これがライブページでオーディオコンテンツのスティッキーバーマジックがどのように機能するかを示すビデオクリップです。

最終的な考え

Diviのスティッキーポジションオプションは、Webデザイナーにとって強力なツールになります。 このチュートリアルでは、Diviのスティッキースタイリングオプションを高度かつ創造的な方法で使用して、スティッキーオーディオコンテンツバーを作成する方法を示しました。 このチュートリアルで取り上げた独自の手法の1つは、flexプロパティを使用してスティッキー行のコンテンツを整列させる方法でした。 ありがたいことに、Divi'sには、高度なカスタムCSSブロックを使用して、カスタムコードスニペットをスティッキー状態に追加する便利な方法があり、必要な設計の柔軟性を提供します。 うまくいけば、これはあなたの次のプロジェクトでそれを作成するためのいくつかのインスピレーションを与えるでしょう。

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

乾杯！