最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressで動画スライダーを作成する方法(簡単なチュートリアル)

競合他社が簡単に注目を集めているのに、WordPressの直帰率が上昇するのを見ているのはイライラするものです。多くの場合、その違いは1つのこと、つまり「動き」にかかっています。

静的なページは興味を持続させるのに苦労し、訪問者はエンゲージメントなしにスクロールして通り過ぎてしまいます。

これを修正する1つの方法は何でしょうか?動画スライダーを追加することです。

動画スライダーは、動き、ビジュアル、ストーリーテリングを組み合わせてコンテンツに命を吹き込みます。静止画ではできない方法で注目を集め、ユーザーがサイトに長く滞在するように促します。

このチュートリアルでは、コーディングなしでWordPressに動画スライダーを作成する方法を紹介します。完了すると、サイトをより魅力的にし、訪問者を惹きつけるダイナミックなホームページが完成します。🙌

wordpress-で-ビデオスライダーを作成する方法-og

WordPressでビデオスライダーを使用する理由

動画スライダーは、WordPressサイトをより魅力的で記憶に残るものにする簡単な方法です。

静止画とは異なり、動画はすぐに注意を引き、より少ない時間でより多くのことを示すことができます。強い第一印象は、訪問者がサイトに留まるか、サイトを離れるかの違いになります。

動画スライダーは信じられないほど用途が広いです。製品デモを強調したり、顧客のレビューを共有したり、プロモーションコンテンツを紹介したりするために使用できます。たとえば、次のようになります。

  • 旅行サイトでは、ホテルの推薦、目的地、ツアー体験を強調できます。
  • 不動産サイトでは、仮想物件のウォークスルーを特集できます。

基本的に、ビデオスライダーは画像ではなくビデオを使用するスライドショーです。これにより、サイトがより生き生きとし、インタラクティブになります。

ビデオスライダーのあるウェブサイト

WordPressウェブサイトで動画スライダーを使用するための実用的な方法をいくつか紹介します。

  • 製品またはサービスのレビューを紹介する
  • 機能と製品の動作方法を実演する。
  • 幸せな顧客からの短いお客様の声を共有します。
  • 詳細なケーススタディを強調する。

これを踏まえ、WordPressで簡単に動画スライダーを作成して視聴者を惹きつける方法を解説します。このガイドで取り上げる全ステップの概要を以下に示します。

準備はいいですか?早速始めましょう!

WordPressサイトに動画スライダーを追加する

ウェブサイトに動画スライダーを追加する最も簡単な方法は、プラグインを使用することです。

Soliloquyは市場で最高のWordPressスライダープラグインであるため、Soliloquyをお勧めします。ほとんどのWordPressスライダープラグインはウェブサイトを遅くしますが、Soliloquyは非常に高速で、ページの読み込み時間に影響しません。

私たちはそれを広範囲にテストしました。詳細については、Soliloquyの完全なレビューをご覧ください。

Soliloquy WordPress 画像スライダー

Soliloquyは、YouTube、Vimeo、Wistiaを含む複数の動画プラットフォームをサポートしています。したがって、動画が既に公開されている場合は、動画URLを入力するだけです。

このプラグインはモバイルレスポンシブでもあります。これは、あらゆるデバイスや画面サイズで機能する動画スライドを作成するために使用できることを意味します。さらに、複数のスライドタイプに対応しているため、動画、画像、コンテンツを追加することもできます。

次に、最初に行う必要があるのは、Soliloquyプラグインをインストールしてアクティブ化することです。インストールの詳細については、WordPressプラグインのインストール方法に関する投稿をご覧ください。

💡 注: 動画スライダーを作成できる無料のSoliloquyプラグインもあります。ただし、YouTube、Vimeo、Wistaの組み込みサポートと、より多くのビデオ制御設定があるため、チュートリアルではSoliloquy Proプラグインを使用します。

アクティベートしたら、Soliloquy » Add Newに移動するだけです。

次の画面で、新しいビデオスライダーにタイトルを付ける必要があります。次に、「他のソースからファイルを選択」というボタンをクリックしてください。

新しい動画スライダーを追加

🧑‍💻 プロのヒント: Soliloquyでは動画を直接アップロードできますが、これは推奨されません。動画をWordPressライブラリにアップロードするとサイトが遅くなる可能性があるため、YouTube、Vimeo、Wistiaなどの動画ホスティングサービスを使用する方が良いでしょう。

詳細については、WordPressに動画を絶対にアップロードしてはいけない理由に関するガイドをご覧ください。

ポップアップウィンドウが表示され、「動画スライドを挿入」オプションをクリックする必要があります。

ここで、動画のタイトル、動画URL、キャプション、およびaltテキストを追加する必要があります。

動画URLには、メディアライブラリのリンク、またはYouTube、Vimeo、Wistiaなどの動画ホスティングサイトのリンクを使用できます。

ビデオスライドを挿入する

ビデオの詳細をすべて入力してください。

「画像URL」フィールドには、動画のプレースホルダー画像も提供する必要があります。この画像は、動画が再生されていない場合に使用されます。また、ユーザーがクリックするまで動画は読み込まれないため、WordPressのパフォーマンスを向上させるのにも役立ちます。

次に、「動画URL」フィールドに、メディアライブラリまたはYouTubeのような動画ホスティングサイトから直接動画URLを見つけることができます。

動画にキャプションを追加するオプションもあります。キャプションを追加する場合は、再生ボタンをクリックしたときに何が表示されるかを説明し、魅力的な内容にすることをお勧めします。

動画スライドの追加

ビデオスライドをもう1つ追加したい場合は、「別のビデオスライドを追加」ボタンをクリックしてください。

そこから、次のビデオのタイトル、ビデオURL、画像URL、キャプション、代替テキストをアップロードする必要があります。

別のビデオスライドを追加

それが終わったら、追加したいすべての動画スライドに対してプロセスを繰り返すことができます。

その後、「スライダーに挿入」ボタンをクリックするだけです。

スライダーに挿入

ビデオスライドは、新しいスライド画面にこのように表示されます。

変更が必要な場合は、いつでも鉛筆アイコンをクリックしてビデオを編集したり、「非アクティブ」アイコンをクリックして非アクティブにしたりできます。

ここから、「設定」タブに移動して、ビデオスライダーの表示方法をカスタマイズできます。

動画スライドの設定タブ

この画面では、いくつかの設定を切り替えることができます。

例えば、スライドの寸法を変更してウェブデザインに合わせることができます。スライダーとキャプションの位置をカスタマイズして、ページ上の他の要素と揃えることも可能です。

スライダーの寸法

その他のオプションとして、動画の自動再生を許可するかどうかを検討することもできます。

訪問者がページにアクセスしたときに動画スライドが自動再生されるように設定して、コンテンツを見てもらうことができます。ただし、ブラウザも動画を読み込む必要があるため、ページの速度が低下する可能性があることに注意してください。

動画の自動再生

Soliloquyの良い点は、プラグインが動画スライダーをモバイルデバイス向けに最適化できることです。ただし、設定は手動でセットアップする必要があります。

これを行うには、「モバイル」タブに移動しましょう。

内部に入ったら、モバイルスライダー画像を作成し、キャプションを表示して、再生ボタンをクリックする前に視聴者が何を見るかを知ることができるようにできます。

モバイルビデオスライダー

これで、WordPressブログまたはウェブサイトにスライダーを追加する準備ができました。

右側のパネルにある「公開」ボタンをクリックしてください。

公開ボタン

WordPressでのビデオスライダーの表示

スライダーを埋め込むには、表示したい投稿またはページを作成または編集したい場合があります。

WordPressエディターでは、「+」ボタンをクリックして、Soliloquyブロックをページに追加できます。プロセスを簡単にするには、検索バーに「Soliloquy」と入力します。

Soliloquyブロックを追加

次に、Soliloquyウィジェットから作成したばかりのビデオスライダーを選択し、ページに挿入しましょう。

それが終わったら、一番上にある「公開」または「更新」ボタンをクリックしてください。

WordPressにビデオスライドを挿入する

これで完了です。投稿をプレビューして、ビデオスライドがどのように機能するかを確認できます。

このようになります:

ビデオスライダープレビュー

まだクラシックWordPressエディターを使用している場合は、WordPressの任意のページまたは投稿にビデオスライダーを追加することもできます。

すべての動画スライダーが保存されているSoliloquyページにあるショートコードをコピーする必要があります。次に、そのショートコードをコンテンツに挿入するだけです。

詳細については、WordPressにショートコードを挿入する方法に関するガイドをご覧ください。

ショートコードをコピー

ウェブサイトに動画スライダーを追加することに加えて、WordPressのページに注目のコンテンツスライダーを追加することも検討してください。

おすすめのブログ投稿を紹介するだけでなく、おすすめの商品をハイライト表示するオンラインストア、レビューの共有、ポートフォリオアイテムの表示、人気のカテゴリの表示など、注目のコンテンツスライダーを追加できます。

動画スライダーとは異なり、注目のコンテンツスライダーは、画像とリンクの組み合わせをスライドに表示できます。

Soliloquyで「Featured Content Addon」をインストールするだけです。

注目のコンテンツアドオンを有効にする

次のステップは、ビデオスライダーの場合と同様に、マルチメディアファイルのコンテンツ、リンク、説明を追加することです。

より詳細なチュートリアルについては、WordPressに注目のコンテンツスライダーを正しく追加する方法に関するブログ投稿をご覧ください。

よくある質問:WordPressでのビデオスライダーの作成

動画スライダーがサイトにどのように影響するか、またはそれらを効果的に使用する方法についてまだ疑問がある場合は、これらのよくある質問が重要なポイントをカバーしています。

動画スライダーは私のウェブサイトを遅くしますか?

できますが、Soliloquyのようなプラグインはパフォーマンスのために設計されています。遅延読み込みを使用するため、ユーザーが再生をクリックしたときにのみビデオが読み込まれます。WordPressに直接アップロードする代わりにYouTube、Vimeo、またはWistiaのようなビデオホスティングサービスを使用すると、サイトの速度も維持されます。

同じスライダーにビデオと画像を混在させることはできますか?

はい。Soliloquyは複数のスライドタイプをサポートしているため、ビデオ、画像、カスタムHTMLコンテンツを1つのスライダーに組み合わせることができます。

ビデオの場合、ビデオ再生前に表示されるプレースホルダー画像(ポスター画像)を提供できます。これにより、パフォーマンスが向上し、読み込み中にスライダーが見栄えが良くなります。

Soliloquyの動画スライダーはモバイルフレンドリーですか?

もちろんです。当社のテストによると、Soliloquyは完全にレスポンシブであるため、スライダーはデスクトップ、タブレット、スマートフォンに合わせて自動的に調整されます。

動画スライダーを追加するためにコーディングを知っている必要がありますか?

全くありません。このチュートリアルに従えば、完全にコード不要で作成できます。これにより、初心者でも簡単にビデオスライダーを作成、カスタマイズ、追加できます。

次のステップ:WordPressでのメディアファイルの使用方法ガイド

この記事が、Soliloquyを使用してWordPressにビデオスライダーを追加するのに役立ったことを願っています。次に、次のガイドも確認してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

2 CommentsLeave a Reply

  1. ウェブサイトに動画スライダーを追加したいと思っていましたが、どこから始めればよいかわかりませんでした。さまざまなスライダープラグインとカスタマイズオプションの内訳は非常に役立ちます。これで、動画コンテンツを紹介するための視覚的に魅力的なスライダーを作成できます。共有していただきありがとうございます!

  2. これは、製品説明、提供されるサービス、および操作方法のガイドなど、指示目的で短いビデオを展示するために多くのウェブサイトで非常に必要とされています。
    ウェブサイトの速度の問題のために、私は常にビデオスライダーの埋め込みという考えをスキップしてきました。
    Soliloquyは速度を管理し、スライダーにYouTubeビデオを埋め込むことを許可するため、それを必要とするすべてのウェブサイトで使用することは理にかなっています。
    このガイドをwpbeginnerに感謝します。私は間違いなくこれを試してみます。

Leave A Reply

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。