Play
Slider

動画の説明

WordPressテーマのWINGAFFINGER5バージョン)の凄さを映像で紹介。。。(動画内で誤字/ミスがあります:正確には「ワンストップ」です。あと、YouTube背景について重複してる箇所があります。)

インターネット(アフィリエイト等)の世界での変化はものすごく激しいです。それに柔軟に対応できるブログ・テーマがWINGです。。この動画ではずっと同じWPテーマを活用しています。。1時間以内で5タイプの全く異なるスタイルの仕上げは余裕。。ヤバすぎる。。。

再生箇所:

0:17ゼロから~11:46シンプル・ビジネス系デザイン21:05カワイイ系デザイン~24:26ハッピー系デザイン~26:05補足:カスタマイズ性28:27補足:特殊な記事作成機能43:50セリング系デザイン~44:55補足:記事作成やカスタマイズについてもう少し50:13YouTube動画系デザイン~52:13補足:フォント・カスタマイズ53:12作成クレジットWork Credit

AFFINGER4 ProのYouTube背景デザイン体験談(コード変更無し)

投稿日:2017年11月27日 更新日:

AFFINGER4 YouTube背景

 

こんにちは。

AFFINGER4 Proをそれなりに利用している美智也です。

 

最近、

自分のブログのトップページの背景を

YouTubeの動画に設定しました。

(動画と言っても曲の静止画ですが。。。w)

 

問題解決
絶希
YouTube背景、気になる!

 

実際どんな感じか知りたい!
女性 悩み相談
暗陽

 

この記事ではAFFINGER4のYouTube背景の

体験談を記しています。

少しでも参考になれたら嬉しいです。

 

2018年4月追記:

現在のテーマの最新バージョンはWING/AFFINGER5です。

 

AFFINGER4 ProのYouTube背景デザイン

WING(AFFINGER5版) にはページのバックグラウンドに

好きなYouTube動画を設定することが可能です。

 

AFFINGER

 

(AFFINGER4Exだけではなく、通常版でも活用できます)

 

AFFINGER4の専用管理画面で簡単に設定可能です。

(自分の「クレイジーハッカーの日常」

というサブサイトで説明していきます。)

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

YouTube背景の設定は「トップページの設定」

の欄にありますのでそこをクリックします。

 

AFFINGER4 YouTube背景

 

「トップページの設定」まで飛んだら

「YouTube背景」の部分までスクロール・ダウンします。

 

AFFINGER4 YouTube背景

 

そして流したいYouTube動画を選びます。

 

自分はここでは「Deadmau5」というアーティストの

ミュージックビデオを流したいとします。

 

AFFINGER4 YouTube背景

 

動画をクリックします。

 

AFFINGER4 YouTube背景

 

URLをクリックして、

「v=」のあとにくる英数字がそのYouTube動画のIDです。

 

AFFINGER4 YouTube背景

 

それをコピーします。

 

先ほどのAFFINGER4管理画面に戻って、

「背景に流すYouTube動画ID」に取得したIDをペーストします。

 

AFFINGER4 YouTube背景

 

そしていろいろオプションがあります。

 

「トップページ(PC)の背景でYouTubeを流す」は

クリックしておかないと動画が流れません。

 

AFFINGER4 YouTube背景

 

動画の音も出せます。

(たぶんほとんどのサイトでは無い方がいいかも。。。w)

 

AFFINGER4 YouTube背景

 

YouTubeの動画は再生が終わったら

関連動画が表示されるんですが、

それを非表示にできます。

(ENJIさんはどうやってやってるんだ???www)

 

AFFINGER4 YouTube背景

 

1回だけでなく、なんども動画が繰り返す

「ループ再生」も可能です。

 

AFFINGER4 YouTube背景

 

背景にアミ点を追加することも可能です。

 

AFFINGER4 YouTube背景

 

トップページだけでなく、

他の下層ページにもYouTube動画を流すことが可能です。

 

AFFINGER4 YouTube背景

 

そして画面の左下に「NOW PLAY」のリンクも置けます。

 

AFFINGER4 YouTube背景

 

特に自分が作った動画でないなら、

「NOW PLAY」のリンクは表示させた方がいいと思います。w

 

設定に満足したら「save」をクリックします。

 

AFFINGER4 YouTube背景

 

保存が終了したら「サイトを表示」をクリックします。

 

AFFINGER4 YouTube背景

 

そしてすぐにYouTube動画が再生されます。

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

AFFINGER4 YouTube背景

 

YouTube背景デザイン:

AFFINGER4 YouTube背景

 

記事をクリックしてみると。。。

 

AFFINGER4 YouTube背景

 

下層ページもちゃんとw

YouTube動画が流れます。

 

AFFINGER4 YouTube背景

 

AFFINGER4のYouTube背景でのヘッダー画像の注意点

ヘッダー画像は「png」形式で保存してください。

そうしないと、画像が「透過されない」です。

 

試しに「jpeg」で保存してみると分かりますが、

バックグラウンドが白でYouTube背景が見えにくいです。

 

そして文字だけが表示される「透明」の

ヘッダー画像を作成するには、

自分はPhotoshopを利用しました。

 

AFFINGER4のYouTube背景はいつ利用するのが適切なの?

このYouTubeの背景はいつ使うのが適切なの?
問題解決
絶希

 

美智也
美智也
いや、俺に聞かれても。。。www

 

これ、

アフィリエイト・サイトではどうなんだろう。。。w

分からないです。。。

 

AFFINGER4の公式サイトのデモサイトみたいに、

美容室みたいなお店とかでは上手く活用できそうですけど。。。

 

自分はこの美智也ブログで背景に静止画を利用していますが、

正直、

これでいいのかどうか分かりません。w

実験中です。。。

 

ただ自分のブログの読者のターゲット層は

好みそうな感じなので。。。

 

あとはもう自己満足です。w

というかこの雑記ブログのもう8割は、

「最終的には自分が満足しないと無理」って感じなので。。。

2割は読者のことを考えながら。。。

という感じです。。。

 

このYouTube背景は

本当に「あなたがどういうサイトを目指しているのか」

によると思います。

 

まとめ:AFFINGER4 ProのYouTube背景

設定はAFFINGER4管理にて、非常に簡単。

ヘッダー画像を透過させたい場合はフォトショップが便利

(png形式で保存)

そんな感じです。。。

 

見ての通り、

自分はただボタンをクリックしてるだけです。www

コードは何も変更してないです。

 

問題解決
絶希
なんだ、僕でもできそう!

 

私にもオシャレなウェブデザインができる!
女性 悩み相談
暗陽

 

-noindex, アフィンガー4

Copyright© 美智也のどん底から這い上がるブログ , 2018 All Rights Reserved.