突然ですが、「ブログのネタとしてMacのアプリも紹介したいなー」と思ったことはありませんか？
そして、「せっかく紹介するならアフィリエイトしたいなー」と思ったことはありませんか？
MacのアプリもAmazonや楽天の商品紹介同様にアフィリエイトをすることができます。
また、Macのアプリを紹介するには「ポチレバ」という「カエレバ」の兄弟サービスを使うことでアフィリエイトリンクのデザインをカスタマイズすることができます。
今回はMacのアプリをアフィリエイトするための手順とポチレバの利用方法について説明をしたいと思います。
最終的には以下のようなアフィリエイトリンクを作ります。もちろん、レスポンシブ対応もしています。
イメージ画像
なお、当ブログではスワロー
というオープンケージ社のテンプレートを利用しているため、環境によってはうまくデザインが反映されないかもしれないのでご了承ください。
- Macのアプリをアフィリエイトする方法
- ポチレバの使い方
- ポチレバのカスタマイズ方法
目次
iTunesアフィリエイトに登録
MacのアプリをアフィリエイトはiTunesアフィリエイトを利用することで行えます。
iTunesアフィリエイトはMacアプリに加えて、Apple Music、Podcast、iPhoneアプリなど様々なApple関連の商品をアフィリエイトすることが可能です。
なお、iTunesアフィリエイトはPHG(Performance Horizon Group)というグループが運営をしております。
ですので、「iTunesアフィリエイトを利用する=PHGのサービスを利用する」ことになります。
以下のリンクから申し込みができます。
https://itunes.phgconsole.performancehorizon.com/login/itunes/jp
申し込みが完了すると、審査が開始され、数日後にメールにて審査結果が通知されます。
承認されればiTunesアフィリエイトを利用することが可能になります。
iTunesアフィリエイトの使い方
審査が完了し、無事に承認されたら晴れてMacのアプリをアフィリエイトすることができます。
ここではiTunesアフィリエイトを利用してアフィリエイトリンクを作る方法について説明をします。
まずは管理画面のトップページにある「ツール」タブをクリックし、「LinkMaker」を選択します。
次に検索欄に紹介したいアプリ名を入力して検索します。
「ストア国」と「メディアタイプ」は選択が可能です。
検索結果に埋め込みコードがあるのでこれをコピーします。
コピーしたHTMLを貼り付けることでアフィリエイトリンクが作成できます。
ポチレバに必要情報を登録する
さて、先ほど作成したアフィリエイトリンクですが、「ポチレバ」というサービスを利用することでカスタマイズすることができます。
ポチレバは以下のリンクから利用できます。
上記ページにはアフィリエイト情報を登録するフォームがあるので、アフィリエイトIDやサイトの名前などを登録していきます。
IDの確認方法ですが、先ほどiTunesアフィリエイトの管理画面の右上に存在します。
IDを確認したらポチレバに登録します。
アフィリエイトリンクの作成
検索
ポチレバに情報を登録したら、いよいよアフィリエイトリンクを作成していきます。
まずは紹介したい商品をポチレバの検索フォームから検索します。
検索フォームはポチレバの上部にあります。
検索結果から自分が紹介したい商品を見つけたら「ブログパーツを作る」という項目をクリックします。
アフィリエイトリンクをカスタマイズする
これでアフィリエイトリンクを作る準備ができました。
アフィリエイトリンクは色々とカスタマイズすることができるのですが、以下の2点の変更をおこなってください。
- 150pxを選択
- rel=nofollowにする
nofollowにするとリンクがクロールの対象から除外されるため、SEOの評価に影響を与えなくなります。
「クロールってなに？」という方は以下の記事も参考にしてみてください。
カスタマイズされた内容はHTMLファイルとして出力されているので、このHTMLを記事に貼り付けることでリンクになります。
上記のリンクをコピペした結果表示されているブログパーツ(アフィリエイトリンク)が作成されます。
CSSをカスタマイズする
ここからポチレバのボタン部分などのデザインをカスタマイズしていきます。
今回は以下の記事で紹介されているCSSをベースにスタイルを作成しました。
実際に作成したCSSは以下になります。
/*--------------------------------------
ポチレバ
--------------------------------------*/
.pochireba {
border: 1px solid #ddd;
border-radius: 0px;
padding: 15px !important;
margin-bottom: 20px;
}
.pochireba .pochi_img {
box-shadow: 0 0 1px 1px #ccc;
margin-right: 25px !important;
}
.pochireba .pochi_info {
margin-left: 5px;
}
.pochireba .pochi_name {
text-align: center;
}
.pochireba .pochi_name a {
display: block;
font-size: 18px;
text-decoration: none;
text-align: center;
margin: 0 40px 10px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
line-height: 26px;
background: -moz-linear-gradient(top, #FFF 0%, #EEE);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
}
.pochireba .pochi_seller {
margin-bottom: 5px;
}
.pochireba .pochi_name a::after {
content: 'ダウンロードページへ';
display: block;
font-size: 15px;
color: #555;
}
@media only screen and (max-width: 480px) {
.pochireba>a {
display: block;
}
.pochireba .pochi_img {
float: none !important;
display: block;
margin: 0 auto 10px !important;
}
.pochireba .pochi_name {
font-size: 17px;
}
}
新しく作成したCSSをstyle.cssに追加します。
結果、以下のようになります。
実際のアフィリエイトリンク
以上です、お疲れ様でした！
