アプリーチの使い方・カスタマイズ方法を徹底解説【簡単】

悩む人

アプリーチを使って「アイフィン、アンドロイド」アプリのブログパーツを作りたいけど、どうやって設定するのか知りたい。

こんな悩みに答えます。

こんな方におすすめ

アプリーチについて知りたい方
アプリーチを使って「アイフォン」「アンドロイド」のブログデザインを作りたい方
アプリーチを使ってアプリアフィリエイトで稼ぎたい方
アプリーチでなぜか表示が崩れてしまい困ってる方

本記事の執筆者

当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。本記事を書いている僕は、ブログで毎月５桁稼いでいます。

『アプリーチ』はiPhone・Androidアプリをブログで紹介したいときに、ブログパーツを以下のように表示させ簡単にカスタマイズできるツールです。

ブログパーツ表示例

表示させるのに設定方法が難しそうですが、アプリーチで用意されているソースを貼り付けることで簡単に表示できますよ。

また、スマホアプリのアフィリエイト案件を提供しているASP（アフィリエイト・サービス・プロバイダー）と提携することで、アフィリエイト案件の紹介が可能になります。

ブログでアプリ案件を紹介して収益化を目指していれば、アプリーチは大変重宝します！

本記事では、そんなアプリーチの作成方法とアフィリエイトリンクを貼る方法を解説します。

また、記事後半ではアプリーチを使ってデザインの表示が崩れた時の対処法についても紹介しています。

なおアプリでおすすめのアフィリエイトサイト（ASP）は以下で、アプリーチと組み合わせて案件リンクを貼れます。

アプリ系におすすめのASP

Smart-C （スマートシー）
Zucks（ザックス）
SeedApp（シードアップ）
LINK-A
afb
ACCESSTRADE（アクセストレード）
バリューコマース

上記ASPの特徴については、アプリ系に強いおすすめのASP（アフィリエイト）７選を紹介【初心者におすすめ】で紹介していますので、アプリーチ設定後にご覧ください！

アプリーチとは？

アプリーチは、ブログで紹介したいスマホ用アプリを瞬時に作成できるブログパーツです。

株式会社クリモによって制作されたサービスです。

アプリーチでブログパーツを作成するのは簡単でして、紹介したいアプリの名前を入力するだけで作成できます。

また、以下のカスタマイズができます。

・表示リンク（iPhone、Android、両方）
・タイトル
・価格
・開発元
・target="_blank"の付与（別タブで開く）

アプリーチは、表示させたい情報を細かく選択して自分好みにカスタマイズできます。（後ほど詳しく紹介します）

アプリーチの使い方

アプリーチの使い方について紹介します。

アプリーチの使い方の手順は以下の通りです。

①：アプリ名を検索
②：出力イメージの設定
③：コードのコピー&貼り付け

１つずつ順番に紹介します。

①：アプリ名を検索

まずは、アプリーチの公式ページにいきまして、作成したいパーツのアプリ名を入力し検索をクリックします。

作成するアプリ名入力

検索クリック後、以下のようにアプリが一覧で表示されますので、作成するアプリが表示されているか確認します。

アプリ検索結果

作成したいアプリが表示されていましたら、クリックします。

もし作成したいアプリが表示されない際には「検索」ボタン横にある「複数検索」をクリックしてみてください。

複数検索結果

「複数検索」をクリックしますと、上記のように検索候補がいくつか表示されますので、作成したいアプリをクリックします。

左右のアプリの検索結果は異なりますので、選択の押し間違いがないように気をつけて下さい。

左：iPhoneアプリ検索結果
右：Androidアプリ検索結果

②：出力イメージの設定

アプリ選択ができましたら、ページ中段にある「出力イメージを確認しましょう」から細かいカスタマイズをしていきます。

出力イメージの設定

①表示リンク：「両方」をクリックすることで、『iPhone・Android』両方表示されます。
②タイトル：アプリのタイトル名を設定できます。「検索ワード」は検索したキーワードが表示されます。
③アイコン画像：『 iPhone・Android』のどちらかのアイコンを表示できます
④開発元：開発元の表示・非表示設定。
⑤価格：価格の表示・非表示の設定です。無料のアプリであれば「無料」と表示されます。
⑥target="_blank"の付与：アプリのボタンをクリック後に別ウィンドウを開くかの設定です。「あり」は別ウィンドウで表示します。

ボタンをクリックするとプレビューでパーツが変わりますので確認しながら、お好みでカスタマイズしてみてください！

細かいカスタマイズができましたら、続いてコードをコピー&貼り付けをしていきます。

③：コードのコピー&貼り付け

アプリーチのアプリ紹介用コードには、『旧コード』と『新コード』２つの設定方法があります。

旧コードの表示例

新コードの表示例

旧コードではコードをコピーしてそのまま貼り付けることで簡単にブログパーツを作成できます。

それに対して、新コードはCSSコードを使って自サイトに貼り付ける必要があります。

『新コード』の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;
}
.appreach__star {
position: relative;
font-size: 14px !important;
height: 1.5em;
width: 5em;
}
.appreach__star__base {
position: absolute;
color: #737373;
}
.appreach__star__evaluate {
position: absolute;
color: #ffc107;
overflow: hidden;
white-space: nowrap;
}