WordPress:「AppleStore」「GooglePlay」の貼り方

実践

はじめに

WordPressでのブログで、オススメアプリの紹介等でアプリストアへのアクセスバナーの貼り方について手順を解説していきます。

以前、アップしたオススメアプリ紹介で実際に貼ったバナーです。

「Apple Store」と「Google Play」それぞれでまとめていきますが、基本的な手順は同じです。

①アプリストアのバナーを取得する

②対象のアプリのURLを取得する

③位置の調整をする

今回は例として「ChageSPOT」の画像を使用していきます。

WordPress | nのあしあと【経済的自由への歩み】
自由に生きる未来への日々の歩み

「Apple Store」のバナーリンクを貼る

手順①「Apple Store」のバナーを取得する

以下がアプリストアバナーのHTMLとなります。

<a href=”ここに手順②のリンクを貼る“>

<img src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg”

alt=”AppStoreで入手” height=”40″ style=”margin:10px 10px;”/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

クラシックエディターでは、テキストにて

ブロックエディタ―では、カスタムHTMLを選択して入力します。

手順②対象のアプリのURLを取得する

まずは、Appleのサービスマーケティングツールhttps://tools.applemediaservices.com/にアクセスします。

今回は「ChageSPOT」を例にしているので、検索ウィンドウに「ChageSPOT」と入力して検索をします。

「No Results:検索結果がありません。」と表示されてしまいました。

「ChageSPOT」は日本のみのアプであるために起こる現象です。

「United States:アメリカ」の部分を「Japan:日本」に変えてあげましょう。

検索結果が表示されました。

アイコンをクリックして次に進みます。

「Apple Store」の画面となります。

下方にある「Short Link」が対象のアプリのURLとなります。

これを先ほどの手順①で入力したHTMLコードの「ここに手順②のリンクを貼る」の部分に貼り付けます。

<a href=”https://apple.co/3pZR4LX“>

<img src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg”

alt=”AppStoreで入手” height=”40″ style=”margin:10px 10px;”/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

テキストとしては上記のようになります。

AppStoreで入手

実際に、クラシックエディターで、テキストからビジュアルへ

ブロックエディターで、カスタムHTMLで入力してプレビューをすると、AppleStoreのバナーリンクが完成します。

「Google Play」のバナーリンクを貼る

手順①「Google Play」のバナーを取得する。

以下がアプリストアバナーのHTMLとなります。

<a href=”ここに手順②のリンクを貼る“>

<img alt=”Google Play で手に入れよう”

src=”https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png”width=”153″/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

クラシックエディターでは、テキストにて

ブロックエディタ―では、カスタムHTMLを選択して入力します。

手順②対象のアプリのURLを取得する

まずは、GooglePlayhttps://play.google.com/storeにアクセスします。

検索ウィンドウから対象のアプリを検索し、アイコンをクリックします。

このページのURLをコピーします。

これを先ほどの手順①で入力したHTMLコードの「ここに手順②のリンクを貼る」の部分に貼り付けます。

<a href=”https://play.google.com/store/apps/details?id=com.chachastation.app“>

<img alt=”Google Play で手に入れよう”

src=”https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png”width=”153″/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

テキストとしては上記のようになります。

Google Play で手に入れよう

実際に、クラシックエディターで、テキストからビジュアルへ

ブロックエディターで、カスタムHTMLで入力してプレビューをすると、AppleStoreのバナーリンクが完成します。

手順③位置の調整をする

先ほどの「AppleStore」と「GooglePlay」のバナーリンクを別々に作成すると、縦に並びます。

<a href=”https://apple.co/3pZR4LX“>

<img src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg”

alt=”AppStoreで入手” height=”40″ style=”margin:10px 10px;”/></a>

<a href=”https://play.google.com/store/apps/details?id=com.chachastation.app“>

<img alt=”Google Play で手に入れよう”

src=”https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png”width=”153″/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

AppStoreで入手 Google Play で手に入れよう

それぞれのHTMLコードをひとつにまとめて作成すると、横に並びます。

<a href=”https://apple.co/3pZR4LX“>

<img src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg”

alt=”AppStoreで入手” height=”40″ style=”margin:10px 10px;”/></a>

<a href=”https://play.google.com/store/apps/details?id=com.chachastation.app“>

<img alt=”Google Play で手に入れよう”

src=”https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png”width=”153″/></a>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

AppStoreで入手 Google Play で手に入れよう

HTMLコードの最初に<center>、最後に</center>を加えると、バナーリンクが中央に寄ります。

<center><a href=”https://apple.co/3pZR4LX“>

<img src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg”

alt=”AppStoreで入手” height=”40″ style=”margin:10px 10px;”/></a>

<a href=”https://play.google.com/store/apps/details?id=com.chachastation.app“>

<img alt=”Google Play で手に入れよう”

src=”https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png”width=”153″/></a></center>

※バージョンなどによって「”」が正しくコピペできない場合があります。その際は該当部分をShiftキー+2キーにて「”」に書き換えてみてください。

AppStoreで入手 Google Play で手に入れよう

まとめ

「Apple Store」「Google Play」ともに、HTMLコードへアプリページへのURLを貼り付けることでバナーが完成します。

コメント

タイトルとURLをコピーしました