Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで動画ポートフォリオを作成する方法(ステップバイステップ)

WordPressで動画ポートフォリオを作成したいですか?

動画は、静止画像にはない方法であなたのスキルや創造性を表示できる魅力的なメディアです。初期設定では、WordPressに動画を簡単に埋め込むことができますが、ポートフォリオスタイルのレイアウトで表示することはできません。

この投稿では、サイトを遅くしたりコードを書いたりすることなく、WordPressで簡単に動画ポートフォリオを作成する方法を紹介します。

Create a Video Portfolio in WordPress

動画ポートフォリオの始め方

まず、WordPressブログまたはサイトを立ち上げる必要があります。すでにお持ちの場合は、次のステップに進んでください。

WordPressでは、ブログの投稿やページに動画を簡単に埋め込むことができます。しかし、すぐに美しい動画ポートフォリオを作成することはできません。

ポートフォリオサイトでは、スクロールすることなく多くの動画を表示できるよう、グリッドベースのレイアウトで動画を表示したい。

また、ポートフォリオがモバイル端末で動作し、優れたユーザーエクスペリエンスを提供することを確認する必要があります。質の高い動画コンテンツはオーガニック・トラフィックの増加につながるため、これはサイトのランキング向上に役立ちます。

WordPressサイトに動画をアップロードすることは可能ですが、動画はリソースを大量に消費し、サイトの表示速度を低下させる可能性があるため、YouTubeやVimeoのようなサードパーティのサービスを利用することをお勧めします。

詳しくは、WordPressに動画をアップロードしてはいけない理由の投稿をご覧ください。

ということで、WordPressで簡単に動画ポートフォリオを作成する方法を順を追って見ていきましょう。

EnviraギャラリーでWordPressに動画ポートフォリオを作成する

Envira Galleryを使えば、WordPressで簡単に動画ポートフォリオを作成することができます。これは、動画アドオンが付属している市場で最高のWordPressギャラリープラグインです。

このプラグインを使えば、美しいギャラリーを作成することができ、あらかじめ用意されたテンプレート、透かし、ライトボックス機能などを利用できます。

まず、Envira Galleryプラグインをインストールして有効化する必要があります。詳しい手順については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

:Envira Galleryには無料プランもあります。ただし、動画アドオンのロックを解除するにはプロプランが必要です。

有効化したら、WordPressダッシュボードからEnvira Gallery ” 設定ページにアクセスし、ライセンスキーを入力してください。この情報はEnvira Galleryサイトのアカウントから取得することができます。

Add the Envira Gallery license key

次に、Envira Gallery ” Addons ページに行き、’動画’アドオンを見つけてください。

そうしたら、その横にある「インストール」ボタンをクリックします。その後、「有効化」ボタンをクリックして、あなたのサイトで使用を開始する必要があります。

Install the Videos addon

さて、いよいよ動画ポートフォリオの作成を開始しましょう。これを行うには、WordPressの管理サイドバーからEnvira Gallery ” 新規追加ページにアクセスしてください。

Envira Galleryでは、インストール型の動画だけでなく、YouTube、Wistia、Vimeoなどのプラットフォームでホストされている動画のギャラリーも作成できます。

しかし、パフォーマンスの問題やWordPressホスティングサービスとの問題を避けるために、サードパーティの動画ホスティングサービスを使用することをお勧めします。

YouTubeまたはVimeoに動画をアップロードしたら、ギャラリーの名前を追加し、「他のソースからファイルを選択」ボタンをクリックします。

Click Select files from other Sources button

メディアライブラリが起動するので、そこで「動画の挿入」タブに切り替える。

ここで、動画のタイトル、キャプション、altテキストを追加できます。そうしたら、「動画のURL」フィールドに動画のURLを追加するだけです。

コンピューターから動画をアップロードしたい場合は、「メディアアップローダー」ボタンをクリックしてください。

上部にある「動画を追加」ボタンをクリックすれば、さらに動画を追加することもできます。そして、ポートフォリオに表示したい動画をすべて追加するまで、このプロセスを繰り返します。

完了したら、’ギャラリーに挿入’ボタンをクリックします。

Add video URL, title, caption, and alt text

Enviraは、動画から取得したサムネイルを「現在ギャラリー内にあるもの」に表示するようになりました。

ここでは、各サムネイルの上にある鉛筆アイコンをクリックして、altテキストやキャプション、動画の高さや幅などを変更することができます。

Edit video details by clicking the pencil icon on top of each thumbnail

そうしたら、「コンフィギュレーション」タブに切り替えてください。

ギャラリーレイアウトの選択、ギャラリーカラムの追加、遅延読み込みの有効化、画像寸法の変更、動画の下にキャプションを追加できるようになりました。

Go through the gallery configuration settings

その後、左の列から「ライトボックス」タブに切り替え、「ライトボックスを有効化」オプションをチェックしてください。これで動画が同じページでライトボックスのポップアップで再生されるようになります。

詳しい説明は、WordPressでギャラリーをライトボックス効果で追加する方法のチュートリアルをご覧ください。

Enable the lightbox option for the video portfolio

次に、’動画’タブに切り替え、’ギャラリー画像の上に再生アイコンを表示する’オプションの横にあるチェックボックスをオンにします。これにより、ユーザーは再生ボタンをクリックして動画の視聴を開始することができます。

その後、「動画ライトボックス設定」セクションまでスクロールダウンし、動画の自動再生を有効化したり、動画コントロールを表示したり、プログレスバーや現在時刻を追加したり、動画のダウンロードを有効化したりすることができる。

Configure the video settings

その後、お好みに応じて他のギャラリー設定を構成することもできます。設定が完了したら、上部にある’公開する’ボタンをクリックして設定を保存します。

次に、動画ポートフォリオを追加したいWordPressページまたは投稿を開きます。ここで、「+」ブロック追加ボタンをクリックしてブロックメニューを開き、Enviraギャラリーブロックを追加します。

そうしたら、ブロック内のドロップダウンメニューから、先ほど作成した動画ポートフォリオギャラリーを選択します。

Add the Envira Gallery block for the video portfolio

最後に、「公開する」または「更新する」ボタンをクリックして、設定を保存します。

WordPressサイトにアクセスして、動画ポートフォリオを表示できるようになりました。WordPressのデモサイトではこのように表示されました。

Video portfolio preview

ボーナス:WordPressサイトにYouTubeフィードを追加する

動画ポートフォリオの作成とは別に、YouTubeフィード全体をWordPressサイトに追加して、チャンネルへのトラフィックを促進し、ユーザーエンゲージメントを高めることもできます。

また、検索エンジンのランキングを向上させ、動画フィードの中であなたのスキルや創造性をアピールすることもできます。

Smash Balloon YouTube Feedプラグインを使えば、WordPressにYouTubeフィードを簡単に追加できます。複数のフィードタイプ、カスタマイズ可能なレイアウト、ユーザーフレンドリーなビルダー、ソーシャルメディア共有、ライブストリームサポートを備えた市場で最高のWordPress YouTubeギャラリープラグインです。

Smash Balloon YouTube Feeds Pro

プラグインを有効化したら、YouTubeチャンネルとWordPressを接続するだけです。

そうすると、Smash BalloonビルダーでYouTubeフィードが起動し、レイアウトのカスタマイズ、購読ボタンの追加、配色の変更、個々の要素の編集ができるようになります。

詳しい手順については、WordPressで動画ギャラリーを作成する方法のチュートリアルをご覧ください。

Smash Balloon's video style settings

YouTube 以外にも、Smash Balloon プラグインを使って Facebook、Instagram、Twitter の Feed をサイトに埋め込むことができます。

詳しくはSmash Balloonのレビューをご覧ください。

この投稿がWordPressで動画ポートフォリオを作成する方法を学ぶのにお役に立てば幸いです。WordPressのスピードとパフォーマンスを向上させる方法についての初心者向けガイドや、ポートフォリオサイトに最適なWordPressテーマのトップピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

2件のコメント返信を残す

  1. Michael Obot

    Great insights to be implemented on my baby site. Thanks.

  2. Navneethkrishnan

    Great Article! I am relatively new to this field but your site has helped me a lot. One of the best site for Wordpress Noobs.

返信を残す

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