こんにちは、黒川あさひです。
私のブログでは、時々おすすめの音楽を紹介しています。
あわせて読みたい
以前はてなブログで運営しているときに、記事内に【iTunes】のリンクを埋め込んでいました。
やっぱり視聴ができるのって、読者側からとしてもありがたいんですよ。
私はめっちゃ視聴します（笑）
Amazonなどの通販サイトでも気になるアルバムを買うときは何回も視聴します。試聴してみて、「やっぱり欲しい！」と思って購入することが多いんですよね。
しかし！ブログをはてなブログからワードプレスに移転すると、【iTunes】のリンクが崩れてしまったんです。
ワードプレスには、はてなブログのように【iTunes】を埋め込む機能がありません。
ここで使うのが【AppHtmlブックマークレット・メーカー】です。
これを使えば、ワードプレスで作成されたブログに【iTunes】のリンクを貼ることができます。
▼こんな感じできれいにリンクを貼ることができます。もちろん、試聴もできます。
村下 孝蔵
￥250
ここでは、【AppHtmlブックマークレット・メーカー】を使って、ワードプレスの記事内に【iTunes】のリンクを貼る方法を解説していきます。
目次
せっかくなら、iTunesアフィリエイトに参加しよう！
iTunesアフィリエイトに申し込み、提携をすると、自分のブログから音楽を買ってくれると報酬が入ります。
別にアフィリエイトに参加しなくても【iTunes】のリンクを貼ることは可能ですが、ちょっとでもお金が入ってくる可能性があるのでやらなきゃ損！
現在（2018年10月）では、購入金額の7％が紹介料です。
※リンクを踏んでから24時間以内に買われないと、紹介料をもらうことができないので要注意です。
登録方法は難しくありません。ただひたすら情報を入力して申請するだけ。
一応審査があるのですが、私は申請した翌日に申請が通ったという通知がきました。遅くても4～5日の間には通知が来るみたいです。
審査に通ると、【iTunesアフィリエイト・トークン】（※メールには【アフィリエイトID】となっています）という、個人の番号みたいなものがもらえます。
ちなみに、はてなブログでもiTunesアフィリエイトをすることは可能です。
【設定】のところに【iTunesアフィリエイト・トークン】を入力するところがあるので、そこに入力すればOK。
今まで結構紹介してきたのに…ちょっともったいないことをしてしまいました。
とりあえず、申請だけでもやっておけば、いざというときに使えるので、
「ブログで音楽を紹介したいな～」と考えている人はぜひ申し込んでみてはいかがでしょうか？
【AppHtmlブックマークレット・メーカー】を使ってブログにiTunesのリンクを貼る手順
【AppHtmlブックマークレット・メーカー】を開くと、こんな画面が出てきます。
順番に入力していきましょう。
１．【設定情報】の入力
【1】（検索対象）：Song
【2】（書式テンプレート）：あとで下の欄の【テンプレートを直接カスタマイズできます】のところで入力するのでそのまま空欄で。
【3】（出力先）：プレビュー表示
【4】（検索件数）：20件（もしくは10件）
２．【PHGアフィリエイトID（トークン）】の入力
【iTunesアフィリエイト】に登録して取得した【iTunesアフィリエイト・トークン】を入力します。
３．テンプレートの入力
【テンプレートを直接カスタマイズできます】のところにテンプレートのコードを入力します。
コード
<img class="appIconImg" height="100" src="${icon100url}" style="float:left;margin: 0px 15px 15px 5px;"><strong><a href="${url}" target="itunes_store">${name}</a></strong><br>${artist}<br><font size="-1">${price}</font><br style="clear:both;"><audio src="${preview}" controls></audio>
※私は、「曲名」「歌手名」「価格」「プレビューURL」を設定していますが、これらは自由に追加することができます。
詳しくは、こちらのページを見てください。
４．曲を選択する
【Bookmarkletを作成】を押すと、下に【MusicHtml(Song)】というのが出てくるので、これをクリック（2つありますが、上のほうです）。
そうすると、画面の上にこのように検索画面が出てきます。
これで曲を検索していきます。
曲名、歌手名でもどちらでもOKです。探しやすいほうでいいです。
今回は、【村下孝蔵】さんで検索します。入力したら【OK】を押します。
そうすると、「この曲ですか？」と聞いてくるので、
次の曲を表示させる場合は【OK】
この曲で決定する場合は【キャンセル】
を選択します。
５．リンクをコピーしてブログに張り付ける
曲を決定すると、このようにリンクが作成されます。
下にプレビュー画像があるので、変なところがないか確認してください。
【HTMLを選択する】を押して右クリックでコピー→ブログに貼ったら完成です。
まとめ：ガンガン音楽を紹介したいなら、ワードプレスよりはてなブログのほうがいい？
そう思っていた時期が私にもありました。
はてなブログ時代にiTunesの貼り付けに慣れてしまっていたので、まさかワードプレスでできないとは思いませんでした。
iTunesのリンクをブログに貼ることに関しては、はてなブログのほうが圧倒的に楽です。
ブログでガンガン音楽を紹介したい！という方は、はてなブログをおすすめします。
ただ、ワードプレスでもはてなブログのようなリンクを貼ることができたので安心しました。
できるだけデザインは崩したくないですし、もとのデザインが気に入っていたので。安心しました。
はてなブログからワードプレスに移行したけど、iTunesのリンクが崩れた！直したい！という方の参考になったら嬉しいです。
参考にさせていただいたブログ記事