Google playとApp storeのリンクのずれの解消法

みなさんこんにちは、ねるです。

 

今回は、前回に引き続き、バナーのずれを解消する方法について解説していきます。

HTML初心者なので、解消するのにめちゃくちゃ疲れました(笑)

前回の記事をご覧になっていない方はこちらから☟☟☟

nerumaga.hatenablog.jp

でも、これをみれば

「あぁ、そんなに簡単なやり方があったんだ」となること間違いなしです。

 

では、さっそくやっていきましょう。

 

 まずは、縦配置についてです。

 Google Play で手に入れよう
 

 今、これは前記事で貼ったHTMLのリンクを、バナーサイズを調整して貼り付けたものです。

大きさは同じくらいなのに、明らかにずれていますよね(笑)

これは、グーグルプレイのバナーには余白があり、アップストアのバナーには余白がないことが原因です。

 

そこでアップストアのバナーの左側に余白を作ってあげましょう。

<p> <a href="https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="170" /></a><br /><a href="https://itunes.apple.com/jp/app/studyplus/id505410049?mt=8" style="display: inline-block; overflow: hidden; background: url('https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg') no-repeat; width: 150px; height: 44px; background-size: contain;"> </a></p>

 <p> <a href="https://play.google.com/store/apps/details?id=jp.studyplus.android.app&hl=ja&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img src="https://play.google.com/intl/ja/badges/images/generic/ja_badge_web_generic.png" alt="Google Play で手に入れよう" width="170" /></a><br /><a href="https://itunes.apple.com/jp/app/studyplus/id505410049?mt=8" style="display: inline-block; overflow: hidden; background: url('https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg') no-repeat; width: 150px; height: 44px; margin-left: 13px; background-size: contain;"> </a></p>

 

このmargin-left: 〇〇px;を追加することで、

 Google Play で手に入れよう
 

こんな風に、横を揃えることが出来ます。

1pxくらいの誤差はあるかもですが、さっきと比べれば大分きれいになりましたね。

 

 

 

次は、横配置についてです。

 Google Play で手に入れよう 

先ほどと同様に考えて今度は、下に余白を作っていきます。

 margin-bottomを使います。

すると、

 Google Play で手に入れよう 

はい、キレイですね。

 

いかがでしたでしょうか?

僕は、このずれの解消法をうまく調べることができず、HTMLについて調べてようやくここまでたどり着くことができました(笑)

 

みなさんは、この記事を読めば簡単に真似出来るんじゃないかと思います。

お役に立てたなら嬉しいです。

最後までお読みいただきありがとうございました☺