スマホアプリ紹介ツール「アプリーチ」の使い方とCSSデザイン

更新日 2021/10/30
カテゴリー便利ツール

iPhone と Android のスマホアプリをブログで紹介したいとき、わざわざ検索して URL をコピペして… というのはすごく面倒で手間がかかりますよね。

でも「アプリーチ」というブログパーツ作成ツールを使えば、一気に両方のアプリリンクを生成することができ、さらに iTunes アフィリエイトも利用することができます。

というわけで、iTunes アフィリエイトの申請方法と、アプリーチの使い方、その CSS デザインサンプルをご紹介します。

Headline

iTunesアフィリエイトプログラムに申請しよう
- iTunesアフィリエイトプログラムでリンクを作成する場合
アプリーチの使い方
アプリーチCSSデザイン（カスタマイズ）
まとめ

iTunesアフィリエイトプログラムに申請しよう

アフィリエイトリンクにするかどうかは自由ですが、せっかく紹介するのですからアフィリエイト報酬もゲットしましょう。

※無料アプリを紹介しても報酬は入りません

まず、iTunes アフィリエイトプログラムにアクセスします。

「プログラムに申し込む」をクリックし、次ページで必要情報を入力して申請します。

審査が行われて、承認されればメールが届きます。

赤枠部分の「アフィリエイト ID 」をアプリーチで使いますので、どこかにメモしておくかメールを保存しておきましょう。

iTunesアフィリエイトプログラムでリンクを作成する場合

アプリーチを使わず、iTunes アフィリエイトプログラムから直接リンクを作成することもできます。

というか、これが本来の使い方ですね。

管理画面に入り、「ツール」から「Link Maker」をクリック。

ここからアプリ名などを検索し、結果に表示されたものを選択します。

あとは、「バッジ」「テキストリンク」「スモール・バッジ」のいずれかを選び、下に出てきたコードを記事にコピペすれば OK です。

このような感じで表示されます。

iPhone 向けならこれでも良いですが、アプリ名やアイコンも取得できて、Android アプリのリンクまで一括して生成してしまうアプリーチのほうが便利ですね。

アプリーチの使い方

アプリーチはすごくシンプルなツールなので、わざわざ使い方を説明するまでもないと思います。

アプリ名を検索して、表示を確認。

下部で表示するパーツを選択できるので、価格や開発元など、必要なものを選択しましょう。デフォルトのままでも OK です。

iTunes アフィリエイト ID は、「追加機能」を押すと出てくる「PHG コード」欄に入力します。

その後、「パーツサンプルを更新」ボタンを押して、生成されたリンクをブログ記事にコピペすれば OK 。

あっという間にこんなリンクが完成します！

白猫テニス

開発元:COLOPL, Inc.

無料

posted with アプリーチ

実は、このリンクは Naifix 用に少しデザインを調整しています。

素の状態だと、このように枠線もなにもない状態です。

これだとなんだか味気ないので、ブログに合わせて少しデザインを変更したいですよね。

では、CSS のコピペで使えるデザインサンプルをいくつかご紹介します。

アプリーチCSSデザイン（カスタマイズ）

アプリーチのスタイルはインラインで指定されているので、外部 CSS から指定を加えるときは !important が必要になることもあります。

以下、WordPress テーマ「 Twenty Sixteen 」をベースに調整していますので、ご利用のテーマに合わせて調整してください。

枠線つきのデザイン

まず、オーソドックスな枠付きデザイン。

CSS はいたってシンプルです。

#appreach-box {
	border: 1px solid #ddd;
	margin: 2em 0;
}

#appreach-box p {
	display: none;
}

WordPress でアプリーチのソースをそのままコピペして使うと <p> が勝手に挿入されるので、CSS で消しています。

border や margin の値はお好みでどうぞ。

背景色つきのデザイン

つづいて、背景色を薄いブルーにしたデザイン。

CSS はただ background-color を追加すれば良いのですが、デザインを調整しやすくするためにいろいろ指定を追加しました。

#appreach-box {
	background-color: #f5fafe;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

#appreach-appname {
	color: #094274;
	font-weight: bold;
}

#appreach-developer {
	margin-bottom: 1.5rem;
}

背景ピンクバージョンはこちら。

#appreach-box {
	background-color: #fdf1fc;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

#appreach-appname {
	color: #a4199d;
	font-weight: bold;
}

#appreach-developer {
	margin-bottom: 1.5rem;
}

濃い背景色＋枠線を少し離したデザイン

背景色を濃くして文字色を白ベースに。そして「posted with アプリーチ」の部分を目立たせたバージョンがこちら。

外側の枠線は box-shadow を使っています。

#appreach-box {
	background-color: #6c1e60;
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px #6c1e60;
	color: #fff;
	margin: 2rem 0;
	padding: 1rem;
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

.appreach-info a {
	color: #fff;
}

#appreach-appname {
	color: #fff;
	font-weight: bold;
}

.appreach-powered {
	background-color: rgba(255, 255, 255, .4);
	display: block !important;
	margin: 1em 0;
	padding: .2em .5em .2em 0;
	text-align: right;
}

背景にうっすらグラデーションをかけたデザイン

上のデザインをベースに背景をグラデーションにし、text-shadow なども使ったパターンがこちら。

linear-gradient でグラデーションをかけているため、コードが長めになります。

#appreach-box {
	background: #ccc;
	background-image: -webkit-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -moz-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: -o-linear-gradient(top,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	background-image: linear-gradient(to bottom,
			rgba(220, 220, 220, 1.0), 
			rgba(240, 240, 240, 1.0) 25%,
			rgba(235, 235, 235, 1.0) 30%,
			rgba(240, 240, 240, 1.0) 36%,
			rgba(235, 235, 235, 1.0) 50%,
			rgba(215, 215, 215, 1.0) 80%,
			rgba(210, 210, 210, 1.0)
			);
	border-top: 1px solid #ccc;
	border-right: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	border-left: 1px solid #ddd;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
	color: #333;
	margin: 2rem 0;
	padding: 1rem;
	text-shadow: -1px 1px 0 rgba(255,255,255,.8);
}

#appreach-box p,
#appreach-box br {
	display: none;
}

.appreach-info {
	overflow: hidden;
}

.appreach-info a {
	color: #333;
}

#appreach-appname {
	font-size: 1.1em;
	font-weight: bold;
}

.appreach-powered {
	background-color: rgba(0, 0, 0, .1);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, .2) inset;
	color: #111;
	display: block !important;
	font-size: 65% !important;
	margin: 1em 0;
	padding: .2em .5em .2em 0;
	text-align: center;
	text-shadow: -1px 1px 0 rgba(255,255,255,.2);
}

.appreach-powered a {
	color: #111;
}

Naifix で使っているのはこのパターンですね。

ちなみにスマホではこんな感じになります。

アプリーチのid・class

CSS を駆使すればもっと凝ったデザインにすることもできます。

アプリーチで使われている <div> の id や class はこのようになっていますので、これをもとにいろいろアレンジしてみてください。

<!--アプリーチ-->
<div id="appreach-box" style="text-align: left;">

  <!-- アプリアイコン -->
  <img id="appreach-image" style="float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;" src="アプリアイコン.jpg" alt="アプリ名" />

  <!-- 右側ブロック -->
  <div class="appreach-info" style="margin: 10px;">

    <!-- アプリ名 -->
    <div id="appreach-appname">アプリ名</div>

    <!-- アプリ開発社名 -->
    <div id="appreach-developer" style="font-size: 80%; display: inline-block; _display: inline;">開発元:<a id="appreach-developerurl" href="https://～" target="_blank" rel="nofollow noopener noreferrer">開発名</a></div>

    <!-- 価格 -->
    <div id="appreach-price" style="font-size: 80%; display: inline-block; _display: inline;">価格</div>

    <!-- Powered by -->
    <div class="appreach-powered" style="font-size: 80%; display: inline-block; _display: inline;">posted with <a title="アプリーチ" href="http://mama-hack.com/app-reach/" target="_blank" rel="noopener noreferrer">アプリーチ</a></div>

    <!-- ダウンロードボタン -->
    <div class="appreach-links" style="float: left;">

      <!-- iTunes -->
      <div id="appreach-itunes-link" style="display: inline-block; _display: inline;">
        <a id="appreach-itunes" href="https://～" target="_blank" rel="nofollow noopener noreferrer"><img style="height: 40px;" src="https://nabettu.github.io/appreach/img/itune_en.png" /></a>
      </div>

      <!-- Android -->
      <div id="appreach-gplay-link" style="display: inline-block; _display: inline;">
        <a id="appreach-gplay" href="https://～" target="_blank" rel="nofollow noopener noreferrer"><img style="height: 40px;" src="https://nabettu.github.io/appreach/img/gplay_en.png" /></a>
      </div>

    </div>
  </div><!-- / .appreach-info -->

  <div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>

</div><!-- / #appreach-box -->

図にするとこうなっています。

まとめ

以上、スマホアプリの紹介に重宝する「アプリーチ」の使い方と CSS デザインでした。

便利なツールはたくさんありますが、いろいろ使うとごちゃごちゃしてしまうので、できるだけブログのデザインに合わせて使いたいですね。

まずはコピペしてみて、お好みでアレンジしてみてください。

それでは、また。