＊本ページにはプロモーションが含まれています
＊本ページにはプロモーションが含まれています
【deer】ヘッダーに動画を設定する方法
こんにちはsjiです。
本記事はワードプレステーマdeerをお使いの方で、次のようにお悩みの方の為の記事となります。
・無料動画ってどこから探せばいいの？
・容量オーバーで設置できない
・動画圧縮とかどうやるの？
などの疑問を持った方は是非最後まで本記事を読み進めてください。
疑問が解決され一歩前進することが出来ます。
ワードプレステーマdeerはおしゃれでイケてる！ヘッダー画像に動画を使用して更におしゃれなサイトを作ってみてください。
sji
この方法をマスターできればあのs〇〇llにも負けないサイト構築することが出来ます
sji
【deer】ヘッダーに動画を設定する流れ
動画埋め込みヘッダー例
deerデモ画像のように動画を埋め込むことが出来ます。
今回のデモ動画では森ですが、ブログイメージに合った動画を設定すればかなりのインパクトがあり、訪問者の心をしっかりとつかむことが出来るはずです。
ワードプレステーマdeerではこんなヘッダー動画を簡単に設定することが出来るのです。
なんて思うかもしれませんが、安心してください。
私も動画編集なんて本当に初めてやってみたので誰でも出来るはずです。
高度な動画編集ならもっと勉強する必要がありますが、この程度であれば正直
誰でもできます。
では詳しく説明していきましょう。
この説明ではWindows 11での説明となります。
無料動画サイトで素材入手
・Pixabay
・動画AC
など様々な無料動画サイトがありますのであなたのブログイメージに合った画像を入手してみてください。
今回のデモではPexelsで入手しましたのでPexelsで説明します。
検索窓に川又は森と入れると先ほどのデモ画像が出るはずです。
画像選択⇒無料ダウンロード横クリック⇒フルHDチェック⇒選択したサイズをダウンロード
フルHD1920×1080の画像で18.8MBのサイズです。
ワードプレステーマdeerの動画は5MB以下推奨
なのでこの後テキストを入れサイズを小さくする方法を説明します。
フォトレガシで動画編集
「動画容量 小さく windows」で検索してみたら、windowsデフォルトアプリ「フォト」で容量を減らす事が出来るとなっていたので起動したが動画編集できない⇒同じくデフォルトアプリ「ビデオエディター」起動するも「フォト」と同じ画面になりお手上げ⇒Windows11からフォトのビデオ編集機能が削除されていた⇒フォトレガシをMicrosoftストアから無料でインストールすることで動画編集できます。
フォトでそのまま動画編集できる場合フォトレガシは不要です。
フォト⇒設定⇒下にフォトレガシ取得ボタン
フォトレガシを立ち上げるとこの画面になります。
ビデオエディターをクリック。
新しいビデオプロジェクトクリック
Windows 11でフォトに動画編集機能がなくなったのはちらっと見えているClipchampに誘導したかったからなのかもしれません。画像だけならClipchampでもいいのですが、文字入れがローマ字ベースなので今回はフォトレガシでの方法となります。
適切なビデオの名前を付けてください。
先ほどの画像を選択
ストーリーボードに配置クリックすると下の画面に配置されます。
では次は動画にテキストを入れてみましょう。
編集1）テキスト挿入
再生画面にテキストを入れる場合はテキストボタンクリック
テキストを入力しレイアウトは何処に表示させるか選んでください。
真ん中はテキストの表示方法になります。
色々試してみてください。
テキストボタンの横にはモーション・3D効果・フィルターなど設定できます。
デモではサイレントの設定です。
ビデオの完了⇒ファイルサイズ最小⇒エクスポートで完成
しかしファイルサイズを最小にしてもファイル容量が88MBもあります。
これでは後ほど圧縮しますが5MB以下にすることは不可能。
ではどうする？
方法の一つとして簡単なのが、動画の長さを縮める事です。
現在の動画は27.6秒もありますので、これを5秒位に縮めることで容量を削除します。
編集２）トリミング
動画の長さを縮める場合はトリミングです。
トリミングのやり方を説明します。
トリミングボタン⇒タイムバーをドラッグし5秒に設定してみる
全体の長さが5秒になっているのを確認後完了ボタンクリック。
これで27.6秒の動画が5秒になりましたので
ビデオの完了⇒ファイルサイズ最小⇒エクスポートでファイルの容量を確認してみると
17.5MBの容量になりました。
しかしこれでもまだ容量オーバーなので更に無料ツールを使って圧縮します。
編集3）videosmallerで圧縮
ここから動画ファイル圧縮ツールのvideosmallerで更に圧縮してみます。
先ほどの動画を選択し動画をアップロードボタン
しばらく待った後
✓completed:Download Fileをクリックすると圧縮したファイルがダウンロードされます。
圧縮された動画サイズは2.81MB！
これでヘッダーに動画設定できるようになりました。
ヘッダーに動画設定
ダッシュボード⇒外観⇒カスタマイズ⇒ヘッダーメディア⇒先ほどのヘッダー動画
これでヘッダー動画がおしゃれな動画に設定されましたね。
【deer】ヘッダーに動画を設定する方法まとめ
お疲れ様でした。
これでヘッダーにdeerデモ画像（赤い鳥居）のような動画を設定することが出来たはずです。
・動画素材入手
・動画編集
・動画圧縮
・動画設定
他にもこんなデモを作ってみました。
どこかで見たことがある動画も作れます
こんな感じで作ることも簡単です。
ここで一番大事なのは動画編集ソフトを初めて触った私でも簡単に設定出来たという事です。
動画経験者の方ならもっとセンスの良いものを作れるはずです。
又、もっと良い方法で作ることも出来るはずです。
もっと良い無料ツールや圧縮ツールがあると思いますが、デフォルトのツールでもこれだけ作れてしまうとは私自身驚きでした。
是非皆さんも挑戦してみてください。
今回説明した手順全てが正しいわけではありません。 自分なりの一番良い方法で行ってみてください。
