ブログ運営半年で月20万超の元サラリーマンブロガーなつです。
最近は、記事以外にもWordpressテーマのデザイン部分に動画設定ができるものが多くなっています。
AFFINGER6も記事以外に背景やトップページにも動画を設定できるようになっています。今回は、ブログに顔ともいえるトップページに動画を設定してみようと思います。
AFFINGER6のトップページにYoutube動画を設定してみるとどんな感じになるのか見ていきます。
もくじ
AFFINGER6に設定する動画
まずは、AFFINGER6に設定する動画をご覧ください。
この動画をAFFINGER6のトップページに設定してみます。
アフィリエイトで使えそうな簡単な動画を作ってみました。一応青汁アフィリエイトのイメージで作っています。
もしご自身の動画がある場合には、Youtubeにアップロードしてからコードを取るようにします。
Youtube動画のコードの取り方
Youtube動画には共有のコードがあります。ブログの記事などに貼り付ける時にもこの方法でIDコードをコピペして使います。
なので、この方法を覚えておくと後々便利なのでぜひ覚えておいてください。
- 動画を開き共有ボタンをクリック。
- コードをコピペする。
動画を共有する前に確認すること
動画を共有して使用する前に、著作権等のことは確認しておきましょう。トップページに使用することはブログの顔になりますので、動画が使えるかどうか確認しておきましょう。
動画はどうしたら手に入るのか【参考】
結構、著作権も問題ないピッタリの動画ってなかなか見つからないかもしれません。クラウドワークスなどで依頼するという手もありますが、良い人が見つからなかったり面倒だったりします。
このブログで作っている動画の冒頭、オープニングに動画を作成してもらったので少し体験談をお伝えします。
まずは以下の動画のオープニングをご覧ください。
ココナラで好みの動画を探して作成
動画は「ココナラ」で作ってもらいました。
後にも先にもこの1回だけなのですが、慣れない人でも結構簡単に依頼ができますので、もし自分だけの動画が欲しいな～と思ったらココナラのホームページで確認してみてください。
私の動画の最初の7秒間に流れている部分（音楽も含む）を作ってもらっています。初めてのことなので、難しく考えていましたが、ここに出品されている方は慣れている方も多いので、リードしてくださり、すごくスムーズに購入ができました。
動画とは別に、Youtube動画のフロントページにあるロゴも併せて作ってくださりかなり重宝しています。
⇒ ココナラ
もちろんご自身のYoutube動画がある方はそちらを使ってください。
動画を開き共有ボタンをクリック
Youtube動画を開き、動画の右下にある「共有」というボタンをクリックします。
すると以下のようにコードが書かれた部分が開きますのでコピペをしてください。
取り出したコードのスラッシュ（/）より後ろをAFFINGER6に設定しますので、分解してどこかに保存しておきましょう。
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！
※ AFFINGER6（ACTION）は AFFINGER5（WING）の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。
AFFINGRER6の設定
YoutubeのIDコードが取れたら次にブログに設定をしていきます。今回は、ブログのトップページに見えるように配置していきます。
AFFINGER6の場合には、背景の全体が変わりますので、このやり方を覚えておけば、背景になにか動画を設定したい時にも応用できます。
- AFFINGER6の管理画面でコード設置
- カスタマイザーで高さの調整
AFFINGER6の管理画面での変更
まずは、AFFINGER6の管理画面にて動画のコードを設定します。
▼ AFFINGER管理 ⇒ トップページ ⇒ Youtube背景
背景に流すYouTube動画IDの部分に、先ほどコピペして保存したIDコードを入力します。その下にある、トップページ（PC）の背景で動画を流すにチェック。
下のオプションも見ていただき、必要な部分にチェックを入れていきましょう。例えば、動画をループさせたいなら、「動画をループ再生」にチェックを入れます。
最後に下にスクロールし「SAVE」をクリックします。
これで、背景に動画設定が完了しました。
カスタマイザーで高さの調整
管理画面の設定だけでは、トップページが現れず、背景のみの設定となります。カスタマイザーでのヘッダーの高さ調整をして初めてトップページ部分が現れます。
▼ 外観 ⇒ カスタマイズ ⇒ ヘッダー画像
ヘッダー画像エリアという部分がありますので、ここで高さを調節します。
上記は、PCのヘッダーを450pxに調整したものです。短いと感じれば500にしたりバランスを見ながら設定していってください。
この設定をしない場合
カスタマイザーで設定をしないと以下のようになります。動画は反映されるものの、記事の枠がかぶさってしいキチンと見えません。
例えば、一面に小さな柄などを設定してあるような背景ならこのままでも良いです。つまり、パターン化された小柄の背景動画をお持ちの場合にはこの設定をするとブログの後ろで動画が動くのでとても面白い演出になります。
AFFINGER6のYoutube動画設定まとめ
AFFINGER6の動画設定には、背景の設定とトップページの設定があります。（動くという観点からだとスライダーなんかもあります）
- AFFINGER6管理画面でYoutube動画のIDコードを設定
- カスタマイザーでヘッダーの高さ調整
上記2点の設定で、ヘッダーを動画にすることができます。背景に動画設定をしたい場合には、上記の工程①だけで設定可能。
さらに、動画をループさせたり音が含まれている動画の音を出したりするのもオプションで設定が可能です。
動画の設定をすることで他のサイトとの差別化を図ることができますが、ただ動画を前面に設置することで重くなってしまう場合があるので調整をしながら設定をしてみましょう。
ご自身のオリジナルの動画を作ってもらいたい場合には、ココナラが簡単にちょっとだけ注文ができるので、試しに登録しておくと便利です。
初心者だからこそWordpress有料テーマ を使うべき理由
無料テーマを使うことで時間の無駄遣いをしていませんか？
- 思い通りのデザインにできない
- なかなか稼げない
- アクセス数が増えない
こんな悩みを抱えていませんか？
稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。
Wordpressの有料テーマができる５つのこと
- 検索上位を目指せる
- 見た目が綺麗でおしゃれになる
- 機能が豊富で出来ることが多い
- マニュアルなどのサポート
- 有名ブロガーも有料テーマを使っている
これまでにあげた5つの有料テーマの特徴を説明していきます。
1. 検索上位を目指せる
ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO（SearchEngine Optimizationの略）です。
- 情報の信頼性
- ユーザーへの役立つ情報であるか？
- スマホ・PCなどでストレスなく使える
などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。
2. 見た目が無料テーマ以上に綺麗になる
シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。
有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。
出典：AFFINGER6（アフィンガー6）
3. 機能が豊富でできることが多い
今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。
4. マニュアルなどのサポート
なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。
5. 有名ブロガーも多数使用
稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。
もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。
カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。
おすすめ！WordPressテーマ
「ACTION（AFFINGER6）」
- 高機能の最新テーマで大人気
- デザイン変更でいろんな用途に使える
- マニュアル完備
- 各パーツがプロに作ってもらったみたいにアレンジ可能
- バナーや囲い枠スライダーなど特殊なものが簡単に作れる。
⇒ 違いについてはコチラの記事でどうぞ。
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！
※ AFFINGER6（ACTION）は AFFINGER5（WING）の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。