スポンサーリンク

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

2020年5月10日ブログ

UUPDATE
  • 2023年08月20日App Storeボタンのコード取得先、取得方法など修正及び内容の書き換えをしました。

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

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

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

スポンサーリンク

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

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

Google Play

Step1アプリページのURLをコピー

Googleのダウンロードボタンを作成するためには先に紹介するアプリのページのURLをコピーする必要があります。

Google Playに移動して上部にある検索で紹介するアプリを検索してアプリのページのURLをコピーしてください。

Step2ダウンロードボタン(リンクのコードを取得)

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

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

Language(言語)

バナー(ボタン)に表示する言語を選択してください。

File Type(ファイルタイプ)

バナー(ボタン)の画像形式を選択してください。

Play Store URL

Step1でコピーしたアプリページのURLを貼り付けてください。

Step3コードをコピー

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

App Store

2023年8月14日

App Storeのダウンロードボタン取得は「Link Marker」から「App Store Marketing Tools」になりました。

コード取得方法も変わっています。

Stepダウンロードボタンを作成する

App Store Marketing Toolsに移動してください。

Step2紹介するアプリを検索する

上部にある検索枠に「アプリ名」を入力して検索してください。

検索結果が表示されryので紹介するアプリをクリックしてください。

Step3コードを取得(コピー)する

「埋め込みコードをコピー」をクリックしてください。コピーしたらコードを記事に貼り付けてください。

横に綺麗に並べるには?

2023年8月20日

App Storeのダウンロードボタンのサイズが変わっているため以前のようにGoogle Playボタンのサイズを修正するだけでは上手く表示できないため書き直しました。

上で取得したコードをそのまま貼って表示すると下の画像のようになってしまいます。

Google Playボタンがかなり大きく、App Storeボタンも以前に比べて大きくなっています。

以前はGoogle Playのサイズ(大きさ)を直して、App Storeボタンの位置を直すだけで綺麗に並んだのでやってみると下のようになってしまいました。

以前よりApp Storeボタンが大きくなっているため綺麗に並びません(^^ ;

綺麗に並べるためいろいろやってみましたが、以前よりいろいろCSSを追加する必要があります。ボタンを設置するたびにいくつもCSSを追加するのは大変なので簡単に設置できるように考えてみました。

綺麗に並べる方法

WordPressをお使いの方

設置する度にCSSを追加しなくてもいいように以下のようにしてみました。

HTML
<div class="download_btn">
    <!--ここにGoogle Store--><!--ここにApp Store-->
</div>
CSS
/*--------------------
  ダウンロードボタン
--------------------*/
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)のアプリページになっていますよ。

Google Play で手に入れよう Download on the App Store

(HTML)Google PlayボタンとApp Storeボタンのコードの設置位置

各ボタンのコードをあまりいじりたくなかったのでCSSでの指定をGoogle Playボタンを「a:first-childApp Storeボタンを「a:last-childで指定しています。

そのため取得したコードをGoogle Playボタンが前、App Storeを後ろになるように貼り付けてください。

App Storeボタンのコードの中のサイズ指定を無効化

取得したコードを触らないようにしたいのですが、App Storeボタンのコードの中のサイズ指定部分を消去するかコメントアウトさせないとCSSで指定したサイズにならないため、App Storeボタンのコードの中の最後の方にあるwidthとheightを以下のどちらかの方法で無効化してください

(CSS)ボタンのサイズ

ボタンのサイズはGoogle Playボタンはwidth(横幅) 165px、height(高さ) 64pxApp Storeボタンをwidth(横幅) 148px、height(高さ) 49px にしてあります。

サイズを変更する場合は横幅・高さのバランスよくを崩さないようにしてください。

上記のサイトでサイズを調べることがだできます。

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やアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM