GooglePlayバッジのサイズをAppStoreと揃える方法

Sponsored link

モバイルでApp storeのバッジより小さく表示される…

先日アップした記事のダウンロードバッジのレイアウトで手こずり、公開するのが遅れました。その記事はこちら↓

ゲーム感覚で単語を覚えよう!フランス語アプリ3選
が充実してて、外出先でも隙間の時間を利用して学習できるのが嬉しいですね。私は普段のテキストでの勉強の他に、PodcastやYoutubeを利用しています。この...

Google Playのバッジをサイズ変更したら、下の画像のようなことになってしまい、修正するために何時間も割いてしまいました。

分かります?右のアイコンだけポキっと折れた鉛筆の芯のようになっている…。ナニコレ…か、かっこ悪すぎる…

ネット徘徊しながら、きれいに並べる方法をいろいろ試しましたが、Google Playのバッジはあらかじめ周りに余白(不透明部分)があるため、縮小すると(当たり前ですが)肝心のバッジも小さくなってしまうんですね。余白があるせいで、AppleのApp Storeのバッジとも上下の位置が合わない…。さて、どうしたものか。

余白の削除は禁止なので注意

参考:Google Play バッジに関するガイドライン 

Sponsored link

解決策:クラスをつけて子テーマでCSSを指定

コーディングは苦手なので、原始的にやってみることに。方法は「テーブル配置+CSS」です。

まず投稿ページのビジュアルエディターで、バッジをテーブルに収めます。そのままだと枠線が残るので、表/セル/行のプロパティを開き、各枠線の色を#fffff(または背景と同じ色)にすると消えるはずです。

次にテキストエディターを開き、Google Playバッジのhtmlタグを確認。href=”https://play.google.com/apps”の前に以下のクラスを追加。ここでは分かりやすく.googleplay-badgeとします。

<a class="googleplay-badge" 
href="https://play.google.com/store/apps/details?
id=com.funeasylearn.french6000&amp;pcampaignid=
MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1">

style.cssの中に以下のコードを追加。*子テーマがある場合は、そこのstyle.cssに記述してください。

次に外観→テーマエディターを選択。子テーマのstyle.cssを開き、CSSを追加します。今回はディスプレイサイズ768p以下で起きた現象でしたが、HTMLに個別で記述していくのは時間がもったいないので、全ディスプレイサイズで反映するようにします。

.googleplay-badge {
 width: 155px; 
 height: 60px; 
}

App Storeバナーに合わせてwidthを指定する人が多いかと思うんですが、実際に表示すると、一回り小さくなってしまうんです。なぜかというと… 「余白のせい」。

Sponsored link

サイズ調整が必要

それぞれの初期のサイズをあらためて確認すると、

Google:646 × 250px

余白を含むので、実際は564 × 168px。せっかくなので実物を下に。デカッ!

Google Play で手に入れよう

下の画像は不透明部分と実際のバッジの部分を分かりやすくしたものです。グリーンの部分が「余白」。水色の破線が引かれているところが余白を抜いたサイズです。つまりバッジの実寸。

※この画像は実際のバッジサイズとは異なる。

対して、App Store:135 × 40px

iTunes Link Makerでバナーを作成時点でサイズ指定がされているため、サイズ指定を無くすと表示されない仕様。バナーの周りに余白はありません。

Google Playのバッジは余白込みの画像なので、App Storeのバナーに合わせようとすると当然サイズが合いません。だからバッジの実寸を計算して、Appleに合わせる必要があります。

バナーサイズを揃える

サイズ調整が必要なことがわかったところで、Google PlayをApp Storeのバナーに合わせます。GoogleをApp Storeに合わせると、バナーの文字がボケるのですが、今回はバナーサイズの統一を優先

最初にApp Store :135× 40pxになっていることを確認した後、

<div class="itunes">
<a style="display: inline-block; overflow: hidden; 
background: url('https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2015-05-17&amp;kind=iossoftware&amp;bubble=ios_apps')
no-repeat; width: 135px; height: 40px;"

次にGoogle :155 × 60pxに設定。これで実際の表示は135× 40px。

すでにstyle.cssでこのプロパティは指定済なので、初期のままでもサイズが揃っているはず。

<img class="aligncenter" src="https://play.google.com/intl/en_us/badges/images/generic/ja_badge_web_generic.png" 
alt="Google Play で手に入れよう" width="155px" height="60px" />

 

こちらが実際のバッジ表示。キレイに揃ってる〜〜(嬉&泣)!

 

さらに微調整

自分のスマホで確認したら、Googleのバッジだけ少し上に表示されていた!ので、微調整。以下のコードを追加しました。

/*480px以下*/
@media screen and (max-width: 480px) {
.googleplay-badge {
 padding-top: 0.2em;
}

実際の表示↓


ダウンロードバッジをつけると、紹介したいアプリの概要を簡単にリンクを飛ばせて便利。キレイにボタンを揃えて見やすくすると、アクセス数アップにも繋がります。

そもそも「AppStoreのバッジをコピペで表示されない!」なんてときは、こちらの記事をどうぞ。サクッと解決する方法を紹介しています。

AppStoreバッジをコピペ→表示されないときの解決策
音楽、映画などを紹介するときに欠かせないのがAppStoreのリンクです。リンクは「バッジ」「テキスト」「スモールバッジ」の3種類。中でもアプリのレビュー、...

それでは楽しいwordpressライフを〜。

タイトルとURLをコピーしました