Google PlayストアとAppStoreのバナーリンクの作り方

みなさんこんにちは、ねるです。

 

この記事は、

「ブログを始めたけど、バナーリンクの出し方が分からない」

という人のために書いてます。

 

目標は、

Google Play で手に入れよう

  です。

目次

 

はじめに

はてなブログで記事を作成すると、編集サイドバーの「iTunes商品紹介」からこんな感じにiTunes商品のリンクを出すことが出来ます。

Studyplus

Studyplus

  • Studyplus Inc.
  • 教育
  • 無料

この機能は確かに便利なんですが、残念なことに、はてなブログにはGoogle Playストアへのリンクを出す機能はありません。 

 

そこで、Google Play StoreでURLをそのままコピーして貼り付けるとこうなってしまいます。

play.google.com

App Storeのリンクと雰囲気が違いますね。これだと、統一感もないですし、何より

「もっとコンパクトに」両方のストアのリンクを出したいですよね。

 

この記事を見たらすぐにできるようになります。

超丁寧に説明していくので、安心してください。

誰でも真似できます。ぜひ一緒にやりながら見てください。

 

Google Play アプリのリンクの作り方

まずは、Google Play Store内であなたがリンクを作りたいアプリのページに移動して、URLをコピーします。

f:id:nerumaga:20180614110121p:plain

 

 ここから、Google Play バッジというサイトに移動します。

Google Play バッジ – Google

 

f:id:nerumaga:20180614110635p:plain

↑こんな感じのサイトです。

 

下のほうにいくと、「バッジを入手する」というのがあるので、Play ストア URLに先ほどコピーしたURLを貼り付けます。

(画像でいうと、UTMキャンペーンの下です。)

f:id:nerumaga:20180614110747p:plain

 

 

 右側にURLを貼ると、

マーケティングにこのHTMLバッジを含めます。」の下に、自動的に⇓の画像のような長いリンク(?)が出てくるので、それをコピーします。

f:id:nerumaga:20180614111758p:plain

僕は、はてなブログの見たまま編集を使っているのですが、そこで貼り付けを行っても、このように₍⇓₎そのままの状態で貼り付けられてしまいます。

<a href='https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'> alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png'/>

 

なのでHTML編集を使います。

 HTML編集でさっきのリンクを貼り付けると、

Google Play で手に入れよう

見事、バナーを貼り付けることができました。

めでたし、めでたし。

 

……嘘です。失礼しました(笑)

「バナー大きすぎるだろ!!」ってなりますよね(笑)

さすがにこのままでは終われません。

 

バナーのサイズを変える方法(Google Play

<a href='https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'> alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png'/>

 ここに一工夫いれます。

<a href='https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'> alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png'width="200"/></a>

 最後の方に、「width="〇〇"」を入れるだけです。

※〇〇で大きさを調節することが出来ます。

 すると、

Google Play で手に入れよう  

こんな風に小さくなります。

ようやく完成ですね。

 

「バナーのリンクを真ん中に出したい」という人は

<center><a href='https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'> alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png'width="200"/></a></center>

 

 <center> </center>で囲みます。

すると、

Google Play で手に入れよう

こんな風に中央に貼り付けられます。

※このバナーを貼ってから、「見たまま編集」で、続けて改行すると、「中央ぞろえ」のまま編集が再開されます。「HTML編集」に移動して<p>〇〇</p>と打つと新しい行に移動できます。

 

 

App Store アプリのリンクの作り方

Google Playアプリとやることはあまり変わらないので、サクサクいきますね。

 

iTunes Link Maker というサイトに移動します。⇓

20180615100649

 

 最初はストア国⇒米国、メディアタイプ⇒Apple Musicになっているので、ストア国⇒日本、メディアタイプ⇒Appに変更します。

 

そうしたら、リンクを作りたいアプリ名を検索し、選択します。

すると、⇓のようなページに移動するので、埋め込みコードをコピーします。

20180615100652

はてなブログのHTML編集に戻り、貼り付けます。

 

 

 

App Storeの場合、HTMLに貼り付けると、ちょうどいい感じのサイズになるので楽ちんです。(もちろん、width設定で大きくすることもできますし、centerを使えば中央に寄せることもできます)

 

おわりに

いかがでしたでしょうか?

僕も最初はやり方が分からず苦戦しましたが、やっとうまく作ることが出来るようになりました。

みなさんの助けになれたなら幸いです。

ありがとうございました☺

 

<追記>

記事トップにあるGoogle PlayストアのリンクとApp storeのリンク、若干位置がずれてますよね。

その解消方法についてはこちらの記事で書いているのでぜひ一緒にお読みください。

☟☟☟

nerumaga.hatenablog.jp