目次
はじめに
WordPressでのブログで、オススメアプリの紹介等でアプリストアへのアクセスバナーの貼り方について手順を解説していきます。
以前、アップしたオススメアプリ紹介で実際に貼ったバナーです。
「Apple Store」と「Google Play」それぞれでまとめていきますが、基本的な手順は同じです。
①アプリストアのバナーを取得する
②対象のアプリのURLを取得する
③位置の調整をする
今回は例として「ChageSPOT」の画像を使用していきます。
「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キーにて「”」に書き換えてみてください。
テキストとしては上記のようになります。
実際に、クラシックエディターで、テキストからビジュアルへ
ブロックエディターで、カスタム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キーにて「”」に書き換えてみてください。
テキストとしては上記のようになります。
実際に、クラシックエディターで、テキストからビジュアルへ
ブロックエディターで、カスタム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キーにて「”」に書き換えてみてください。
それぞれの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キーにて「”」に書き換えてみてください。
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キーにて「”」に書き換えてみてください。
まとめ
「Apple Store」「Google Play」ともに、HTMLコードへアプリページへのURLを貼り付けることでバナーが完成します。
コメント