読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

はてなブログでのiTunesStoreアフィリエイト導入方法とレスポンシブに対応させるカスタマイズ

ブログ はてなブログ

f:id:hiroseyonaka:20160527102851p:plain

今月、iTunesのアフィリエイトプログラムをブログに導入してみました。

 

私は自分のスマホがアンドロイド端末なのであまりiTunesアフィリエイトについては積極的ではなかったんですが、モーニング娘。関連の記事を書くにあたり、やっぱり実際の音源を視聴してもらったほうが分かりやすいよなーと思ったためです。

 

というわけで、今回はiTunesアフィリエイトプログラムの導入方法とカスタマイズについてのお話。

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

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

 

f:id:hiroseyonaka:20160106233631p:plain

 

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

 

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

 

f:id:hiroseyonaka:20160106233703p:plain

 

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

 

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

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

 

f:id:hiroseyonaka:20160106233741p:plain

 

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

 

f:id:hiroseyonaka:20160106234536p:plain

 

こんな感じで。

 

なので、リンクをレスポンシブに対応させるため、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」のアイコンにも影響します。

 

f:id:hiroseyonaka:20160106234619p:plain

 

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

 

CSS

.itunes-embed img{
    border:none;
}

 

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

 

f:id:hiroseyonaka:20160106234647p:plain