スポンサーリンク

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

ブログ

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

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

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

スポンサーリンク

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

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

Google Play

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

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

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

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

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

Language(言語)

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

File Type(ファイルタイプ)

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

Play Store URL

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

Step3コードをコピー

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

App Store

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

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

Step2ダウンロードボタンのコードを取得

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

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

スポンサーリンク

大きさを調整

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

imgタグにwidth="153″を追加する
<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のすぐあとに入れています。

結耶
結耶

これでApp Storeのボタンと同じ大きさになると思います。

横に並べる

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

Google Play で手に入れよう
きらり
きらり

あれれ?横に並んだけど…縦位置が揃ってないよ。

結耶
結耶

そうだね。今度は縦の位置を合わせるためのCSSを追加するね!

位置の調整をする

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

App StoreボタンにCSSを追加する
<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つです。

position:relative; top:15px;

変更後

<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>
Google Play で手に入れよう
結耶
結耶

これで綺麗に横に並ぶと思います。縦位置は当サイトに合わせてあります。ご自分のサイトに合わせる場合は「top」の数値を調整してください。

もう少し簡単に?

きらり
きらり

ねぇ。これダウンロードを設置するたびに追加しなきゃいけないよね。毎回入れるの面倒だし忘れそうだよ!

結耶
結耶

そうだね~。じゃぁ、私がやってる方法を書いておくね。

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

分かりやすく改行してありますが、改行しないで続けて記述してください。

HTML
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 Play で手に入れよう
きらり
きらり

なるほどね!これなら忘れる心配もないね!使わせてもらおう!

結耶
結耶

ひとつ注意をしておくと…Google Storeボタンを前、App Storeボタンを後ろにしないとCSSの意味が無くなるよ(^^;)w

最後に

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

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

以上です。

スポンサーリンク

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。