はてなブログで、以下のような感じでiPhone アプリや音楽を紹介したい方へ。
iPhone アプリのリンク付きバナーの作り方とはてなブログでの貼り方を紹介します。
（今回は、iPad人気イラスト制作アプリのProcreateを例に作成してみます）
はてなブログのiTunes アフィリエイト・トークン
最初に。iTunes アフィリエイトトークン登録すれば、ブログで紹介したiTunesミュージック、iPhone/iPadアプリからもアフィリエイト収入が得られるようになります。
iTunesアフィリエイトの料率は７％と少額ですが、使用できると題材の幅は広げられるようになると思います。
iTunesアフィリエイト・トークンプログラムの登録はこちら↓
https://appleservices-console.partnerize.com/login/appleservices/jp
トークン番号を取得できたら、はてなブログ管理画面のアカウント設定で登録するのを忘れないように行なって下さいね。
はてなブログの管理画面（例）
AppStoreアプリへのバナーリンク
まず、AppStoreアプリのバナーリンクを貼るには、公式Appleが提供しているiTunesの「Banner Builder」が便利です。
https://banners.itunes.apple.com/jp/catalog
１）検索キーワードへアプリを入力
２）メディアタイプ より iOS App を選択
３）検索ボタンを押す
↓以下のようにリストが出てきます。Procreateを選択。
すると、バナーリンクが出てきます。
お好みサイズ、スタイルを選び、HTMLリンクをコピーしていきます。
（トップページのバナーは３００x２５０サイズです）
バナーの種類は以下の種類があります。
黒背景 １８０x１５０ サイズバナー
黒背景 ７２８x９０ サイズバナー
ただ、横長バナーとしてオススメは、スマホ対応の３００x５０、３２０x５０がいいでしょう。
黒背景 ３００x５０ サイズバナー
白い背景だとこんな感じです。 ３００x２５０サイズバナー
はてなブログへのHTMLリンク貼り付け
やり方は非常に簡単ですが、一部注意が必要ですので解説しておきます。
１）編集モードをHTML編集へ切り替えます。
２）自分が掲載したい余白部分（＜p＞＜／p＞）を選び、
＜p＞＜／p＞の間に先ほどコピーしたリンクを貼り付けます。
再び編集モードへ戻すと、バナーが現れてきます。
注意！黒背景以外のバナーの場合
注意して欲しいのは、白背景、スマートカラー、くすんだカラーのバナーの際です。
これらを選択してHTML貼り付けした場合、編集画面ではバナーが現れてきません。
公開した場合で見ることができますが、編集時にはプレビュー画面でしか確認することができませんので、プレビューで位置を確認してください。
ですので、編集時に使いやすい黒背景の方が一番いいですね。
（※HTMLで調整しても、プレビューで位置がうまく調整できないようです）
ちなみに、MUSICでも、操作方法は同様です。
例：スマートカラー ３００X２５０サイズバナー
例：くすんだカラー ３００X２５０サイズバナー
ぜひ試してみてくださいね〜
（もし良かったら「いいね！」を押してもらえると嬉しいです♪ ）
