Google PlayとAppStoreのダウンロードボタンを綺麗に並べるには？

2020年5月10日2023年5月28日ブログ

ブログなどでアプリを紹介するときにGoogle PlayやApp Storeのダウンロードボタンを掲載すると思います。

しかしGoogle PlayとApp Storeではバナーの大きさが違います。

できれば大きさを合わせて綺麗に並べたいですよね。そこで今回はGoogle PlayとApp Storeのダウンロードボタンの作成方法と綺麗に並べる方法を書きたいと思います。

ダウンロードボタンを作成

Google PlayとApp Storeのダウンロードボタンを作成します。

Google Play

Google Playで紹介するアプリのページのURLをコピーしてください。

Google Play Badgesに移動してください。

Google Play Badgesが表示されたら少し下に「バッジを生成する」という項目があるので必要な項目を設定します

URLを入力するとバナーのサンプルの下にコードが表示されますので、そのコードをコピーして、記事のダウンロードボタンを設置したいところに貼り付けてください。

App Store

Link Makerに移動してください。

丈夫にある検索枠に「アプリ名」を入力して、その下の「国または地域」「メディアタイプ」を選択してください。

検索結果が下に出るので紹介するアプリをクリックしてアプリページを表示して、少し下にある「埋め込みコード」があるのでコピーして記事に貼り付けてください。

大きさを調整

上で取得したコードをそのまま貼るとGoogle Playのダウンロードボタンが大きいので調整します。(App Storeのダウンロードボタンはそのまま使います)

<a href='アプリページのURL'>
    <img alt='Google Play で手に入れよう' src='ダウンロードボタン画像のURL'>
</a>

Google Play Badgeで取得したコードは上記のようになっています。2行目のimgタグの中にwidth="153″を追加してください。

変更後

<a href='アプリページのURL'>
    <img width="153" alt='Google Play で手に入れよう' src='ダウンロードボタン画像のURL'>
</a>

※わかりやすくするためにimgのすぐあとに入れています。

横に並べる

ボタンを横に並べるにはGoogle PlayボタンとApp Storeのボタンのコードを横に並べて貼り付ければ横に並びます。

位置の調整をする

位置の調整をするためのコードを追加します。(ここではApp Storeのボタンの位置を下げます。

<a href="https://apps.apple.com/jp/app/wordpress/id335703880?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2009-10-29&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a></div>

上記のApp Storeボタンのコードの中に「style="～"」CSS指定をしている部分があるので、この中に位置を下げるCSSを追加します。追加するのは以下の2つです。

変更後

<a href="https://apps.apple.com/jp/app/wordpress/id335703880?mt=8" style="position:relative; top:15px; display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2009-10-29&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;"></a></div>

もう少し簡単に？

<div class="download_btn">
    <!--ここにGoogle Store--><!--ここにApp Store-->
</div>

div.download_btn{
    margin:0;
    padding:0;
}

/*Google Playボタンの大きさ*/
div.download_btn a:first-child > img{
    width:153px;
}

/*App Storeボタンの位置*/
div.download_btn > a:last-child{
    position:relative;
    top:15px;
}

CSSを設定しておき、HTMLコードを「Quicktag」や「Tiny MCE Template」、Luxeritasの方は定型文などに登録して、使いたいときに「<!–ここにGoogle Store–>」「<!–ここにApp Store–>」のところにそれぞれのコードを貼り付けるだけになります。

CSSで大きさも位置も指定してあるので取得したコードをそのまま貼り付けるだけでOK！

最後に

今回は「GoogleとAppleのダウンロードボタンを綺麗に並べる方法」について書いてみました。

いろいろなアプリを紹介している方は多いと思います。ダウンロードボタンを設置するときに参考にしてみてください。

以上です。