山根の無料メール講座始めました!

自由でのんびりとした人生を目指したい方は是非購読してみて下さい♪

カスタマイズ

【AFFINGER5カスタマイズ】背景で綺麗に動画を流す方法!

更新日:

こんにちは、山根です。

 

今回はアフィンガー5を使う上で一押しの

「背景でYouTube動画を流す」

という機能を分かりやすく紹介したいと思います。

 

 

アフィンガー5はカスタマイズ機能も無限大で、
クリック1つで簡単にサイトデザイン等がカスタマイズ可能。

 

 

しかし、あまりにも「なんでも出来てしまうせい」で、
初心者が迷子になる事も多々あります。

 

 

つまり、機能が多すぎるんです(笑)

 

 

公式サイトに行けば、
ある程度の操作方法は分かりますが、
いざ実践してみると、
「あれ?上手くいかない・・・」

 

 

なんてこともしばしば。

 

 

そこらへんも踏まえて、
今回は公式では教えてくれない部分を
もっと丁寧に紹介していきたいと思います。

 

アフィンガー5カスタマイズ:背景で動画を流すってどういう事?

まず、背景で動画を流すとは、
どういう意味なのかを説明します。

 

 

まずはこちらをご覧ください。

アフィンガー4公式

 

アフィンガー5サンプル

 

 

 

ご覧いただけましたか?
そう、めっちゃオシャレなんです!

 

 

これが簡単に作成できるテーマはアフィンガーだけ!

 

 

CSSをいじればどんなテーマでも出来ますが、
私のように、プログラマーでもない素人には厳しいです。。。

 

 

しかし、アフィンガーであれば
コピペとクリック操作のみ!

 

 

初心者でも簡単にプロ並みのサイトが作れるのが
アフィンガーの強みですね。

 

もっと詳しくアフィンガーを知りたい方は
こちらの記事をご覧ください。
【豪華10特典】AFFINGER5特典付きレビュー‼3ヵ月で30万円稼いだノウハウ付き!

 

 

ただし、冒頭でもお話ししたように
カスタマイズ性が良すぎる為、
「どこをどう設定すればいいのか分からない」
という問い合わせが結構送られてきます。

 

 

知っていればすぐに設定できますので、
この記事でしっかりと覚えて帰りましょう!

 

 

アフィンガー5カスタマイズ:背景動画を流す手順(コピペとクリックのみ)

 

それでは画像付きで実際の手順を解説していきます。

 

 

まず、ワードプレスの管理画面左下にある、
「AFFINGER5管理」をクリックし、

「トップページ」をクリックします。

 

 

 

 

そうすると、「トップページ」の中身が表示されますので、
その中にある

「YouTube背景」まで画面をスクロールし、

「空欄部分」にYouTubeの動画IDを入れれば完成!

あとは、「トップページの背景でYouTubeを流す」にチェックを入れれば再生されます。

 

 

 

それ以外にも、お好みでチェックを入れれば様々な設定が出来ますので、
あとは自分で色々試してみましょう。

因みに、上記の画像通りにチェックを入れるのが一番オススメです。

 

 

さて、この間、行った作業と言えば、

YouTubeの動画IDをコピペして、
あとはチェックを入れるだけ!

これこそがアフィンガー5の醍醐味ですね!

 

 

アフィンガー5カスタマイズ:動画IDを取得する際の注意点

 

動画IDとはその動画のURLを確認し、「V=」「=」の間にある文字の事を指します。

 

下記の画像で言うと、「SYkJED5mZgM」この部分です。

 

 

しかし、ここで注意して欲しいのが、
「V=」のあとに「&」があった場合は、
その「&」の手間までをコピーしてください。

 

 

私のコンサル生でも、これが分からず、
「SYkJED5mZgM&t」を丸ごとコピペして入力してしまい、
一向に動画が反映されないで悩んでいる方がいました。

 

(実は私もその1人だったのですが・・・・)

 

 

ここだけ注意してIDを入力してくださいね♪

 

 

因みに、自力で動画を流す場合は・・・

 

話はそれますが、もし自力で動画を流すのであれば、以下の作業が必要です。

 

まず、動画ファイルを準備します。
(Mazwaiという動画素材サイトが便利)

 

あとは以下のようなコードを<body></body>タグ直下内に書けばOKだそうです・・・

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<video autoplay loop poster="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.jpg" id="bgvid">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.webm" type="video/webm">
  <source src="<?php echo get_stylesheet_directory_uri(); ?>/videos/chimney.mp4" type="video/mp4">
</video>
<style type="text/css">
video#bgvid {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  background-color: #000;
}
/*少し透過して背景を見えるようにする*/
#main,
#footer{
  opacity: 0.9;
}
/*文字色がかぶって見えづらいところは見やすいように修正*/
#sidebar{
  padding: 5px;
  background-color: #fff;
  opacity: 0.9;
}
</style>

 

 

それ以外にもはループ設定や、スタイル設定などをするらしいのですが、
私はもうこの時点で挫折しました(笑)

 

 

なんせプログラマーではないので・・・
ただのアフィリエイターにこれは難しいです・・・・

 

 

最後に:綺麗に動画を流すコツとオススメの動画紹介

出来るだけ、シンプルなものが良いでしょう。
そして動画の最初や途中に変なタイトルが挟んである動画はNGです。
見栄えが良くありませんので。

 

 

オススメの検索ワードで言うと、
YouTubeで「4K映像」や「空撮」「ドローン」などと検索すると色々と良いのがヒットすると思います。

 

 

最後に私が使っている動画IDを何個か紹介!

 

魚水中映像
YugIb3Bk6Eg

 


hlWiI4xVXKY

 

4K都市
TKsRlioWNvA

 

4K都市
3bnyaK7H5YY

 


SYkJED5mZgM

 


5O1SdB3UT2M

 


X-dMOvEOQiM

 

 

参考までに!

 

 


人気ブログランキング

↑クリックしてこのブログを応援。
正直に言います!ご迷惑でなければ押して欲しいです。山根の活力剤になります(笑)

 

当サイト限定!山根のAFFINGER5豪華特典のご案内

 

【当サイトだけの限定特典!】

当サイト経由でAFFINGER5を購入された方限定で豪華な特典をプレゼント!

ロールプレイングゲームのように、中ボス、ラスボスを倒して楽しくアフィリエイトで稼いでいく考え方!

一個一個の手順や課題を提案!ステップアップ式にクリアしていく為のチェックシート配布!

・3ヵ月で30万円稼いだノウハウ

・ヘッダー画像作成サービスなどなど!

詳しくは記事の最後をご確認下さい。目次で飛ぶ事も可能です♪

 

 

 

「本気」で「今の人生を変えたい人」に読んで欲しいメルマガ!

 

特別なスキルや才能もなく、

頭も良くない。

 

何かスポーツが得意なわけでもなく、

むしろ引っ込み思案で

地味な性格。

 

そんな「THR 凡人」の私が

「自由」を手に入れ、人生をがらりと変えた方法を

今だけ無料公開中!

人生はほんの少しのきっかけで

驚くほど変化します。

そのきっかけをあなたにも・・・・・・

 

 

このブログは、脱サラして、嫌な上司とは無縁の自由な暮らしを手にしたい!お金に不自由せず家族とのんびり暮らしたい!子供に誇れるかっこいい親になりたい!

と、”本気で”考えている方のブログです。

本気であればあるほど、覚悟があればあるほど、圧倒的に早く成功出来ます!

気になることがあれば、なんでもご相談下さい。私の知識の範囲で誠心誠意お答えいたします。

 

 

山根のお問い合わせはこちらから 一人で悩んでも何も解決はしませんからね♪

 

 

 

-カスタマイズ

Copyright© 山根のスローライフブログ , 2019 All Rights Reserved.