アプリのダウンロードリンクボタンを横に並べて設置する方法【iPhone・Android】

ウェブサイト内などにアプリのバッジを設置する方法メモ。横並びで揃えて表示させる方法も合わせて紹介。

App Storeのダウンロードバッジ

公式ツールの「リンクメイカー」を使います。

設定することは、
・アプリ名かURLを入力
・ストア国: 日本
・メディアタイプ: App

検索結果一覧からアプリを選ぶと、埋め込みコードの取得画面に変わります。

バッジのサイズ初期値は幅135px・高さ40pxです。

また、画像データ自体をダウンロードすることもできます。

バッジ見本 (iTunes Storeが開きます)

HTMLコード
<a href="https://apps.apple.com/jp/app/itunes-store/id915061235?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2016-06-01&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a>

Google Playのダウンロードバッジ

公式ツールの「バッジジェネレーター」を使います。

埋め込みコードを取得する場合の設定は、
・言語: 日本語
・作成形式: デジタル
・ファイル形式: PNG
・Play ストア URLを入力

画像には上下左右それぞれに余白が含まれています。App Storeのバッジと揃えるときは横幅を155pxあたりにしておくのがおすすめです。

画像データをダウンロードしたいときは作成形式を「印刷」にします。

バッジ見本 (Google Playのホームが開きます)

Google Play で手に入れよう

HTMLコード
<a href="https://play.google.com/store/#?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img alt="Google Play で手に入れよう" src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" width="155"></a>

横並びでそろえて表示させるには

そのまま並べるとずれる

これはGoogle Playの画像に含まれている余白が原因です。

Google Play で手に入れよう

マージントップを-30pxすると

以下のように良い感じに揃ってくれます(※-30はあくまで一つの目安です。適宜調整していただいて構いません)

Google Play で手に入れよう

設定方法は、Google Playバッジのimgタグ内に以下を追記します。widthの後ろ部分です。

style="margin-top:-30px;"
HTMLコード
<a href="https://apps.apple.com/jp/app/itunes-store/id915061235?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2016-06-01&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a><a href="https://play.google.com/store/#?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img alt="Google Play で手に入れよう" src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" width="155"<!--追加ここから--> style="margin-top:-30px;"<!--ここまで-->></a>

一気にまとめて作りたい方には

アプリーチというツールがおすすめです。

アプリーチとは
iPhone,Androidアプリを紹介するブログパーツを 瞬時に作成することができるツールです。

引用元:アプリーチ

※Appleのロゴは、米国もしくはその他の国や地域におけるApple Inc.の商標です。App Storeは、Apple Inc.のサービスマークです。
※Google Play および Google Play ロゴは、Google LLC の商標です。

コメントを残す