Spotifyプレイヤーをテーブルタグで作ってみた

この記事は2514文字です。（読破予想時間：約5分59秒）

アメブロでインラインフレームが使えなくなったので、Spotifyなどのプレイヤーを今現在、アメブロでは記事に埋込む事は出来ません。

と言う事で、こんなの作ってみました。↓

■ 解放／皆見つかさ【無料でフル試聴】
		解放／皆見つかさ
1	届く事のないメッセージ
2	ウツでサイケな日常
3	純真防衛哀歌
4	Stranger In X'mas Town (2015)
5	祀る想いと祭りの中に
6	やな女 (1988)
7	勘弁してよ！お願いだから
8	なるようになるさ
9	他人をどうこうしようってのがそもそも間違いじゃないの？
10	やな女 (1993)
11	Shake!
12	Like My Life
13	あんたが愛した私＜アルバムオンリー・サービストラック＞
（『せっかくだから、少しでもいい音で音楽を楽しんで欲しい。』）＜ご購入はこちらから＞

これをシンプルに、こんな風にも出来ます。

■ 解放／皆見つかさ【無料でフル試聴】
	解放／皆見つかさ
（『せっかくだから、少しでもいい音で音楽を楽しんで欲しい。』）＜ご購入はこちらから＞

これらは、プレイヤーと言うよりもプレイヤー風に見せてるだけのテーブルタグを使った只のテキストリンクなんですけどね。

なので、勿論、アメブロ以外でも使えます。

テーブルタグについては、HTMLを知らない人には、ちょっと敷居の高い話で、ここで作り方を解説する事はちょっと無理だなって所なんですが、HTMLを知ってる人にとっては、ごく初歩的なタグですので、特に説明はいらないかと言うレベルのものです。

ちなみに、HTMLとは、WEBサイトなどを作る際に、一番土台となるプログラム言語の事です。

ただ、僕自身がちょっと苦労した点を２点程アドバイスしておきたいと思います。

アメーバブログの最新エディタで作業する場合、HTML表示でテーブルタグを打って、テーブルのバックグラウンドカラーを指定して、通常表示に切り替えても、バックグラウンドのカラーは何も変化がありません。

ここで、タグが反映されていないのではないかと思ってしまいがちですが、プレビュー画面で確認するとキチンと反映されてますので大丈夫です。

僕は、これに気付くまで30分以上は時間を食ったと思います。

「何故、色がつかないんだ！？」って事でああでもないこうでもないと色々試して無駄に時間を使ってました。（笑）

でも何となく、同じ事に陥りそうな人って案外多そうだと思って。

そしてもう１点。

エディタの通常表示ではバックグラウンドカラーが付かないと言う事は、当然、バックグラウンドは白いままです。

しかし、僕の様にバックグラウンドに黒を指定した場合、おそらく、僕と同じ様にテキストを白に設定する人は多いのではないでしょうか。

先走って、テキストの色を白にしてしまうと当然の事ながら、文字が見えなくなってしまうので、テキストカラーの指定は、一番最後にした方がいいと思います。

でないと、とくかくやり辛い。（笑）

今回、ふと思いついて、こんなプレイヤー風リンクを作ってみようと思ったのですが、今まではどうしていたかと言うと、いつもこのブログを読んで下さってる方は既にご存知でしょうけど、苦肉の策でTwitterの投稿を埋込む（貼り付ける）と言う方法を使ってました。

SNSにSpotifyのプレイヤーを埋込んで、その投稿をブログ記事に埋込めば、テキストリンクより見栄えもよく、より目立つのではないかと言う発想だったのですが、試したみた所、Facebookページより、Twitterの方が使えると言う結果でした。

~~その理由は『Spotifyで、皆見つかさ 1stアルバム全曲無料試聴』と言う記事に書かれてますので、興味があれば是非お読み下さい。~~

◇Spotifyで、皆見つかさ 1stアルバム全曲無料試聴

そして、Twitterの投稿を埋込むとこんな感じになります。

皆見つかさ 1stアルバム『解放』全曲無料試聴 https://t.co/gp07za7rQk #NowPlaying
— 皆見つかさ (@minami_tsukasa) 2017年6月24日

テキストリンクに比べれば確かに、フレームで囲まれてて見栄えもよく目立ちますので、そのクリック率は断然上がるのですが、Twitter上で表示されてるプレイヤーは、残念な事に、上に表示されている通り、フレーム内でテキストリンクに変わってしまいます。

◇音楽アーティストの苦悩、Spotifyは敵か味方か！

本来、ブログに埋め込まれた先程のtweetは、Twitter上ではこんな風に表示されてます。↓

そして、プレイボタンをクリックすると、こんな風にプレイヤーが変化します。↓

やはり、Twitter上でのプレイヤー表示に比べると、ブログに埋込まれた状態は、残念な表示と言わざるを得ません。

そこで、突然「このプレイヤーの様な画面ならテーブルタグで作れるんじゃないか！？」って事を閃いた訳です。

出来上がったテーブルタグのプレイヤーの見た目、本家のSpotifyのプレイヤーに似てると言えば、けっこう似てるでしょ？

何せ、デザイン丸パクリですから。（笑）

但し、パクったのはあくまでデザインで、プレイヤーボタンなどの画像は、そっくりに自作してますので、無許可で勝手に画像を使ったりはしてません。

ま、黒丸かいて、中に白三角書くだけですからね。（笑）

ただ、これでTwitterを埋込むよりクリック率が上がるのかどうかと言うとまだ疑問符がついた状態ですが、見栄えと自己満足度は上がったのではないかと思います。（笑）

宜しかったら、皆さんもお試しあれ！

☆*ﾟ゜ﾟ*☆*ﾟ゜ﾟ*

もし、こんな僕に興味を持ったと言う方がいらっしゃったら、是非、この下のリンクをクリックしてみて下さい。

ミュージシャン、皆見つかさの世界が広がっています。o(゜∇゜*o)(o*゜∇゜)o～♪

『皆見つかさ・アルバム『解放』、発売中！』

皆見つかさ公式Facebookページ
 皆見つかさ公式Twitter
ご連絡先：シェイク・エンターテインメント