Google PlayとAppStoreのダウンロードリンクを綺麗に横並びにする方法

今回はGoogle PlayとApp Storeのダウンロードリンク(バッジ)を横並びに揃える方法をご紹介します。

wordpressのテキストエディタに、生成した埋め込みコードをそのまま貼ると、

Google Play で手に入れようDownload on the App Store

こんな感じにGoogle Playバッジがドンッと大きく出てきてしまいました。これでは困るので、それぞれのバッジのサイズを調整し、さらに、綺麗に横揃いの形に直していきましょう。

Get it on Google PlayDownload on the App Store

バッジの大きさを調整する

Google Playバッジの大きさを変更


生成したコードの<img>タグの末尾に「width=”○○px”」を追加していきます。○○の中には適当な数字を入れてください。今回はiTunes Link Makerで生成したAppStoreバッジの大きさに合わせるため、「width=”153px”」にします。

【変更前】

<a href=”https://play.google.com/store/apps/details?id=in.redbus.android&amp;hl=ja&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img src=”https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png” alt=”Google Play で手に入れよう” /></a>

【変更後】

<a href=”https://play.google.com/store/apps/details?id=in.redbus.android&amp;hl=ja&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img src=”https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png” alt=”Google Play で手に入れよう” width=”153px” /></a>

これでバッジの大きさが変更されました!簡単ですね。

AppStoreバッジの大きさを変更


まず事前準備をします。Link Makerで生成したコードの黄色とオレンジ色の部分をどこか別のところにコピペします。

<a href=”https://apps.apple.com/us/app/facebook/id284882215?mt=8” style=”display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2019-02-05&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;”></a>

次に各色の部分が対応するように以下のコードに貼り付けます。これでバッジの大きさを指定できるようになりました。

<a href=”①の黄色部分を貼り付け“><img  src=”①のオレンジ色分を貼り付け” alt=”App Storeからダウンロード” /></a>

最後に<img>タグ内の「style=”height:○○px;”」を記入します。○○には指定の大きさを入れましょう。今回はもとの大きさから微調整をし「height:41px;」にしました。

<a href=”①の黄色部分を貼り付け”><img  style=”height: ○○px;” src=”①のオレンジ色分を貼り付け” alt=”App Storeからダウンロード” /></a>

これでAppStoreバッジの大きさの調整は完了です!

Google PlayバッジとAppStoreバッジを横並びにする

前工程で加工したGoogle PlayのコードとAppStoreのコードを、テキストエディタ上で段落付けずに貼り付けるとバッジが横並びになります。

ですが、見て分かる通り綺麗に揃いません。

Get it on Google PlayApp Storeからダウンロード

これはGoogle Playバッジの画像が黒い背景部分だけでないことが理由です。

App Storeからダウンロード

位置を揃えるために、AppStoreバッジの方へmarginを設定しましょう。管理人はmargin: 9.5px 0;で設定しました。

【変更前】

<a href=”https://apps.apple.com/us/app/redbus-rpool/id733712604?mt=8″><img style=”height: 41px;” src=”https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2013-11-04&amp;kind=iossoftware&amp;bubble=ios_apps” alt=”App Storeからダウンロード” /></a>

【変更後】

<a href=”https://apps.apple.com/us/app/redbus-rpool/id73372604?mt=8″><img style=”height: 41px;margin: 9.5px 0” src=”https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2013-11-04&amp;kind=iossoftware&amp;bubble=ios_apps” alt=”App Storeからダウンロード” /></a>

やっと完成です!
Get it on Google PlayApp Storeからダウンロード

簡単にサイズを大きくする方法

まずGoogle PlayバッジかAppStoreバッジのどちらか一方の大きさを調整しましょう。例えば、Google Playバッジのwidthを153px→306px(2倍)に変更します。

<a href=”https://play.google.com/store/apps/details?id=in.redbus.android&amp;hl=ja&amp;pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1″><img src=”https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png” alt=”Google Play で手に入れよう” width=”306px” /></a>

そしたら、AppStoreバッジのコードも変更していきます。先ほどGoogle Playバッジのwidthを2倍にしたので、AppStoreバッジのheightとmarginもそれぞれ2倍にしていきます。height:41px→82px、margin: 9.5px 0 → 19px 0

<a href=”https://apps.apple.com/us/app/redbus-rpool/id733724?mt=8″><img style=”height: 82px; margin: 19px 0” src=”https://linkmaker.itunes.apple.com/en-us/badge-lrg.svg?releaseDate=2013-11-04&amp;kind=iossoftware&amp;bubble=ios_apps” alt=”App Storeからダウンロード” /></a>

そうすると横並びが揃った状態でバッジの大きさが変更できます!

Get it on Google PlayApp Storeからダウンロード
Google Playバッジのwidthを2倍・3倍にしたら、AppStoreバッジのheightとmarginを2倍・3倍に。AppStoreバッジのheight、marginを4倍、5倍にしたら、Google Playバッジのwidthを4倍、5倍に。というように一方を大きくした分だけもう一方も大きくすれば簡単にバッジの大きさを修正できます。