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

ウェブサイト内などにアプリのダウンロードバッジを設置するときのメモ。横並びで揃えて表示させる方法も合わせて紹介。
App Storeのダウンロードバッジ
公式ツールの「App Store Marketing Tools」を使います(Link Makerからこちらに変わったようです)
・まずはアプリを検索
・検索結果一覧からアプリを選ぶ
・Badges and Lockups項目で「Choose Option」「Select Language」を設定
・「Copy Embed」をクリック
バッジのサイズ初期値は幅250px・高さ83pxです。
画像データをダウンロードすることもできます。
HTMLコード
<a href="https://apps.apple.com/jp/app/itunes-store/id915061235?itsct=apps_box_badge&itscg=30200" style="display: inline-block; overflow: hidden; border-radius: 13px; width: 250px; height: 83px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/ja-jp?size=250x83&releaseDate=1464739200&h=b488c8877a1de0c0ee752e2cea473eec" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;"></a>
Google Playのダウンロードバッジ
公式ツールの「バッジジェネレーター」を使います。
埋め込みコードを取得する場合の設定は、
・言語: 日本語
・作成形式: デジタル
・ファイル形式: PNG
・Play ストア URLを入力
画像には上下左右それぞれに余白が含まれています。App Storeのバッジと揃えるときは横幅155pxあたりに設定するとよいでしょう。
画像データをダウンロードしたいときは作成形式を「印刷」にします。
バッジ見本 (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の画像に含まれている余白が原因です。
マージントップを-30pxすると
以下のように良い感じに揃ってくれます(※-30はあくまで目安です。適宜調整してください)
設定方法は、Google Playバッジのimgタグ内に以下を追記します。widthの後ろ部分です。
style="margin-top:-30px"
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" style="margin-top:-30px"></a>
一気にまとめて作りたい方には
アプリーチというツールがおすすめです。
アプリーチとは
引用元:アプリーチ
iPhone,Androidアプリを紹介するブログパーツを 瞬時に作成することができるツールです。
※Appleのロゴは、米国もしくはその他の国や地域におけるApple Inc.の商標です。App Storeは、Apple Inc.のサービスマークです。
※Google Play および Google Play ロゴは、Google LLC の商標です。
この記事はお役に立てましたか?
いいえ
ヤフーに戻ります