記事の詳細

WordPressのテーマTwenty Seventeenで、動画ヘッダーをどのくらい簡単に設定できるのか
調査、実験してみました!

HPに動画ヘッダーを埋め込んでみたいという方はぜひ参考にしてみてください(*´ω`)

ビデオ動画やアニメーションはWEBサイトで注目を集める方法の一つ

説明よりも、動画のほうがわかりやすい!という経験はないでしょうか。
静止画よりも、動的に動いているものを見ることによって、その場の雰囲気を感じることができたり
より興味を持ちやすいきっかけにもなります。

例としては、最近流行っているPlayStation®VR。
PlayStation®VR
(出典:Sony
まさにゲームの進化形、ですよね。
こんな恐ろしいサメがどこを向いても追いかけてくる…そんな世界をリアルに体験できるのです。
20年前はスーパーファミコンの時代だったのに、どんどん進化していきますね。

 

さて、本題に戻りますが、静止画よりも動画のほうが人の目に入りやすく、
「ついつい見てしまう」といったことが起きることがあります。

静止画を動画にすることにより、WEBサイト内での効果といえば、

  • サイト内の滞在時間が増える
  • 雰囲気を伝えやすい
  • 興味を持ちやすい

などといった効果が期待できるのではないかと考えられます。

Twenty SeventeenのWordPressテーマでデフォルトで設置できる

では早速サイトのヘッダーを動画に変えてみよう!と考えたとき、
プラグインの導入や、jQueryやHTMLのタグ入れなどを行う必要があり、
知識がないとなかなかうまくいかないことも多いのです。

 

WordPressの公式テーマであるTwenty Seventeenなら、
簡単に動画ヘッダーを入れられるので、今回は設定方法などを紹介していきたいと思います。

WordPress公式テーマのダウンロードはこちらからできます。
https://ja.wordpress.org/

Twenty Seventeenのテーマのプレビューはこちらからできます。
https://ja.wordpress.org/themes/twentyseventeen/

Twenty SeventeenのWordPressテーマを導入する

新規でWordPressを導入すると、テーマがTwenty Seventeenに設定されます。(2017年3月現在)

 

Twenty Seventeen

 

違うテーマを使用している方は、ダッシュボード⇒外観⇒テーマ⇒新規追加からテーマを検索しましょう。

 

Twenty Seventeen

 

「Twenty Seventeen」検索したら、でテーマを「有効化」しましょう。

 

Twenty Seventeen

 

Twenty SeventeenのWordPressテーマで動画ヘッダーを設定する

ダッシュボード⇒外観⇒カスタマイズをクリックします。

 

Twenty Seventeen

 

カスタマイズ画面が表示されるので、ヘッダーメディアをクリックします。

 

Twenty Seventeen動画ヘッダー

 

ヘッダーメディアのカスタマイズ画面が表示されます。
ヘッダー動画は、mp4形式の動画をファイルをアップロードするか、
YouTubeのURLを入力することができます。(画像赤枠)

 

 

mp形式でのアップロードは、容量を最小限にすることなどの推奨があるため、
今回はmp形式よりも簡単なYouTubeで設定してみます。

動画ヘッダーに入れたいYouTubeのリンクを取得する

動画ヘッダーに入れたいYouTubeのリンクを取得するために、YouTubeへ行きます。

YouTubeはこちらから
https://www.youtube.com/?gl=JP

埋め込みたい動画の下に、「共有」ボタンがありますので、
共有ボタンをクリックします。

 

Twenty Seventeen動画ヘッダー

 

共有できる動画のURLが表示されますので、コピーします。

 

Twenty Seventeen動画ヘッダー

Twenty SeventeenのテーマにYouTubeのリンクを設定して動画ヘッダーにする

ヘッダーメディアのカスタマイズ画面より、YouTubeのURLを入力し、保存をクリックします。

 

Twenty Seventeen動画ヘッダー

 

動画ヘッダーの出来上がりです!

 

Twenty Seventeen動画ヘッダー

 

プレビューが見たい方はこちらのURLからどうぞ。
http://banbi.biz/
(※私の実験サイトでもあり、予告なくデザイン等を変更する場合がございます)

 

いかがでしたか?
こんなにも簡単にクオリティの高いサイトを作ることができます!

ぜひ試してみてくださいね(*´ω`)

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練校卒の新米WEBデザイナー。一児のママで毎日育児に奮闘しながらWEBデザインとマーケティング、SEOについて学んでます。日々壁にぶち当たりながらレベルアップ中!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る