アプリのダウンロードリンクボタンを横に並べて設置する【HTML】
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><rect fill-opacity="0"/></svg>)
ウェブサイト内などにアプリのダウンロードバッジを設置するときのメモ。横並びで揃えて表示させる方法も合わせて紹介。
App Storeのダウンロードバッジ
公式ツールの「App Store Marketing Tools」を使います（Link Makerからこちらに変わったようです）
・まずはアプリを検索
・検索結果一覧からアプリを選ぶ
・Badges and Lockups項目で「Choose Option」「Select Language」を設定
・「Copy Embed」をクリック
バッジのサイズ初期値は幅250px・高さ83pxです。
画像データをダウンロードすることもできます。
HTMLコード
Google Playのダウンロードバッジ
公式ツールの「バッジジェネレーター」を使います。
埋め込みコードを取得する場合の設定は、
・言語: 日本語
・作成形式: デジタル
・ファイル形式: PNG
・Play ストア URLを入力
画像には上下左右それぞれに余白が含まれています。App Storeのバッジと揃えるときは横幅155pxあたりに設定するとよいでしょう。
画像データをダウンロードしたいときは作成形式を「印刷」にします。
バッジ見本 (Google Playのホームが開きます)![Google Play で手に入れよう](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="646" height="250"><rect fill-opacity="0"/></svg>)
横並びでそろえて表示させるには
そのまま並べるとずれる
これはGoogle Playの画像に含まれている余白が原因です。
マージントップを-30pxすると
以下のように良い感じに揃ってくれます（※-30はあくまで目安です。適宜調整してください）
設定方法は、Google Playバッジのimgタグ内に以下を追記します。widthの後ろ部分です。
HTMLコード一気にまとめて作りたい方には
アプリーチというツールがおすすめです。
アプリーチとは
引用元:アプリーチ
iPhone,Androidアプリを紹介するブログパーツを 瞬時に作成することができるツールです。
※Appleのロゴは、米国もしくはその他の国や地域におけるApple Inc.の商標です。App Storeは、Apple Inc.のサービスマークです。
※Google Play および Google Play ロゴは、Google LLC の商標です。
この記事はお役に立てましたか？
はい
いいえ
ヤフーに戻ります