紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

【はてなブログ】記事中に動画を埋め込む方法を一挙解説!

f:id:slash1196:20210801011349j:plain

f:id:slash1196:20200520205950j:plain

はてなブログ初心者

はてなブログで書いているけれど、動画を入れたいけどどうすればいいのかわからない。やり方教えてほしいな。

 

こんなお悩みにお答えします

 

この記事でわかること

  • はてなブログでの動画を直でアップロードできない
  • はてなブログに動画を上げる方法
  • 動画を記事に使えるのなら気を付けたいこと

 

こんにちわ、紅蓮です。

 

はてなブログで書いていて、「動画をアップロードしたいけどどうしたらいいかがわからない」なんて悩んでいませんか?

 

今回はそんなあなたにはてなブログで動画を埋め込む方法をご紹介していきます。

 

この記事をよめば、動画を埋め込む方法、使うときに気を付けるべきことと、はてなブログの動画の現状までばっちりわかっちゃいます。

 

この記事を書く僕は、はてなブログ歴は3年目。

最近ではアフィリエイトからの収益も安定してきて、月に3000円を超えております。

 

僕も動画を埋め込む方法で、ものすごく痛い目を見たことが…。

そんな僕が調べに調べた方法を、ご紹介しちゃいますね。

 

どうぞ最後までお読みください。

 

では行ってみましょう。

Here We Go!!

 

目次

 

はてなブログは動画を直でアップロードできない

f:id:slash1196:20210801011447j:plain

悲しい話ですが実ははてなブログ、動画が直でアップロードができないんですよね。というのも、2017年に実はサービス提供を中止しているんですね。

 

はてなブログに動画を埋め込む方法

f:id:slash1196:20210721170809j:plain

ここでははてなブログに動画を埋め込む方法をお話していきましょう。

 

方法は2つあって、以下の通り。

 

  • 方法①Youtubeなどの動画サイトに挙げてからリンクを貼り付ける
  • 方法②ドロップボックスなどの共有サイトにおいてリンクを貼り付ける

 

では詳しく見ていきましょう。

 

方法①Youtubeなどの動画サイトに挙げてからリンクを貼り付ける

まずはYoutubeなどの動画サイトに挙げてからリンクを貼り付ける方法ですね。

 

手順は、以下の通り。

 

  • 手順①Youtube動画のurlを直で貼り付ける方法
  • 手順②埋め込みようのURLでHTMLで貼り付ける方法

 

詳しく見ていくことにしましょう。

 

手順①Youtube動画のurlを直で貼り付ける方法

手順の1つ目は、Youtube動画のURLを直で貼り付ける方法ですね。

 

手順は以下の通り。

 

  • 手順①まずYoutubeにアクセスして、好きな動画をクリック
  • 手順②動画のURLをコピーする
  • 手順③ブログ記事側でURLを貼り付ける
  • 手順④動画の貼り付け方法をチェックする
  • 手順⑤動画が貼り付けられる

という感じですね。

 

では詳しく見ていきましょう。

 

手順①まずYoutubeにアクセスして、好きな動画をクリック

f:id:slash1196:20210801001736j:plain

まずは、YouTubeにアクセスします。

そして、入れたい動画をクリックしましょう。

 

手順②動画のURLをコピーする

f:id:slash1196:20210801001748j:plain

次に動画のURLをコピーします。

 

手順③ブログ記事側でURLを貼り付ける

f:id:slash1196:20210801001800j:plain

その後ブログの編集画面のURLを貼り付けたい場所に、動画のURLを貼り付けます。

 

手順④動画の貼り付け方法を埋め込みにする

f:id:slash1196:20210801002031j:plain

 

次に動画の貼り付け方法をチェックします。

 

「埋め込み」にチェックを入れ、「選択した形式でリンクを挿入」をクリックしましょう。

 

手順⑤動画が貼り付けられる

f:id:slash1196:20210801002000j:plain

すると、動画が貼り付けられます。

 

方法②埋め込みようのURLでHTMLで貼り付ける方法

2つ目の方法は、埋め込み用のURLでHTMLで貼り付ける方法ですね。

 

手順は以下の通り。

 

  • 手順①まずYoutubeにアクセスして、好きな動画をクリック
  • 手順②次に動画の右下にある「共有」をクリック
  • 手順③<>埋め込むをクリック
  • 手順④コードをコピー
  • 手順⑤記事編集画面にHTML編集で、入れたいところにコードを貼り付ける

 

では詳しく見ていきましょう。

 

手順①まずYoutubeにアクセスして、好きな動画をクリック

f:id:slash1196:20210801001736j:plain

まずはYoutubeにアクセスして、好きな動画をクリックするところまでは同じ手順ですね。

 

手順②次に動画の右下にある「共有」をクリック

f:id:slash1196:20210801002143j:plain

次に動画の右下のところに「共有」という部分があるはず。

そこをクリックしましょう。

 

手順③<>埋め込むをクリック

f:id:slash1196:20210801002517j:plain

すると上記のような画面になりますね。

<>埋め込むをクリックしましょう。

 

手順④コードをコピー

f:id:slash1196:20210801002533j:plain

すると上記のような画面になります。

コードをコピーしましょう。

 

手順⑤記事編集画面にHTML編集で、入れたいところにコードを貼り付ける

f:id:slash1196:20210801002758j:plain

次に記事編集画面に戻ります。

 

HTML編集画面に行って、動画を入れたい場所に先ほどコピーしたコードを貼り付けます。

 

すると、動画が添付される状態になりますね。

 

そのまま動画を入れるとちょっと問題です

とはいえ、動画をそのまま入れるとちょっと問題ですね。

というのも、動画のデータ量がでかくてページが重たくなってしまうからなんです。

 

実は上記の方法は両方ともインラインフレーム要素というものを使っていて、これを使うとちょっと重たくなります。

 

ページが重たくならない動画の埋め込み方法とは

重くならない動画の埋め込み方法ですね。

 

手順は以下の通り。

 

  • 手順①CSSコードを入力する
  • 手順②Javascriptを入力する
  • 手順③HTMLを記事に貼り付ける

 

という感じですね。

 

では詳しく見ていきましょう。

 

手順①CSSコードを入力する

まずはCSSコードを入力します。

 

CSSは以下の通り。

 

CSSコード

.youtube {
display: inline-block;
position: relative;
overflow: hidden;
width: 320px;
height: 180px;
}
.youtube::before {
position: absolute;
content: "Click to Play";
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 180px;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
transition: all 0.3s;
}
.youtube:hover::before {
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: all 0.3s;
}

 

上記のコードをコピーして、貼り付けましょう。

 

コードを貼る場所

貼り付ける場所は、管理画面から「デザイン」→「カスタマイズ」と進み、デザインCSSの一番下に貼り付けましょう。

 f:id:slash1196:20210522162141j:plain

 

手順②Javascriptを入力する

次にJavascriptを入力していきましょう。

 

必要なJavascriptコードは以下の通り。

 

Javascriptコード

<script>// <![CDATA[
$('.youtube').click(function(){video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]>
</script>

 

コードを貼る場所は、以下の通り。

 

コードを貼る場所

デザイン→カスタマイズ→フッター

 

に貼り付けましょう。

 

手順③HTMLを記事に貼り付ける

次に記事の編集画面で、動画を入れたい場所に入れましょう。

 

その時に、以下のコードをコピーしましょう。

 

HTMLコード

<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" /></div>

 

動画IDというのは動画のURLの後ろにある「v=~」の~の文字列のことを言います。

 

そちらのIDを入れると320×180の画像の大きさの動画が記事中に用意されます。

 

方法②Dropboxにおいてリンクを貼り付ける

2つ目の方法は、Dropboxにおいてリンクを貼り付ける方法。

 

手順は以下の通り。

 

  • 手順①Dropboxにサインアップ
  • 手順②Dropboxに動画をアップロードする
  • 手順③…をクリックして、共有をクリック
  • 手順④リンクをコピーをクリック
  • 手順⑤urlをカスタマイズする。
  • 手順⑥貼り付ける

 

では詳しく見ていきましょうね。

 

手順①Dropboxにサインアップ

まずは、Dropboxにアクセスしてアカウントを作りましょう。

 

作り方の手順は、以下の通り。

 

  • 手順①Dropboxにアクセスします
  • 手順②アカウントを作成をクリック
  • 手順③必要事項を入力、アカウントを作成をクリック

 

では詳しく見ていきましょう。

 

手順①Dropboxにアクセスします

f:id:slash1196:20210731223532j:plain

まずDropboxにアクセスします。

Dropboxにアクセスする。

 

手順②アカウントを作成をクリック

f:id:slash1196:20210731223648j:plain

次にアカウントを作成をクリックしましょう。

 

手順③必要事項を入力、アカウントを作成をクリック

f:id:slash1196:20210731223903j:plain

すると上記のような画面が出てきます。

 

必要事項を入力しましょう。

 

入力出来たら、利用規約とプライバシーポリシーをよく読んで、チェックボックスにチェックを入れるようにしましょう。

 

そのあとアカウントを作成をクリックします。

 

手順②Dropboxに動画をアップロードする

次にDropboxにログインして、動画をアップロードしましょう。

 

アップロードの手順は以下の通り。

 

  • 手順①アップロードをクリック
  • 手順②必要な動画をクリックしてアップロード

 

手順①アップロードをクリック

f:id:slash1196:20210731224047j:plain

まずはアップロードボタンをクリックします。

 

手順②必要な動画をクリックしてアップロード

f:id:slash1196:20210731224235j:plain

すると上記のような画面になるので、動画が置いてある場所に行きましょう。

 

そして必要な動画をクリックすると、アップロードができます。

 

手順③…をクリックして、共有をクリック

好きなファイルを選ぶと、上記のように右端に…マークが出てきます。

…マークをクリックしましょう。

 

すると一番上に共有というメニューが出てきます。

そちらもクリックしましょう。

 

手順④リンクをコピーをクリック

すると、上記のような画面になります。

 

そこの下にあるリンクを作成してコピーと書かれている作成の部分をクリックしましょう。

 

するとリンクが作られます。

 

すると以下のような画面になります。

 

そしてリンクをコピーをクリックします。

 

手順⑤urlをカスタマイズする。

すると、URLが以下のような感じになりますね。

 

 

 

そのURLの以下のようにカスタマイズしましょう。

 

  • www.dropbox.com→dl.dropboxusercontent.com
  • ?dl=0→削除

 

手順⑥貼り付ける

そして次にブログの編集画面に行き、HTML編集で貼り付けていきましょう。

 

※その時に普通に貼ってしまうと、普通にURLだけしか使えなくなるので注意です。

 

必要なHTMLコードは、以下の遠り。

 

HTMLコード

<div style="float: right;margin-left: 1em;"><video src="https://dl.dropboxusercontent.com/s/(ファイルのURL)/(ファイル名)?" controls width="400"></video></div>

 

https://dl.dropboxusercontent.com/s/kd0t3j03l9ia4vr/douga.mp4の場合の例】

  • ファイルのURL:kd0t3j03l9ia4vr
  • ファイル名:douga.mp4

 

という感じになりますね。

 

こちらをHTML編集で貼り付けましょう。

 

著作権には気を付けよう

f:id:slash1196:20210801011436j:plain

動画を記事に使うのなら気を付けたいのが、著作権ですね。

 

というのも基本Youtubeの動画というのは、ビジネス系Youtuberとかの話していることに関しては拡散OKなので著作権の問題がありません。

 

しかし、音楽とか映画や著作物を絡めたものというんはJASRACという著作権保護の団体が絡んできますのでちょっと問題になってしまうんですよね。

 

しかもはてなブログはJASRACと提携していないので著作権侵害になると問題になります。

 

使うときには著作権に侵害しないかをしっかりと確認して使いましょう。

 

まとめ|動画を積極的に使ってもっとブログ記事の説得力を上げよう

お疲れさまでした。

ここまで、はてなブログが動画を使えない事実に始まり、記事中に動画を使う方法、その後に気を付けることをお話してきました。

 

まとめると以下のようになります。

 

まとめ
  • はてなブログは直で動画をアップできない。というのもフォトライフに対応していないから
  • 動画を埋め込む方法は2つあって以下の通り。
    • 方法①Youtubeなどの動画サイトに挙げてからリンクを貼り付ける
    • 方法②ドロップボックスなどの共有サイトにおいてリンクを貼り付ける
  • 著作権には気を付けよう

 

動画というのは、ブログ記事の言葉では説明しにくい部分を説明できたりニュアンスも伝わりやすいツールですね。

 

ですから積極的に使ってブログの説得力を上げていきましょう。

 

ってことで今回はこの辺で。

また次回に。

// ]]>