Google PlayとAppStoreのダウンロードボタンを綺麗に並べるには？
- 2023年08月20日App Storeボタンのコード取得先、取得方法など修正及び内容の書き換えをしました。
ブログなどでアプリを紹介するときにGoogle PlayやApp Storeのダウンロードボタンを掲載すると思います。
しかしGoogle PlayとApp Storeではバナーの大きさが違います。
できれば大きさを合わせて綺麗に並べたいですよね。そこで今回はGoogle PlayとApp Storeのダウンロードボタンの作成方法と綺麗に並べる方法を書きたいと思います。
ダウンロードボタンを作成
Google PlayとApp Storeのダウンロードボタンを作成します。
Google Play
Googleのダウンロードボタンを作成するためには先に紹介するアプリのページのURLをコピーする必要があります。
Google Playに移動して上部にある検索で紹介するアプリを検索してアプリのページのURLをコピーしてください。
Google Play Badgesに移動してください。
https://play.google.com/intl/en_us/badges/Google Play Badgesが表示されたら少し下に「バッジを生成する」という項目があるので必要な項目を設定します
バナー(ボタン)に表示する言語を選択してください。
バナー(ボタン)の画像形式を選択してください。
Step1でコピーしたアプリページのURLを貼り付けてください。
URLを入力するとバナーのサンプルの下にコードが表示されますので、そのコードをコピーして記事に貼り付けてください。
App Store
App Storeのダウンロードボタン取得は「Link Marker」から「App Store Marketing Tools」になりました。
コード取得方法も変わっています。
App Store Marketing Toolsに移動してください。
https://tools.applemediaservices.com/ja-jp/app-store/
上部にある検索枠に「アプリ名」を入力して検索してください。
検索結果が表示されryので紹介するアプリをクリックしてください。
「埋め込みコードをコピー」をクリックしてください。コピーしたらコードを記事に貼り付けてください。
横に綺麗に並べるには？
App Storeのダウンロードボタンのサイズが変わっているため以前のようにGoogle Playボタンのサイズを修正するだけでは上手く表示できないため書き直しました。
上で取得したコードをそのまま貼って表示すると下の画像のようになってしまいます。
Google Playボタンがかなり大きく、App Storeボタンも以前に比べて大きくなっています。
以前はGoogle Playのサイズ(大きさ)を直して、App Storeボタンの位置を直すだけで綺麗に並んだのでやってみると下のようになってしまいました。
以前よりApp Storeボタンが大きくなっているため綺麗に並びません(^^ ;
綺麗に並べるためいろいろやってみましたが、以前よりいろいろCSSを追加する必要があります。ボタンを設置するたびにいくつもCSSを追加するのは大変なので簡単に設置できるように考えてみました。
綺麗に並べる方法
WordPressのブロックエディタを使って綺麗に並べる方法も紹介しています。
https://kirari-yums.net/post-15873/WordPressをお使いの方はこちらの記事を参考にしてください。
設置する度にCSSを追加しなくてもいいように以下のようにしてみました。
<div class="download_btn">
<!--ここにGoogle Store--><!--ここにApp Store-->
</div>/*--------------------
ダウンロードボタン
--------------------*/
div.download_btn{
margin:0;
padding:0;
vertical-align:top;
position:relative;
}
/*Google Playボタンのサイズ*/
div.download_btn a:first-child > img{
width:165px;
height:64px;
}
/*App Storeボタンの位置調整*/
div.download_btn > a:last-child{
position:absolute;
top:8px;
margin-left:8px;
}
/*App Storeボタンのサイズ*/
div.download_btn > a:last-child > img{
width:148px;
height:49px;
}
上記のコード取得を使って実際に設置したものがこれ↓です。
リンク先はX(旧Twitter)のアプリページになっていますよ。
(HTML)Google PlayボタンとApp Storeボタンのコードの設置位置
各ボタンのコードをあまりいじりたくなかったのでCSSでの指定をGoogle Playボタンを「a:first-child」、App Storeボタンを「a:last-child」で指定しています。
そのため取得したコードをGoogle Playボタンが前、App Storeを後ろになるように貼り付けてください。
App Storeボタンのコードの中のサイズ指定を無効化
取得したコードを触らないようにしたいのですが、App Storeボタンのコードの中のサイズ指定部分を消去するかコメントアウトさせないとCSSで指定したサイズにならないため、App Storeボタンのコードの中の最後の方にあるwidthとheightを以下のどちらかの方法で無効化してください。
(CSS)ボタンのサイズ
ボタンのサイズはGoogle Playボタンはwidth(横幅) 165px、height(高さ) 64px。App Storeボタンをwidth(横幅) 148px、height(高さ) 49px にしてあります。
サイズを変更する場合は横幅・高さのバランスよくを崩さないようにしてください。
http://www.n1-sitemaker.com/resize/上記のサイトでサイズを調べることがだできます。
App Storeボタンの位置を調整
(CSS) ♪20行目のtopはApp Storeボタンの上からの位置を指定しています。お使いのブログやWebページによって違うかもしれないのでここで調整してください。
21行目のmargin-leftはGoogle Playボタンとの間の余白を指定しています。
これで綺麗に並ぶと思います。サイズや位置は使用しているブログやWebサービスに合わせて変更してくださいね。
ポチップ
iPadとAndroidスマホの充電に使っているType-C to Type-Cケーブルです。
ケーブルが柔らかいので断線しにくい丈夫なケーブルです！
最後に
今回は「GoogleとAppleのダウンロードボタンを綺麗に並べる方法」について書いてみました。
いろいろなアプリを紹介している方は多いと思います。ダウンロードボタンを設置するときに参考にしてみてください。
(2023年08月19日 追記) App Storeのコード取得先やぼボタンのサイズが変わってしまtていtため内容を変更しました。
コード取得先が変わっているせいかLink Markerで作成sたコードでのダウンロードボタンが表示されkななtいてます。なので修正の際に上記のHTML・CSSを使ってみてください。
以上です。
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
