ポッドキャスト用の美しいアーカイブとショーノートページの作成

昨日、Diviのビジュアルビルダーを使用してポッドキャストのホームページを設定しました。これにより、リスナーは絶対に感動しますが、ショーをさらに深く掘り下げたい場合はどうでしょうか。

彼らは美しいアーカイブに向かい、今日の作り方を教えるノートページを表示します。

今日の最終製品：メモとアーカイブページを表示する

ページ自体はホームページを補完するように設計されていますが、その要素を直接反映するものではありません。

ショーノートページでは、訪問者がブラウザでエピソードを直接聞いたり、その特定のエピソードのハイライトとリンクを確認したり、メーリングリストに登録したりできるようにしたいと思いました。

アーカイブページは、ショーノートページと同じくらいシンプルでありながら機能的です。 アーカイブページには1つの目的があります。それは、ユーザーがバックカタログをすばやく簡単に表示できるようにすることです。 それはまさにこのページが行うことです。 番組についての簡単な抜粋で、リスナーは番組をスキャンして、聞きたいトピックを正確に見つけることができます。

必要な資産

昨日のように、高解像度の背景画像が必要になります。 私が使用した2つは、Unsplashのこのコレクションにあります（昨日のホームページの背景も含まれています）。 プレビューでグレースケールになるように編集しましたが、どの画像編集ソフトウェアでも、白黒/グレースケール効果を適用するか、彩度スライダーを0まで下げることができます。

同じスタイルのいくつかを使用するので、すでにホームページを作成している場合は、あなたの生活も少し楽になります。

以上です。構築に取り掛かりましょう。

ショーノートページの作成

ショーノートはWordPressの単なる「投稿」なので、ダッシュボードに移動し、[投稿] –> [新規追加]に移動します。

これは、番組の個々のエピソードの番組メモページを作成するたびに行います。 必要なタイトルを付け、URLスラッグを単純なものに設定します（エピソードが終了した後、リスナーがそれを覚えるようにします）。

まず、必ず「ディビビルダーを使用する」をクリックしてください。

これにより、必要な次のオプションセットが開かれるはずです。 ショーノートにサイドバーを使用しないため、ページの右側で、投稿を「全幅」に設定します。 また、投稿のタイトルを「非表示」に設定して、投稿自体の作成者、コメント、日付などのメタデータが表示されないようにします。

次に、Visual Builderに入り、楽しく空白のWebページが表示されます。

最初に実行したいのは、ページの左上隅にある青いセクションの歯車アイコンをクリックして、セクション設定を入力することです。

そこから、背景画像をアップロードします。 設定を少し下にスクロールして、[視差効果を使用]をオンにします。 視差法はデフォルトの「真の視差」のままにします。

これらの設定を保存すると、次のように表示されます。

上記の最終製品に何が含まれていたかは正確ではありませんか？ ページにコンテンツを追加して、少し拡張する必要があります。

緑の+をクリックして、1列の行（左上隅にある行）を挿入します。

次に、昨日のホームページを作成してよかったと思います。 行を選択するとすぐに、要素を選択するように求めるウィンドウが表示されます。 「ライブラリから追加」をクリックして、昨日保存したポッドキャストプレーヤーを選択します。

私は単に「ポッドキャストエピソード」と名付けましたが、別のものを選択した場合は、必ずそれを選択してください。

Badabing-badaboom、あなたは魔法のようにあなたのショーノートページにポッドキャストエピソードを追加しました。

新しいショーノートページごとに、タイトルとメディア（および場合によってはエピソードアート）を編集する必要があることに注意してください。 追加したのは、保存したものの正確なコピーです。

実際のショーノートはポッドキャストプレーヤーの真下に表示されるので、プレーヤーの上にマウスを置いて黒の+を押します。 テキストモジュールが表示されるまで下にスクロールします。 ページに追加します。

[テキスト設定]の[コンテンツ]タブで、メモをWYSIWYGエディターに入力し、[デザイン]タブに移動します。

[デザイン]タブで、次のオプションを更新します。

テキストの色：明るい
テキストの向き：左
テキストフォント：スペシャルエリート
テキストフォントサイズ：20px
テキストテキストの色：#ffffff

保存すると、光沢のある新しいテキストブロックとこれに似たページが表示されます。

ショーノートページのホームストレッチに到達しています。あと2つの要素だけです。 黒の+をもう一度クリックし、昨日保存したボタンテンプレートを追加します。

昨日のようにユーザーをアーカイブに誘導する代わりに、これはユーザーをホームページに戻します。 ボタンの設定ページに移動し、URLを単純な円記号に設定します。

/ homeなどに行ってみませんか？ さて、バックスラッシュだけを使用すると、ユーザーはWebサイトのフロントページが何であれ、何であれ、そこに移動します。 また、同じサイトにいるため、ドメインを移動してもボタンに影響はありません。 それはいつも家に帰ります。 それはまさにあなたがそれをしたいことです！

ボタンの残りの設定に目を通し、入力します。 同じウィンドウで開き、ボタンのテキストを「Return Home」（または好きなもの）に変更し、ボタンの配置を「Right」に変更します（コンテンツの邪魔にならないようにするためと、立てるため）。コンテンツに対して）。 [デザイン]タブのスタイルは、Diviライブラリからインポートされている必要があります。

これで素敵なナビゲーションボタンができました。複数のページで使用できるように、ライブラリに追加することをお勧めします。

そして最後に、ポッドキャストに関するニュースでユーザーを最新の状態に保つために、これらの甘くて甘い電子メールアドレスを取得できるように電子メールサインアップを設定しましょう。

このために、まったく新しい単一列の行が必要です。 緑色の+をクリックして、所定の位置に配置します。 次に、ドロップダウンからEmailOptinモジュールを追加します。 昨日と同じように、モジュール設定に移動して、表示するタイトルと、必要なアクション呼び出しテキストをWYSIWYGエディターに入力します。

また、ボタン自体に必要なテキストを追加します。 まったくユニークな「購読」を選びました。

メールサービスプロバイダーとリストを選択します（リストを選択しないと、モジュールが公開されているときにモジュール全体がページに表示されないことを昨日から覚えておいてください）。

背景のRG​​BAを透明に変更します。

[デザイン]タブで、ヘッダーフォントを「スペシャルエリート」に設定し、サイズを36pxに設定します。

また、ボディフォントを「スペシャルエリート」に設定し、サイズを16pxに設定します。

このサイトの他のほとんどすべてとは異なり、EmailOptinモジュールには境界線を使用したいと思います。 したがって、「ユーザー境界線」を「はい」に移動し、色を#ffffffに設定し、カスタムパディングをすべての面で15pxに設定します。

それが完了したら、[詳細設定]タブに移動し、これを[カスタムCSS]の下の[メイン要素]に追加して、モジュールの角を丸めます。

border-radius:10px;

あなたの仕事を保存してください、そしてあなたは電子メールオプチンを持っています！

ショーノートページに必要な他の唯一のことは、他のページで使用するためにこのモジュールを保存することです。 メールオプトインをサイト全体で一貫させたいので、これをグローバルアイテムとして保存します。 モジュールの上にマウスを置いたときに[ライブラリに追加]ボタンをクリックし、[これをグローバルアイテムにする]チェックボックスをオンにします。

これで、複数のページで使用できる単一の要素ができました。 また、変更を加えると、各モジュールを個別に変更できる上記のポッドキャストプレーヤーやボタンとは異なり、すべてのインスタンスに反映されます。

そして、私の友達は、あなたのショーノートページテンプレートです！ また、ページ全体をライブラリに保存して、ページをインポートし、エピソードごとに必要な要素を変更できるようにすることをお勧めします。

さあ…アーカイブへ！ フィニッシュラインが見えてきました！

アーカイブページの作成

WordPressダッシュボードに移動し、[新しいページの追加]に移動して名前を付け（私の名前は「アーカイブ」）、Divi VisualBuilderを開きます。 簡単なピーシー。

そこに着いたら、テキストモジュールを使用して新しい単一列の行を追加します。

設定に移動し、WYSIWYGエディターでページタイトルを入力します。

[デザイン]タブで、[テキストの色]を[明るい]に、[向き]を[中央]に設定します。 フォントを「SpecialElite」に設定し、フォントサイズを50pxに設定します。

モバイルでテキストの見栄えを良くするには、上下の余白を40pxに変更してください。

作業内容を保存し、アーカイブに背景を追加する準備をしてください。 青い+ボックスの設定を開き、背景画像を選択して、[メモを表示]の場合と同じように視差を設定します。 繰り返しますが、プレビューを使用してこれを1つのグレースケールにしました。

[デザイン]タブで、上部と下部のパディングをそれぞれ55pxと176pxに設定して、アーカイブに投稿がいくつあっても、ページ全体で視差効果が見られるようにします。

なぜ175ではなく176pxなのですか？ 私は反逆者なので、それが理由です。

作業を保存すると、次のように表示されます。

次に、新しい単一列の行を追加します。今回は、ブログモジュールを挿入します。 これにより、設定したWordPressループが表示されます。リスナーが何を期待できるかがわかるように、抜粋とタイトルにするだけです。

設定に移動し、次のように[コンテンツ]タブのオプションを更新します。

投稿番号：10（またはサイトに最適と思われるもの-この番号が表示された後、ページが表示されます）
コンテンツ：抜粋を表示（ユーザーにクリックしてプレーヤーでエピソードを聞いてもらいたいため）
注目の画像を表示：はい
グリッドタイルの背景色：rgba（73,73,73,0.72）

[デザイン]タブで、次のオプションを更新します。

レイアウト：グリッド
ヘッダーフォント：スペシャルエリート
ヘッダーテキストの色：#ffffff
ボディフォント：スペシャルエリート
本文の色：#ffffff
メタフォント：スペシャルエリート
メタテキス​​トの色：#ffffff
境界線を使用：はい
ボーダーカラー：#ffffff
ボーダー幅：1px
ボーダースタイル：ソリッド

これですべての設定が完了したら、最後にもう1つスタイリングを行う必要があります。 グリッド自体には、各ボックスに鋭い正方形の角があり、サイトの他の部分と一致するように、10pxの境界半径を取得する必要があります。

WordPressダッシュボード–> Divi –>テーマオプションに移動し、カスタムCSSまでスクロールします。 このコードをボックスに追加して、個々の抜粋ボックスの角を丸めます。

.et_pb_post {
 border-radius: 10px;
}

「.et_pb_post」は、Diviがこれらのボックス全体を調整するために使用するCSSクラスであることに注意してください。

その後、すべての作業を保存します。

あとは、ライブラリから[ホームに戻る]ボタンを追加するだけで完了です。 黒の+をクリックして、ブログモジュールと同じ行に追加します。

ホットディジティドッグ、アーカイブページの設定が完了しました。

おめでとうございます！ アーカイブページの設定が完了しました。 画面の下部にある紫色の+をクリックして、アーカイブページをテンプレートとして保存すると、バケットリストから別のアイテムを確認できます。昨日から今日までの間に、完全に機能するポッドキャストプレーヤー、ホームページ、アーカイブ、個々のshownotesのテンプレート。

結論は

以上です！ 私の2つのポッドキャストページのチュートリアルをフォローしていただきありがとうございます。 このリンクで、Diviを使用して美しいポッドキャストページを作成する方法の最初の1つをキャッチできます。 ご不明な点やご意見がございましたら、お気軽に下記にご記入ください。できる限りお答えいたします。