Click

YouTubeをCSSでかわいく飾ってみよう!

2020/08/22

CSS YouTube


はじめに

この記事はブログに埋め込んだYouTubeの動画をCSSでかわいく飾ってみたものです。

YouTubeの装飾にUruさんの動画を埋め込んだきっかけを少し説明します。


なぜUruさんのYouTubeを埋め込んだのか

先日子供に「お父さんが昔YouTubeでよく見ていたUruさんが今メジャーで活躍しているよ。」と言われました。

 

裏さん?ウラさん?誰だっけ、と最初分からなかったのでしたが、ひょっとして「Uru(うる)」さん?とやっと思い出しました。

 

それよりも、なぜUruさんのYouTubeを私が見ていたのかを子供が知っていたのかの方が気になりました。

 

ひっとしてPCのブラウザの履歴を見られたのかな。😱

 

だとしたら、エッチな動画を見ていたのもバレたかも、と一瞬焦りました。😅

 

しかし、冷静に記憶を辿っていくと、4~5年前、自作スピーカー制作にハマっていた時、チェック用の音源としてよく流していたことを思いだしました。

 

当時使用したスピーカーユニットはハイ上がりな音が特徴なFOSTEXのFE83-solで、女性ボーカルを再生すると絶品でした。

 

確かPS3のYouTubeでUruさんの歌を再生し、自作スピーカーの出来栄えを評価してたのです。

 

Uruさんの透き通った天使のようなボーカルは子供にも強烈に記憶されていたようです。

 

と言うことで、久しぶりにUruさんのメジャーデビュー前のYouTubeをもう一度聴き直してみようと思ったのでした。

 

UruさんのYouTubeを探したら「Uru Official YouTube Channel」がすぐ見つかりました。

Uru Official YouTube Channel

Uru official web site→http://uru-official.com Twitter→http://twitter.com/uru_super. facebook→https://www.facebook.com/uru.singer ブログ→http://ameblo.jp/uru-sin...

 

この専用チャンネルで動画を見れば良いのですが、メジャーデビュー前の動画は100本もあることが分かりました。

 

順番に見て行けばよいのですが、全部再生すると新しいものから古いものの順にしか再生できないのです。

 

これは不便なのでタイトルとアドレスを抽出しスプレッドシートに時系列に整理してみました。

 

すべてハイクオリティですが、有名な曲のカバーが多いですね。

No.カバー曲公開日
1ひこうき雲 荒井由実2013/09/06
2最後の優しさ JAY'ED (女性が歌う最後の優しさ)2013/09/24
3DESPERADO The Eagles2013/09/29
4さくら 森山直太朗(女性が歌うさくら)2013/09/29
5I LOVE YOU 尾崎豊 (女性が歌うI LOVE YOU)2013/10/04
6らいおんハート SMAP (女性が歌うらいおんハート)フードファイト主題歌2013/10/16
7いとしのエリー2013/10/21
8ロビンソン スピッツ (白線流し挿入歌) ピアノアレンジ2013/10/23
9空も飛べるはず ピアノバラードアレンジ(女性が歌う空も飛べるはず)2013/10/26
10いつの日も 阿部真央 (ピアノVer.)2013/10/27
11高嶺の花子さん back number (女性が歌う高嶺の花子さん)ピアノアレンジ2013/10/28
12kaho / every hero (ミスパイロット主題歌)2013/10/31
13流星群 鬼束ちひろ 「トリック2」主題歌2013/11/04
14真夏の果実 サザンオールスターズ(女性が歌う真夏の果実)2013/11/08
15Oh My Little Girl 尾崎豊 (女性が歌うオーマイリトルガール)2013/11/12
16青い春 back number (女性が歌う青い春)2013/11/16
17ありがとうさようなら (みんなのうた)2013/11/21
18Hello Especially スキマスイッチ(女性が歌うHello Especially)2013/11/23
19糸 中島みゆき2013/11/28
20ナオトインティライミ 手紙 (女性が歌う手紙 ピアノアレンジ)2013/12/01
21冬のうた Kiroro (クリスマスアレンジ)2013/12/05
22女の子は泣かない 片平里菜2013/12/07
23夜空ノムコウ SMAP (女性が歌う夜空ノムコウ)2013/12/11
24I'm Here 伊藤由奈 (アンフェア主題歌)2013/12/19
25蛍 サザンオールスターズ(永遠の0主題歌)2013/12/21
26守ってあげたい JUJU2013/12/25
27back number / fish2013/12/28
28安室奈美恵 / TSUKI (映画 抱きしめたい主題歌)2014/01/11
29東京 / wacci 「隠蔽捜査」 主題歌 (女性が歌う東京)2014/01/13
30Rihwa / 春風 (僕のいた時間 主題歌)2014/01/17
31back number / 幸せ【女性が歌う幸せ ピアノVer.】2014/01/23
32僕はペガサス君はポラリス / MISIA 「S-最後の警官-」主題歌2014/01/25
33白雪姫 / Flower2014/02/09
34ヒカレ / ゆず (ピアノ、女性が歌う)2014/02/17
35AGAIN / DREAMS COME TRUE2014/02/21
36あたしをみつけて / Salley2014/03/06
37平井堅 グロテスク feat.安室奈美恵2014/03/27
38秦基博 / プール2014/03/30
39リヴ(Live) / Superfly2014/04/01
40スキマスイッチ / 螺旋2014/04/06
41Your Song / Elton John2014/04/02
42桜 / 清水翔太2014/05/04
43虹色の戦争/ 世界の終わり2014/05/07
44高橋優 / 太陽と花 (ピアノ・女性が歌う)2014/05/22
45最愛 / KOH + 福山雅治2014/07/27
46ひまわりの約束 / 秦基博 ピアノ2014/08/07
47ONE OK ROCK / Mighty Long Fall (女性が歌う、ピアノ)2014/08/17
48愛し君へ / 森山直太朗 (女性が歌う)2014/08/24
49BUMP OF CHICKEN / ray2014/09/23
50ONE OK ROCK / wherever you are (女性が歌う)2014/10/07
51麦の唄/ 中島みゆき(ピアノで歌う)2014/10/07
52足音 / Mr.children【女性が歌う】2014/10/21
53傷つける / クリープハイプ (女性が歌う)2014/11/04
54BRIGHTER DAY / 安室奈美恵【ピアノバラードver】2014/11/11
55Dragon Night / SEKAINO OWARI2014/11/18
56ワインレッドの心 / 安全地帯 ピアノ2014/11/25
57レイニーブルー / 徳永英明 ピアノ2014/12/02
58雪のクリスマス / DREAMS COME TRUE2014/12/09
59粉雪 / レミオロメン (ピアノ、女性が歌う)2014/12/23
60Story / AI2014/12/30
61シェネル / Happiness  ピアノver.2015/01/13
62back number / 風の強い日 【女性、ピアノ】2015/01/27
63ヒロイン / back number 【女性が歌う,ピアノ】2015/02/10
64僕の今いる夜は / 槇原敬之2015/02/24
65フレンズ / レベッカ2015/03/10
66Yukiyanagi 雪柳 / Micro (ピアノで歌う)2015/03/24
67EXILE ATSUSHI / Precious Love 【ピアノ 女性】2015/04/07
68ONE OK ROCK / Heartache【るろうに剣心】 ピアノ 女性2015/04/21
69マーメイドラプソディー / SEKAI NO OWARI2015/05/05
70メロディー / 玉置浩二 (ピアノ 女性)2015/05/19
71誓い / Rake(女性)2015/06/02
72シュガーソングとビターステップ(女性、ピアノ) UNISON SQUARE GARDEN2015/06/16
73UVERworld / THE OVER(ピアノ)2015/06/30
74秦基博 / 水彩の月2015/07/14
75secret base~君がくれたもの~ / ZONE2015/07/28
76ANTI - HERO (アンタイヒーロー) / SEKAI NO OWARI 進撃の巨人2015/08/11
77海の声 / 浦島太郎 au CM2015/08/25
78back number / 手紙2015/09/08
79緑の街 / 小田和正2015/09/22
80今井美樹 / PRIDE2015/10/06
81新宝島 / サカナクション2015/10/20
82SEKAI NO OWARI / SOS2015/11/03
83アイネクライネ / 米津玄師 (女性が歌う、ピアノ)2015/11/17
84会いたい / 沢田知可子2015/12/01
85Silent Night /2015/12/15
86ENDLESS STORY / 伊藤由奈 Reira starring yuna ito 【NANA】2015/12/29
87EXILE / ki・mi・ni・mu・chu2016/01/12
88コブクロ / 未来2016/01/26
89miwa / あなたがここにいて抱きしめることができるなら (弾き語りver.)2016/02/09
90Hello,again~昔からある場所~ / My Little Lover2016/02/23
91BUMP OF CHICKEN / Butterfly2016/03/08
92Best Friend / Kiroro2016/03/22
93大空と大地の中で / 松山千春2016/04/12
94見上げてごらん夜の星を / 坂本九2016/04/19
95宇多田ヒカル / First Love2016/04/26
96バラード / BUZZ THE BEARS2016/05/10
97JUJU / やさしさで溢れるように2016/05/24
98スピッツ / みなと2016/05/31
99杏里 / オリビアを聴きながら2016/06/07
100奏(かなで) / スキマスイッチ2016/06/14

 

100曲の再生回数はどれくらいなのかをスクレイピングしようと思いましたが、IMPORTXML関数では抽出できなく、You Tube APIを使わないと出来ないことが分かりました。

 

100曲の再生は6時間もあれば終わりますが、You Tube APIを6時間の勉強で使いこなす自信はゼロだったので、再生しながら手作業で生データを記録することにしました。(笑)

 

下のグラフは2019年3月24日時点の再生回数です。

 

メジャーデビュー前の動画だけで、もうすぐ累積1億回に到達しそうです。凄いですね。

 

動画をただ再生するだけでは、少しつまらないので、お気に入りの動画をブログに埋め込んでみようと思いました。

 

だだ埋め込むだけでは芸がないなーと思っていたところ、FC2ブログテンプレートの神、Akira先生のYouTube装飾の方法を思い出しました。

 

これはAkira先生がお遊びでYouTubeを着飾る方法をシリーズで紹介されたものですが、装飾用の素材をYouTubeのフレームに重ねることで、YouTubeの画面にアクセントが付与され、とても可愛くなるのです。

 

管理人のFC2ブログは1年以上休眠してますが、このすばらしい装飾をはてなブログで是非使ってみたいと思い、テスト環境で動かしてみたら問題なく動いてくれました。

 

そこでダメ元で図々しくAkira先生にはてなブログでの利用許可を問い合わせしたところ、ご承諾を頂くことが出来ました。

 

Akira先生、YouTube装飾コードの使用許可、大変感謝いたしまーす。

vanillaice000.blog.fc2.com

 

ところで、そもそもUruさんをなぜ管理人は知っているのでしょうか。

 

Uruさんを何処で知ったのか

 

理由は簡単で、Uruさんは最初FC2ブログで「uru singer Diary」というブログを運営されていたからです。

urudiary.blog.fc2.com

 

管理人がFC2ブログを始めた当初、ブログのデザインをカスタマイズする時に参考にしたサイトの一つが「uru singer Diary」でした。

 

もの凄くコメントが多いなー、と読んでいたら、UraさんがYouTubeにアップした歌について「感動した・泣いた・感謝」等がたくさん書き込まれました。

 

UraさんのYouTubeはモノクロームな画面で、独特のスタイルなのですが、初めて中島みゆきの「糸」のカバーを聴いた時は、鳥肌がガンガン立ちました。

 

彼女の声は神秘的でもあり、無限に聞き続けることが出来るのではないか、と思うくらい強烈なインパクトがありますね。

 

不思議な雰囲気をもった女の子というイメージでしたが、こんなに歌が上手いのに、なぜデビューできないんだろうと思ってました。

 

しかし、子供にUruさんが活躍していると言われて、改めて調べてみると、2016年6月にソニー・ミュージックエンタテインメントよりメジャーデビューされました。

 

世の中から2年半遅れていました。(反省)

 

さっそくオリジナルアルバム「モノクローム」CD+Blu-rayをポチリましたが、このアルバムが到着するまで、UruさんYouTubeを何度も聴きまくりたいと思います。

 

 

YouTubeをかわいく飾る

 

最初は100本の動画をブログに埋め込もうとバカなことを考えてましたが、さすがにそれは違法であり、現実的でありません。

 

Akira先生が公開したYouTubeの装飾を紹介する形で、素敵な動画を5点ほど紹介します。

 

ひこうき雲 荒井由実

 

糸 中島みゆき

 

流星群 鬼束ちひろ「トリック2」主題歌

 

Dragon Night / SEKAINO OWARI

 

奏(かなで) / スキマスイッチ

 

注意


Akira先生のブログで公開されている装飾用の素材は直リンク厳禁となってます。もし真似する場合は、ご自身が管理しているサービスのフォルダに保管して下さい。
 
管理人のフォトライフに保存した素材は、管理人の都合で消えてしまう可能性があるので、ご利用はおススメしません。 

まとめ

 

YouTubeにかわいい素材を装飾することで、雰囲気がグッと良くすることができました。

 

またLazysizesの導入で画像読み込みを遅延することができ、多量の動画を埋め込んでも、レスポンスの低下を防ぐことが出来ました。

 

興味がある方は、ぜひ遊んでみて下さい。

 

気軽に足跡残してね!

この記事が「気になった・参考になった」と感じた方は、リアクションボタンか、ツイッターで♡いいねを押して、足跡を残して頂けると嬉しいです。

それでは今回の記事はこれでおしまい。

Advertisements

Author

自分の写真
IT全般およびWebサイトについてお勉強したことを勝手気ままに書いてまーす。
\ Follow me! /

Follower

Labels

Internet (10) PC (10) Blog (8) Repair (7) WebDesign (7) Windows10 (7) Security (6) Blogger (5) YouTube (5) SEO (4) SmartSpeaker (4) hatenablog (4) Audio (3) CSS (3) Cooking (3) HTTPS (3) Review (3) Domain (2) GitHub (2) HDD (2) JavaScript (2) MFI (2) Node.js (2) Ads (1) Anime (1) Beer (1) Browsersync (1) Coding (1) Customize (1) Editor (1) Git (1) Google (1) Life (1) Monitor (1) New Year (1) Nomad Code (1) Smart Watch (1) Twitter (1) Windows (1) iPhone (1) nodist (1)

Sponsored Links

QooQ