はてなブログ に画像を貼り付けるだけであれば簡単です。はてなブログ のエディタ画面右にある「写真を投稿」タブ内に Windows のエクスプローラーから画像をドラッグ＆ドロップすれば自動的に「はてなフォトライフ」に画像がアップロードされ、記事編集画面の本文中にも「fotolife記法」という書式で簡単に画像を貼り付けることができます。
「はてなフォトライフ」には、無料版の はてなブログ では月間 300MB まで、有料版の はてなブログ Pro の場合は月間 3GB まで画像をアップロードして保存させることが可能です。ただし、アップロード可能なファイル形式は、「jpg」「jpeg」「gif」「png」「bmp」のみで、動画や音声ファイルをアップロードすることはできません。
今はスマホを使って誰でも簡単に動画を作成することが出来るようになっていますし、ブログ記事を書いていると動画や音声のファイルを貼り付けたくなる事もあるかと思います。そこで今回は、はてなブログ に動画や音声ファイルを貼る方法についてメモとして残しておくことにします。
■ YouTube を利用する
一番簡単なのは YouTube にアップロードされている動画や音声を貼り付ける方法でしょう。
はてなブログ のエディタ画面右のサイドバーにある「YouTube 貼り付け」から「選択ウィンドウを開く」をクリックすると別窓で動画の検索ウィンドウが開きます。ここの検索ボックスからブログに貼り付けたい動画を選び、「選択」ボタンを押すだけで HTML のインラインフレーム要素（<iframe>）のコードとして動画がブログの記事中に貼り付けられます。はてなブログ のエディタでは YouTube の他にも ニコニコ動画 や DAZN の動画を貼り付ける事が出来るようですね。
若しくは、Webブラウザで YouTube の動画を開いている状態で「共有」から「埋め込む」を選択して HTMLコードを取得して貼り付けても構いません。
例えば YouTube から椎名林檎公式 PV 「鶏と蛇と豚」の HTMLコードを取得して記事中に貼ってみると以下の様に表示されます。
この時のコードは以下の様になっています。
<iframe width="560" height="315" src="（動画のアドレス）" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
ここの「width」と「height」の値を変えてやれば動画の表示サイズを変更することができます。今使っているうちのブログのレイアウトの場合は、「width="720" height="405"」にするとだいたい横幅全体に表示されます。更にコード全体を「<center>～</center>」で囲ってやれば記事中央に表示させることなども可能です。
自作の動画をブログに貼り付けたい場合も YouTube にアップロードしてしまえば後は動画サイトののコードを取得して貼り付けるだけと、非常に簡単です。
YouTube にアップロードする事の出来るファイル形式は、MOV、MPEG4、MP4、AVI、WMV、FLV、MPEGPS、3GPP、WebM、DNxHR、ProRes、CineForm、HEVC（h265）で、音声ファイル（MP3、WAV、PCMなど）をアップロードする事はできません。音声ファイルをアップロードしたい場合は、動画編集ソフトなどで動画として変換してアップロードすればいいようです。ちなみに YouTube お勧めの設定は、MP4形式で動画コーデックに H.264 を、音声コーデックに AAC-LC を用いたものだそうです。
別に「YouTuber」になる気なんてサラサラありませんが（笑）、余計なこと（動画のファイルサイズであったりトラフィックの制限だったり）を気にしなくて良いというのは気楽で魅力的なので、今後動画を上げる機会が増えるようでしたら改めて考えてみたいと思います。YouTube の「クリエイターアカデミー」で必要な知識は手に入ると思います。
■ Dropbox を使って音声･動画を貼る方法
「Dropbox」は 2007年創業のオンラインストレージサービスで、サインアップ（アカウント登録）することで「Basic プラン」として登録され、誰でも無料で 2GB のディスクスペースを利用することが可能です。動画や音声ファイルをたまにしか貼り付けないのであれば十分な容量ですね。ちなみに友人を招待すれば 1人につき 500MB（最大 16GB まで）が双方のアカウントにプラスされるそうです。
有料プランももちろん用意されているので、必要に応じてアカウントのアップグレードを行うとよいでしょう。個人用プランとしては以下の 3種類が用意されています。
| プラン | Plus | Professional | Family |
|---|---|---|---|
| 利用料金（税込） | 年額 15,840円 月額 1,650円 |
年額 26,400円 月額 2,640円 |
年額 26,400円 月額 2,750円 |
| ストレージ容量 | 2TB | 3TB | 2TB |
| ユーザー数 | 1人 | 1人 | 最大6人 |
| コンテンツ保護機能 | 30日 | 180日 | 30日 |
とりあえず使ってみたい場合は、HP上で氏名、メールアドレス、パスワードを入力すると右のような画面が表示されるので、「または Dropbox Basic プラン（2 GB ）を継続」をクリックすれば Basicプランとして登録されます。入力したメールアドレスには後ほど確認メールが送られてくるので、書かれているリンクを踏めば登録が完了します。その後アプリのインストールを促されますが、Web上でも利用可能なのでお好みで。
Webブラウザを使う場合のファイルのアップロード方法ですが、Doropbox にログインした状態のブラウザ画面にエクスプローラーなどからアップロードしたいファイルをドラッグ＆ドロップするだけと、非常に簡単に行うことができます。アプリをインストールしている場合は、エクスプローラーに Dropbox のフォルダが出来ているのでそちらにコピーしてやれば自動的にアップロードされます。
それでは実際に Dropbox にアップロードした音声ファイルと動画ファイルをブログに貼り付けてみましょう。ここでは Webブラウザ上での操作を例に取ってみることにします。
アップロードしたファイルにマウスカーソルを合わせると右にスクリーンショットのように人型の「共有」アイコンが表示されます。これをクリックすると、矢印の先のような画面がポップアップするので、下の「リンクを作成してコピー」をクリックします。数秒すると「リンクをコピー」に表示が変わるので、これをクリックするとファイルのアドレスへのリンクが取得されます。
取得したリンクは、「https://www.dropbox.com/s/（ファイルのURL）/（ファイル名）」の形式になっているので、「/s/」以下を下記のように HTMLの Videoタグや audioタグに挿入します。
音声ファイルを埋め込む場合 <audio src="https://dl.dropboxusercontent.com/s/（取得したURL）" controls></audio> 動画ファイルを埋め込む場合 <video src="https://dl.dropboxusercontent.com/s/（取得したURL）" controls width="（幅）"></video>
上記のコードを貼ってみると以下の様にブログ内に貼り付けることができます。
音声ファイルの場合
付加できる属性は、
・preload ： 音声を予め読み込む
・autoplay ： 自動再生
・loop ： ループ再生
・controls ： インターフェースを表示
動画ファイルの場合（幅を 600 に設定しています。）
付加できる属性は、
・preload ： 音声を予め読み込む
・autoplay ： 自動再生
・loop ： ループ再生
・controls ： インターフェースを表示
・width ： 動画表示枠の幅を指定
・height ： 動画表示枠の高さを指定
「<div>～</div>」で全体を囲ってやればこのように style の設定で動画の横に文章を回り込ませたり、1文字分の余白を空けたりといったことも可能です。
この例では動画の横幅を 400 に指定して 1文字分の余白を動画の左に開けた状態で文章を書けるようにしています。「<br clear="all">」を文章末尾に入れれば回り込みが解除されます。
上記のサンプルはこんな感じ。
<div style="float: right;margin-left: 1em;"><video src="https://dl.dropboxusercontent.com/s/（ファイルのURL）/（ファイル名）?" controls width="400"></video></div> 回り込ませる文章 <br clear="all">
Dropbox 利用の注意点ですが、Basicプランで利用している場合、休止状態が 12ヶ月続いた後 90日間が経過するとアカウントが自動解約され（警告のメールは届くそうです）、データが削除されるとのことです。ログインがあったりアプリをインストールしてファイルの同期を取っていれば使用中のアカウントと見做されるためこの条件には当たらないそうですが、無料プランのまま使う場合はあまり大事なファイルは保存しないようにした方がいいかも知れません。
他にも SNS の 1つである「Tumblr」などを利用する方法もあるようですので、気が向いたら試してみたいと思います。
