Diviでビデオトランスクリプトのカスタムトグルを作成する方法

公開: 2021-03-26

ビデオトランスクリプトにカスタムトグルを追加すると、Webサイトに多くのメリットをもたらすことができます。 実際、Webサイトの各ビデオのビデオトランスクリプトを含めるだけで、ユーザーエクスペリエンス、アクセシビリティ、およびSEOを向上させることができます。 ユーザーは、聴覚障害者、難聴者、または騒々しい喫茶店にいる人にとって優れたアクセシビリティ機能であるコンテンツを読むオプションがあります。 また、ビデオ（またはビデオ字幕）を見るよりも速くトランスクリプトを読むことができます。 さらに、追加されたコンテンツには、SEOを改善するキーワードが大量に含まれている可能性があります。 ビデオトランスクリプトのカスタムトグルを作成することも、必要になるまでその長い形式のコンテンツを非表示にしておくことができるので便利です。

このチュートリアルでは、Diviでビデオトランスクリプトのカスタム（およびコンパクト）トグルを作成します。 これを行うために、Diviのトグルモジュールを簡潔な改造でカスタマイズして、どのビデオにもうまく収まるようにします。 次に、Youtubeの自動生成されたトランスクリプトをトグルのコンテンツとして使用する方法を紹介します。 プラグインを使用せずにこれらすべて。

始めましょう！

スニークピーク

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

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

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

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

無料でダウンロード

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

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

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

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

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

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

divi通知ボックス

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

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

始めるために必要なもの

コーナータブの拡張

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

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

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

Diviでのビデオトランスクリプトのカスタムトグルの作成

パート1：Diviビデオモジュールを使用してページにYoutubeビデオを追加する

チュートリアルの最初の部分では、Divi Builderのビデオモジュールを使用して、YouTubeビデオをページに追加/埋め込みします。 このプロセスは非常に簡単です。

ただし、ビデオを追加する前に、セクションに1列の行を追加しましょう。

diviビデオトランスクリプトトグル

次に、ビデオモジュールを行に追加します。

diviビデオトランスクリプトトグル

[ビデオMP4ファイルまたはYoutubeURL]オプションの下にある[ビデオプラスの追加]アイコンをクリックします。

diviビデオトランスクリプトトグル

次に、ポップアップの左側のサイドバーにある[ URLから挿入]アクションを選択します。

入力ボックスにYouTubeビデオのURLを貼り付けます。

次に、[投稿に挿入]ボタンをクリックします。

diviビデオトランスクリプトトグル

ビデオが追加されたら、カスタムオーバーレイ画像をビデオに追加できます。

diviビデオトランスクリプトトグル

パート1：トランスクリプトのカスタムトグルの作成

ビデオが配置されたので、トランスクリプトコンテンツを保持するカスタムトグルを作成できます。 これを行うために、トグルモジュールをカスタマイズします。

まず、ビデオのすぐ下にトグルモジュールを追加します。

diviビデオトランスクリプトトグル

トグル設定で、タイトルテキストに「トランスクリプト」という単語を追加します。 （後で本文のコンテンツに戻って、後でYouTubeビデオのトランスクリプトコンテンツを貼り付けます）

diviビデオトランスクリプトトグル

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

  • アイコンの色：＃42b3a9
  • トグル背景色を開く：透明
  • クローズドトグル背景色：透明
  • テキストの配置：中央
  • タイトルフォント：Roboto
  • タイトルフォントスタイル：TT

diviビデオトランスクリプトトグル

  • 最大幅：800px
  • モジュールの配置：中央
  • パディング：上0px、下20px、左0px、右0px
  • ボーダー幅：0px

diviビデオトランスクリプトトグル

[詳細設定]タブで、トグルのデザインを完成させるために、いくつかのCSSスニペットを追加する必要があります。

次のCSSをトグルタイトルに追加します。 

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

次のCSSをトグルアイコンに追加します。 

right: 0.75em !important;

次のCSSをトグルコンテンツに追加します。 

max-height: 30vh;
overflow-y: scroll;
padding: 20px 3%;
background: #ffffff;
border: 2px solid #eeeeee;
border-radius: 5px;
text-align:left;

diviビデオトランスクリプトトグル

パート3：Youtubeからトランスクリプトを取得してToggleコンテンツに追加する

ビデオのトランスクリプトを作成するのは、手動で行うのが少し面倒な場合があります。 そして、より専門的な方法でそれを行うことができるサービスとプラグインがあります（一部はプレミアムコストです）。 ただし、このチュートリアルでは、すばやく簡単で無料の方法を使用します。 YouTubeの自動生成されたトランスクリプトをビデオ用に抽出し、Webサイトで使用します。

これを行うには、Youtubeのビデオにアクセスし、次の手順に従います。

  1. ビデオの下の[保存]ボタンの横にある[その他のアクション]ドロップダウンメニュー（3つの水平ドット）を開きます。
  2. リストから[トランスクリプトを開く]をクリックします。
  3. [トランスクリプト]ボックスの上部にある[その他のアクション]ドロップダウンメニュー（縦に3つ並んだ点）を開きます。
  4. [タイムスタンプの切り替え]をクリックします。 これにより、テキストの各ブロックの左側にタイムスタンプが表示されなくなります。

diviビデオトランスクリプトトグル

ボックス内のトランスクリプトコンテンツ全体をクリップボードにコピーします。

diviビデオトランスクリプトトグル

現在、テキストは改行でいっぱいです。 それらを取り除くには、textfixer.comにアクセスし、無料の改行削除ツールを使用して、テキストから改行を削除します。

[改行を削除]セクションで、[改行のみを削除]を選択します。

次に、トランスクリプトテキストをボックス内に貼り付けます。

そして、[改行を削除]ボタンをクリックします。

[改行なしの新しいテキスト]というタイトルのセクションでテキストが生成されたら、テキストをクリップボードにコピーします。

diviビデオトランスクリプトトグル

サイトに戻り、トグル設定を開いて、トランスクリプトのコンテンツをモジュールに貼り付けます。

diviビデオトランスクリプトトグル

確かに、トランスクリプトのテキストには大文字、句読点、段落などがたくさんありません。しかし、内容はそこにあり、読みやすくなっています。 ただし、読者のためにテキストをクリーンアップするのに数分を費やしたい場合があります。

それでおしまい！

最終結果

これは、Diviでのビデオトランスクリプトのカスタムトグルの最終結果です。

デスクトップ上…

タブレットで…

そして電話で…

最終的な考え

このチュートリアルでは、DiviトグルモジュールをDiviのビデオトランスクリプト用のカスタムトグルに変換する方法を示しました。 トグルだけのユニークで簡潔なデザインには、ビデオトランスクリプトのアプリケーションを超えたアプリケーションがあります。 つまり、文字通り、好きなテキストをそこに入れることができます。 しかし、私はそれがビデオの下にうまく収まると思います。 また、簡単な解決策が必要な場合は、これらの自動生成されたトランスクリプトをYouTubeビデオに使用すると間違いなく便利です。 ただし、動画コンテンツを転記したり、一部を共有したりするための他のオプションを自由に検討してください。

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

乾杯！