はてなブログでのiTunesStoreアフィリエイト導入方法

iTunesアフィリエイトアイキャッチ

今月、iTunesのアフィリエイトプログラムをブログに導入してみました。
私は自分のスマホがアンドロイド端末なのであまりiTunesアフィリエイトについては積極的ではなかったんですが、モーニング娘。関連の記事を書くにあたり、やっぱり実際の音源を視聴してもらったほうが分かりやすいよなーと思ったためです。というわけで、今回はiTunesアフィリエイトプログラムの導入方法とカスタマイズについてのお話。

SPONSORED LINK

iTunesアフィリエイトの申請方法

iTunesアフィリエイトへの申し込みは、アップルのiTunesページから行なうことが出来ます。

1iTunesアフィリエイト

iTunes – アフィリエイトプログラム – Apple(日本)

申請が受理された後、ログインもこのサイトにある「申し込み」ボタンから行ないますので、ブックマークしておくと後々楽ですね。

2iTunesアフィリエイト

申込込みフォームに記入を行なうと、7日程度で審査結果のメールが来ます。gmailのアドレスで申請すると、フィルタリング機能が働き、iTunesアフィリエイトプログラムから届くメールが100%迷惑メールフォルダに振り分けられてしまうので、一週間経っても審査結果のメールが来ないときは迷惑メールフォルダを確認してみてください。

はてなブログでiTunesアフィリエイトを使用する方法とレスポンシブ対応カスタマイズ

はてなブログはすでにiTunesアフィリエイトに対応していますので、審査結果メールに記載のある「アフィリエイトID」をはてなブログの設定画面に入力するだけで、リンクがすべてiTunesアフィリエイトリンクに変更されます。

3iTunesアフィリエイト

しかし、レスポンシブサイトにしているブログでは、iTunesのリンクを貼ると、スマホ表示にした時にバーの右半分がはみ出してしまうんですよね。

4iTunesアフィリエイト

こんな感じで。なので、リンクをレスポンシブに対応させるため、cssに以下のソースを書き足してあげましょう。

CSS

.itunes-embed {
margin: 0px 0px 1.7em;
border: 1px solid #E4E4E4;
font-size: 93.8%;
line-height: 1.5;
width:100%;
padding: 0.7em 0 0.7em 0.7em;
}
audio, canvas, progress, video{
width:95%;
}

これで、リンク自体の横幅とボリュームバーが自動になるので、タブレットやスマホで表示させてもディスプレイからはみ出すことはありません。また、このブログもそうですが、記事中の画像に外枠をつけているとiTunesアフィリエイトリンクのアートワークと、「iTunes」のアイコンにも影響します。

5iTunesアフィリエイト

そんな時は、iTunesアフィリエイトリンクだけ個別に装飾が外れるように、cssで個別指定をしてあげましょう。今回は黒の外枠を消したいので、以下のようなcssを追加しました。

CSS

.itunes-embed img{
border:none;
}

これで、どの端末で見たときでもレイアウト崩れを防ぐことができます。

6iTunesアフィリエイト

あわせて読みたい

トップへ戻る