今日は、Bloggerでビデオ投稿する際に、任意の動画サムネイルを、記事サムネイルとして表示させる方法を備忘録としてまとめておきます。

※こちらのYouTube動画を参照しました。
言葉での説明がわかりにくいという方は、動画を参照してみてください。


手順

1. サムネイルを準備する

ビデオのサムネイルをあらかじめ準備しておきましょう。

2. サムネイルのアップロードURLを取得する

Bloggerの新しい投稿画面を開き、一旦サムネイルにしたい画像を貼り付けます。HTML編集モードに切り替えると、Blogger内の画像のアップロードURLを取得することができます。
下に例を貼りました。
画面が小さくなってしまったのですが、下記のa hrefではじまる、""でくくられた中の「https://（中略）.png」というURLをコピーして、メモ帳などに貼り付けておきましょう。
Bloggerサムネイル用画像のURL

正しくコピーできたか確認したい場合、このコピーしたURLを別タブで開いてみて、無事にサムネイル用にアップロードした画像が表示されていればOKです。
コピー出来たら、Bloggerの作成画面に戻り、貼り付けたサムネイル画像は消してしまいましょう。

3. サムネイルの設定

再び HTML編集モードに切り替え、以下のコードを貼り付けます。
貼り付ける場所はどこでも構いませんが、わかりやすいように一番最初に貼ると良いでしょう。

<img src="ここにサムネイルのURLを貼る" style="display:none;"/>
view raw Bloggerのビデオ投稿時のサムネイル表示用コード hosted with ❤ by GitHub
ちなみにこの一行は、「サムネイルの画像があるリンク先は""で囲まれた中のURLですよ、でも画面上には何も表示させないようなstyleでお願いします」、という意味です。

コードを貼り付けたら、「ここにサムネイルのURLを貼る」というところを2で取得しておいたサムネイルURLに置き換えてください。

4. ビデオのアップロード

作成画面に戻って、ビデオを普通にアップロードします。上部バーのカチンコのマークのところを開いて、あげたい動画を選択しましょう。
Bloggerの動画投稿アイコン
これね。

5. 公開

全部終わったら公開します。
すると、記事の中ではビデオのサムネイル画像が表示されなくても、トップページでは記事のサムネイルとして表示されていることが確認できます。

6. おしまい！

ということで、今回動画を貼り付けてみました。
記事内にはない動画サムネイルが、無事にトップページで記事サムネイルとして機能していることがおわかりいただけるでしょう。




まとめ

Bloggerで動画投稿する際、特にYoutubeからのリンクだと、勝手なサムネイルが出てきてしまって困っていましたが、これで好きな画像をサムネイルにできるようになりました。
よかったよかった。