動画ヘッダーを設置してサイトイメージを伝えてみよう!

スポンサーリンク

サイトやブログのヘッダー画像といえば、普通は静止画像を使用しますが、

最近では動画を使用することも少なくないようです。

 

サイト内の本文を読まなくても情報を伝える事ができたり、オシャレだったりするからなんだそうですが、ワードプレスで簡単に動画ヘッダーを挿入する方法って知ってますか?

動画ヘッダーを簡単に挿入出来るテーマも販売されていますが、まずはこの方法を試してからでも遅くないかもしれませんね♪

 

動画ヘッダーに変えたいけど、変える方法を知らないという方は、よろしければ参考にしてみてください!

スポンサーリンク

参考にしたサイト

私自身それほどワードプレスに詳しくないので、知りたい情報はだいたいネットで検索します。

そして、ワードプレスに動画ヘッダーの取り付ける方法をわかりやすく紹介していたのが、

チラシの裏@動画屋さん!
こちらのページで紹介してくれていました♪⇒こちらのぺーじ

ヘッダー用動画とヘッダー画像さえ用意してしまえば、メチャクチャ簡単に変更できてしまうこと紹介してくれています。

 

ヘッダー動画を作るのはムービーメーカーよりも、Filmora!

WondershareのFilmoraで作ってみました。

楽天市場でも販売しています。

Windows 7からWindows10に更新してから、Windowsムービーメーカーが使いにくくなってしまったので、

最近はかなり前に購入したFilmoraを愛用しています。

 

知らないうちに機能が良くなっているので、購入代金以上の機能が手に入りますよね♪

さすが永久ライセンス!

 

ヘッダー動画を作ってみた。

基本動画はhttp://mazwai.comからダウンロードさせていただきました。

無料動画素材

Filmoraに動画をインポートして、

Baidu IME_2016-8-4_12-38-48

文字を挿入

Baidu IME_2016-8-4_13-4-52

出力画面で、

Baidu IME_2016-8-4_13-5-19

解像度を変更!!

Baidu IME_2016-8-4_13-5-41

サイズを確認してみましょう!

Baidu IME_2016-8-4_13-5-19

サイズが大きすぎると表示速度も遅くなるし、ワードプレスのメディアとして新規追加するのも面倒になってしまうので、

1~2MB以内程度におさめた方が良いようです。

 

動画出力する前に動画サイズがわかるのはFilmoraの良い所でもありますね!!(実際に出来上がった動画サイズは倍以上だったりしますが・・・)

 

ムービーの作成が済んだら・・・

Baidu IME_2016-8-4_13-6-12

フォルダを開いてワードプレスのメディアに追加しちゃいましょう!

Baidu IME_2016-8-4_13-8-25

新規追加(アップロード)した動画をクリックしたら、URLをコピー!

Baidu IME_2016-8-4_13-8-45

 

ここまできたらあとはヘッダーに挿入するだけ♪

「ダッシュボード」⇒「外観」⇒「テーマの編集」⇒「テーマヘッダー(header.php)」で

</head>

の下に

<video src=”●●動画URL●●”    poster=”●●動画が表示されないときの画像URL●●” width=”100%” autoplay loop></video>

を挿入して終了!

 

↑この動画がヘッダーに挿入されました!

※今後変更する可能性があります。

 

ブログランキングに参加しています。

共感できればクリックお願いしますm(_ _)m

2 Responses to “動画ヘッダーを設置してサイトイメージを伝えてみよう!”

  1. こんにちは。ともちんと言います。
    私には少しハードルが高そうですが、やってみたくなる感じですね。
    チャレンジしてみたいと思います。
    ありがとうございます。

    • 実際にやってみると、動画作成以外はコピペ&ドラッグ&ドロップなので、かなり簡単ですよ。

      ぜひ挑戦してみてください♪

コメントを残す

*