サムネイルが未設定の動画は、WordPressサイト上に次のように表示されます。
動画が再生される前の一コマがサムネとして利用されるわけです。場合によっては内容が伝わりにくいです。一方で、適切なサムネイルを設定しておくと、動画の内容が伝わりやすくなります。
そこで当記事では、WordPressに設置した動画にサムネイルを設定する方法をご紹介いたします。
目次
動画のサムネイルは「メディア」から設定する
WordPressのダッシュボードから簡単に設定できます。手順は以下の通りです。
- 「メディア」から対象の動画ファイルを選択
- 「添付ファイルの詳細」内の「さらに詳細を編集」をクリック
- 「アイキャッチ画像を設定」からサムネイルを設定
❶「メディア」から対象の動画ファイルを選択
まずは、「メディア」からサムネイルを設定したい動画ファイルを選択します。サムネイル未設定の動画ファイルは上記のように表示されます。
❷「添付ファイルの詳細」内の「さらに詳細を編集」をクリック
上記箇所「さらに詳細を編集」をクリックします。「添付ファイルの詳細」内で設定できる他の項目については、こちらの記事で解説しています。宜しければご覧ください。
WordPressで添付ファイル（画像など）を挿入する際は、メディアライブラリを使います。一般的に下記画面から画像を選択して記事やページに挿入されていると思います。 当記事では、上記赤枠箇所の添付ファイルの詳細（代替テキスト・タイトル・キャプション・説明）についてそれぞれの役割を解説い...
❸「アイキャッチ画像を設定」からサムネイルを設定
上記箇所に「アイキャッチ画像」を設定する項目があります。通常のブログ記事などと同じく、任意のアイキャッチ画像を設定してください。
ここで設定する「アイキャッチ画像」＝「動画のサムネイル」となります。
画像を設定して「更新」すると次のように表示イメージを確認できます。
※サムネイルは、動画の縦横比と同じサイズのものをセットするのがセオリーです。
サムネ付き動画ファイルをセットして確認してみよう
サムネイルを設定した動画ファイルを記事内にセットして確認してみましょう。いずれのエディタをお使いの場合も、メディアを開くとサムネイルが設定されていることがわかります。
クラシックエディタ
サムネイル設定済みの動画ファイルを設置すると、エディタ内に次のように表示されます。
videoのショートコード内に「poster」という属性が追加され、サムネイルのURLが表示されています。つまり、記事内の既存の動画ファイルにサムネを追加・変更する際は、このposter属性を活用すればOKです。
videoの後に半角スペースを空けて、以下を追記すれば反映されます。
ビジュアルモードに変更して、表示をプレビュー確認できます。
ブロックエディタ
ブロックエディタの場合は、「動画」ブロックから追加して確認できます。
サムネの設定された動画ファイルを設置すると、すぐにプレビュー表示されます。
プレビュー後にサムネを変更したい時は、下記箇所から編集可能です。
「HTMLとして編集」をクリックすると次のように表示されます。
上記箇所にもposter属性がありますので、その後に続く画像URLを変更すればOKです。
まとめ
WordPressにアップした動画に、サムネイルを設定する方法を解説いたしました。
YouTube動画はYouTube側でサムネイルを設定できますが、mp4形式の動画はWordPress側で設定しておきましょう。デザイン面だけでなく、再生前から動画の内容を伝える重要な役割があります。
サムネイル作りにはCanvaが簡単でおすすめです。よろしければご覧ください。
読者に自分の記事を見つけてもらうのに重要な役割をアイキャッチ画像は担っています。それもそのはずで、記事タイトルはもちろん、アイキャッチ画像ひとつで記事ページを開いてくれる読者の数も大きく変化するからです。事実、TCDブログ内の記事もアイキャッチ画像ひとつで記事のクリック率が3倍ほど膨れ上がった事例が...
コメント