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

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

公式ツールの「App Store Marketing Tools」を使います（Link Makerからこちらに変わったようです）

・まずはアプリを検索
・検索結果一覧からアプリを選ぶ
・Badges and Lockups項目で「Choose Option」「Select Language」を設定
・「Copy Embed」をクリック

バッジのサイズ初期値は幅250px・高さ83pxです。
画像データをダウンロードすることもできます。

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

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 の商標です。