今月、iTunesのアフィリエイトプログラムをブログに導入してみました。
私は自分のスマホがアンドロイド端末なのであまりiTunesアフィリエイトについては積極的ではなかったんですが、モーニング娘。関連の記事を書くにあたり、やっぱり実際の音源を視聴してもらったほうが分かりやすいよなーと思ったためです。というわけで、今回はiTunesアフィリエイトプログラムの導入方法とカスタマイズについてのお話。
iTunesアフィリエイトの申請方法
iTunesアフィリエイトへの申し込みは、アップルのiTunesページから行なうことが出来ます。
iTunes – アフィリエイトプログラム – Apple（日本）
申請が受理された後、ログインもこのサイトにある「申し込み」ボタンから行ないますので、ブックマークしておくと後々楽ですね。
申込込みフォームに記入を行なうと、7日程度で審査結果のメールが来ます。gmailのアドレスで申請すると、フィルタリング機能が働き、iTunesアフィリエイトプログラムから届くメールが100％迷惑メールフォルダに振り分けられてしまうので、一週間経っても審査結果のメールが来ないときは迷惑メールフォルダを確認してみてください。
はてなブログでiTunesアフィリエイトを使用する方法とレスポンシブ対応カスタマイズ
はてなブログはすでにiTunesアフィリエイトに対応していますので、審査結果メールに記載のある「アフィリエイトID」をはてなブログの設定画面に入力するだけで、リンクがすべてiTunesアフィリエイトリンクに変更されます。
しかし、レスポンシブサイトにしているブログでは、iTunesのリンクを貼ると、スマホ表示にした時にバーの右半分がはみ出してしまうんですよね。
こんな感じで。なので、リンクをレスポンシブに対応させるため、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」のアイコンにも影響します。
そんな時は、iTunesアフィリエイトリンクだけ個別に装飾が外れるように、cssで個別指定をしてあげましょう。今回は黒の外枠を消したいので、以下のようなcssを追加しました。
CSS
.itunes-embed img{
border:none;
}
これで、どの端末で見たときでもレイアウト崩れを防ぐことができます。
