WordPress

【3分でできる】WordPressにスマホのアプリリンクを貼る方法

WordPressでアプリのリンクを貼りたいのですが、やり方が分かりません。あとアプリのリンクを貼って稼ぐことってできますか?

といった悩みにお答えします。

 本記事の内容

  • 【3分でできる】WordPressでスマホのアプリリンクを貼る方法
  • スマホアプリに強いASP3選

 本記事の信頼性


Ryota(@ryotablogger

WordPressでは、アプリのリンクを貼って紹介する事もできます。

とはいえ、「WordPressにスマホのアプリリンクの貼り方が分からない。」「アプリリンクで稼ぐ方法を知りたい!」と思っている方は多いのではないでしょうか?

今回は、WordPressにスマホのアプリリンクを貼る方法とアプリリンクで稼ぐやり方について解説していきます。

本記事を読むことにより、WordPressにスマホのアプリリンクを超簡単に貼る事ができて、ついでに稼ぐこともできます。

スマホアプリの紹介をしたい方は必見です。

3分でできる内容となっているので是非参考にしてみてください。
りょーた

【3分でできる】WordPressでスマホのアプリリンクを貼る方法

WordPressでスマホアプリのリンクを貼る方法は、以下の2つになります。

  1. App StoreとGoogle Playを一緒に貼る【アプリーチ】
  2. App StoreとGoogle Playを別々に貼る

1つずつ解説していきます。

その①:App StoreとGoogle Playを一緒に貼る【アプリーチ】

まずは、アプリーチにアクセスしてください。

≫ アプリーチ公式サイト

ブログ作成パーツの下に空欄があるので、リンクを作成したいスマホアプリのタイトルを入力しましょう。(今回は「MindMeister」で解説していきます。)

入力できたら、「検索」をクリックしてください。

上記のように表示されればOKです。

少し下にスクロールすると、上記の図のようにカスタマイズができます。

  1. 表示リンク
  2. タイトル
  3. アイコン画像
  4. 開発元
  5. 価格
  6. target="_blank"の付与

上記を必要に応じて変更してみましょう。

今回は「target="_blank"の付与」のみ、「あり」に変更して進めていきます。(「あり」にすることで、新規ページでリンクを開くことができます。)

設定が完了したら、さらに下にスクロールしましょう。

すると、

  • 新コード
  • 旧コード

上記の2種類のコードが表示されているので、コピーして投稿ページに貼り付けていきます。

今回は、簡単な「旧コード」を使っていきます。

WordPress管理画面より、「投稿」→「新規追加」または「投稿一覧」から貼り付ける記事を選択。

「テキスト」に切り替えて、貼り付ければ完了です。

それぞれのコードの表示例は、以下になります。

 旧コード

マインドマッピング - MindMeister

マインドマッピング - MindMeister
開発元:MeisterLabs
無料
posted withアプリーチ

 新コード

マインドマッピング - MindMeister

マインドマッピング - MindMeister

MeisterLabs無料posted withアプリーチ

 CSS
.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;
}

ちなみに、旧コードはパソコンで見る場合、横モニターだと若干デザインがくずれてしまうので、気になる方は新コードを使うのがおすすめです。

また、新コードを利用する場合には、CSSの追記が必要とありますが、デザイン的になくても問題ないのでお好みで追記しましょう。

これでApp storeとGoogle Playのアプリリンクを貼ることが出来ました!
りょーた

その②:App StoreとGoogle Playを別々に貼る

App StoreとGoogle Playのリンクを別々に貼る場合、以下の2つのサイトからそれぞれリンクを作成します。

  1. App Store:iTunes Link Maker
  2. Google Play:Google Play Badges

最初に、App Storeのリンクを作っていきます。

 App Storeのリンクを作る

まずは、iTunes Link Makerにアクセスしましょう。

≫ iTunes Link Maker

「App Store」のアイコンをクリックしてください。

上記の画面に切り替わるので、空欄にアプリの名前を入力しましょう。

入力したら、Enter または 虫眼鏡アイコンをクリックしてください。

上記のページに変わるのですが、デフォルトで「United States」となっているので、これを「Japan」に変更します。

Japanに変更することができたら、WordPressに貼り付けるアイコンをクリックしてください。

以下の5種類のリンクが作成されます。

  1. Content Link:URLのリンク(長文)
  2. Short Link:URLのリンク(短文)
  3. App Icon:アプリのアイコン
  4. Badges and Lockups:App Storeのアイコン
  5. QR Code:QRコード

テキストにリンクを貼るなら、Content Link または Short Linkを使いましょう。

今回は、「Badges and Lockups」を使っていきます。

アイコン下にある、「Copy Embed」をクリックしてください。

これで、生成されたコードをコピーすることができます。

WordPressの投稿記事のテキストモードに切り替えて、貼り付ければ完了です。

 html
<a href="https://apps.apple.com/us/app/mind-mapping-mindmeister/id381073026?itsct=apps_box&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-US?size=250x83&amp;releaseDate=1279756800&h=448c8531c36a5ce8aa4927d3f4ca2a94" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;"></a>

またボタンの大きさを変更する場合には、上記の赤文字の数値(2か所ずつ)変更すればOKです。

  • width:横幅
  • height:高さ

※数値は2箇所ずつ変更しないと、リンクのクリックできる範囲と画像の大きさが一致しないので気を付けてください。

これでApp Storeのリンクが完成です!
りょーた

 Google Playのリンクを作る

まずは、リンクにしたいアプリのURLを調べていきます。

≫ Google Play公式サイト

Google Play公式サイトにアクセスしたら、上の検索窓でアプリの名前を検索しましょう。

上記のようにアプリが表示されるので、アイコンをクリックしてください。

すると、アプリのページに移動するので、そのページのURLをどこかにメモしておきましょう。

アプリのURLが調べ終わったら、次はリンク作成のページにアクセスしてください。

≫ Google Play Badges

下にスクロールして、「Language:」を「Japanese」に変更しましょう。

次に、「Play Store URL:」という項目があるので、そこの空欄に先ほどメモしておいたURLを貼り付けます。

すると、「Include this HTML badge in your marketing:」という項目に、HTMLコードが出力されるので、コピーしておきましょう。

最後に表示させたいページにテキストモードで貼り付ければ完了です。

お疲れ様でした!これでApp StoreとGoogle Playのリンクを別々に貼ることができましたね!
りょーた

スマホアプリに強いASP3選

アプリリンクを紹介する場合には、アプリ系ASPを経由すれば稼ぐことも出来るので、併せて登録しておきましょう。

  1. smart-c
  2. Zucks Affiliate
  3. seedApp
りょーた
ASPについては、以下で詳しく解説しているのでチェックしてみてください!
あわせて読みたい
アフィリエイト初心者におすすめASPはこの5社【全14社から厳選】

続きを見る

まとめ

今回は、【3分でできる】WordPressにスマホのアプリリンクを貼る方法といった内容を解説しました。

もう一度おさらいすると、

  1. App StoreとGoogle Playを一緒に貼る【アプリーチ】
  2. App StoreとGoogle Playを別々に貼る

 

-WordPress