初心者向け！アプリーチの使い方【アフィリエイト方法まで紹介】

アプリーチの使い方や、アフィリエイトする方法を教えてほしい！

という人向けに、アプリーチの使い方・アフィリエイト方法を紹介します。

アプリーチとは、iPhone・Androidアプリを紹介するブログパーツを簡単に作れるツールです。

アプリーチを使用すると、こんな感じのアプリのリンクが作成できます。↓

サイトでアプリを紹介する時に便利ですし、アフィリエイトリンクの差し替えて使用することも出来ます。

ぜひブログやサイトに上手に取り入れてみて下さい！

アプリーチの使い方
アプリーチのカスタマイズ方法
アプリーチのアフィリエイト方法
1. アプリのアフィリエイトASP
2. アフィリエイトリンクの作り方

アプリーチの使い方

アプリーチの使い方は簡単です。

1. パーツ作成する
2. コードをコピーする
3. 記事に貼り付ける

という流れです。順番に解説していきます。

パーツの作成方法

まずアプリーチにアクセスしたら、

パーツを作りたいアプリ名を入力して、
「検索」をクリックします。
すると検索結果に「iPhoneアプリ」と「Androidアプリ」が表示されるので確認します。（iPhoneアプリ・Androidアプリどちらかのみ存在する場合は、違うアプリが表示されます。）

思っていたアプリと違うアプリが表示された場合は、検索キーワードを絞るor「複数検索」をクリックすると検索候補がいくつか表示されるので、使用したいアプリをそれぞれ選択します。

アプリを選んだら、その下の画面で表示を設定できます。プレビューを確認しながら設定してみて下さい。

iPhoneアプリ・Androidアプリどちらかしか存在しない場合は「表示リンク」の項目で、表示したい方を設定できます。

※「target="_blank"の付与」は、表示するウィンドウの選択です。

「なし」を選択：同じウィンドウ
「あり」を選択：別のウィンドウ（タブ）

でそれぞれ開くように設定できます。

実際のプレビューのボタンをクリックして確認できます。

プレビューを見てよければ、下にスクロールして「コードをコピーしてブログに掲載しましょう」のところのコードをコピーして、記事に貼り付けます。

旧コードの使い方

コピーするコードには「旧コード」と「新コード」の2種類あります。

「旧コード」を使用すると簡単に記事に表示できます。（その分見た目もシンプルです。）カスタマイズなどしたい場合は「新コード」を使用してください。

旧コードを使用する場合は「旧コード」のタブを開き、表示されたコードをコピーします。これを記事に貼り付ければOKです。貼り付け方は次の項目の「コードの貼り方」を参考にしてみて下さい。

新コードの使い方

デザインをカスタマイズなどする場合は「新コード」を使用します。基本のCSSが用意されているので、まずはそのCSSをコピーします。

生成されたコードの上に「こちらのCSS」のリンクがあるのでクリックします。

すると新コード用のCSSが表示されるので、これをコピーしてサイトに貼り付けます。以下のコードも同じなので、こちらをコピーしてもOKです。↓（ちょっと長いです！）

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}

WordPressでのCSSを貼り付け方は以下の通りです。