App StoreとGoogle Playのダウンロードバッジを横並べでズレずに表示させるには？

解決策は2つあります

01｜ネガティブマージンを使う方法

Google Playのバッジにマイナス値のmargin-topを指定して引き上げる作戦です。いろいろ試してみましたが、-6か-7pxあたりがちょうどよい感じです。下の見本は-7pxにしています。

HTML

<a href="https://apps.apple.com/jp/app/itunes-store/id915061235?itsct=apps_box_badge&amp;itscg=30200"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/ja-jp?size=250x83&amp;releaseDate=1464739200&amp;h=b488c8877a1de0c0ee752e2cea473eec" alt="Download on the App Store" style="height:50px"/></a>
<a href="https://play.google.com/store/#?pcampaignid=MKT-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 で手に入れよう" style="height:65px;margin-top:-7px"/></a>

02｜Flexboxを使う方法

divタグで囲いdisplay:flexとalign-items:centerを指定します。こちらは逆にApp Storeのバッジが下がります。

HTML

<div class="d-flex align-items-center">
  <a href="https://apps.apple.com/jp/app/itunes-store/id915061235?itsct=apps_box_badge&amp;itscg=30200"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/ja-jp?size=250x83&amp;releaseDate=1464739200&amp;h=b488c8877a1de0c0ee752e2cea473eec" alt="Download on the App Store" style="height:50px"/></a>
  <a href="https://play.google.com/store/#?pcampaignid=MKT-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 で手に入れよう" style="height:65px"/></a>
</div>

CSS

.d-flex {
  display: flex;
}
.align-items-center {
  align-items: center;
}

App Storeのダウンロードバッジを作るには？

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

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

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

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

Google Playのダウンロードバッジを作るには？

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

埋め込みコードを取得する場合の設定は、

• 言語：日本語
• 作成形式：デジタル
• ファイル形式：PNG
• Play ストア URLを入力

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

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

もっと楽ちんに作りたい方へ

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

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