iPhoneやAndoroid端末用のアプリを紹介するときのリンク作成方法についてメモしておく。

iPhoneの場合

Link Maker（https://linkmaker.itunes.apple.com/ja-jp/）というWebアプリを利用する。
国または地域「日本」、メディアタイプ「App」とし、任意のキーワードで目的のアプリを検索してリンク用のhtmlを作成する流れ。画面の指示に従えばよく、難しくない。

Androidの場合

Google Playバッジ（https://play.google.com/intl/ja/badges/）というWebアプリを利用する。
PlayストアURLが必要になるので事前に検索しておく必要がある。

パラメータを入力すると、タブ移動、フォーカス移動でhtmlソースが生成される。
大きめの画像でバッジが作成されるので、imgタグにwidth=’155’を追記してサイズを調整する。

htmlの調整

iPhoneの方は余白を含まないバッジ（135*40）。GooglePlayの方は幅155px指定することで135*40の画像に余白(10px)を含んだバッジ（155*60）になる。

またGooglePlayはimgタグを用いたベーシックなhtmlで作成されるが、iPhoneバッジの方はaタグに対して追加cssにてbackground画像としてsvgファイルを表示させる方法をとっている。
当サイトで使用しているcssテーマではimgタグに対して画像下部に15pxのマージンを開けるように定義されているため、垂直方向に画像がそろわないという問題が発生する。

GooglePlayのバッジのimgタグにstyle='width:155px; margin:0px;'を追加することで、幅155pxとマージン15pxの問題を解決する。
iPhoneバッジ側にもマージンが必要であれば、aタグのcssにmargin:10pxと指定することで余白分を確保できる。