ブログ内でおすすめアプリを紹介するときに、便利なのが下のようなバッジタイプのリンクです。この記事ではバッジタイプリンクの貼り方について記載しています。
※上のリンクはTwitterアプリへのリンクです。
※もっとお手軽な方法として、「アプリーチ」というサービスがあります。無料プランではアプリの紹介部分にアプリーチへのリンクが入りますが、それでもOKという方はこちらからアクセスできます!
リンクの取得
まずはAppStoreとGooglePlayのリンクを取得しましょう。
AppStore
iOSのアプリリンクは「Link Maker」を使います。
まずはアプリ名を検索しましょう。
![](https://deve-cat.com/wp-content/uploads/2020/05/リンク2-1024x450.png)
検索後検索窓の下にある国設定を「Japan」にすると日本のストアのリンクになります。
![](https://deve-cat.com/wp-content/uploads/2020/05/検索-1024x718.png)
アイコンを押して、以下のリンクコピーを行ったら、WordPressのカスタムHTMLブロックに貼り付けます。
![](https://deve-cat.com/wp-content/uploads/2022/07/リンク-1024x254.png)
GooglePlay
GooglePlayの場合は先にアプリのリンクを検索しておきます。検索はこちらの「GooglePlay」のページで行います。
アプリを検索で見つけたら、URLをコピーします。
![URL例](https://deve-cat.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-05-21.18.14.png)
コピーしたURLを以下のサイトで使います。
![](https://storage.googleapis.com/pe-portal-consumer-prod-wagtail-static/images/og_image.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=wagtail%40pe-portal-consumer-prod.iam.gserviceaccount.com%2F20240630%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20240630T173908Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=0a5278e667434820572851bbbd450d3b5c0b98455a34d2828889b7eadef3c9d2822225d369f071e8b7456a5019460ca26a54b01b538101af95fde5942ff9bafa7a20790ec352418e8d05b0642473acc2d3a6915b0fd75bf0117528f67f1f41c9dc967132006b334d4f31d61d83ae0910fe19f917e9dc2f0e8486319718ef4e76a03bdbd24941888671f05cc27fb750a1fefc5fccabff36bb16335d2962d545b458738459ce6c6e2aab60dd560bf86425d52997808adda52f7c81aa1f16f4c90d640c67d31930cc7022158ca604cd308a94d2334d4304143f4ceae428a71d82315c475605a390509ba98a2a2907b9af22fa6a8c4768539780f049a98ed0507819)
URLをPlayストアURLの部分に貼り付けると自動でHTMLが出力されます。これをコピーしてカスタムHTMLブロックで使います。
![作業場所の例](https://deve-cat.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-05-21.37.16-1024x534.png)
表示を整える
カスタムHTMLにそのまま貼り付けを行うと、大きすぎて整った表示になりません。試しに以下のように先ほどのリンクを並べて見るとかなり大きな表示がされることになると思います。
![HTMLの例](https://deve-cat.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-05-21.42.43-1024x297.png)
![表示の例](https://deve-cat.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-05-21.43.18-1024x262.png)
そこで少しだけサイズ調整を行います。基本的には以下の部分にサイズ調整を追加するだけです!
![](https://deve-cat.com/wp-content/uploads/2020/05/スクリーンショット-2020-05-05-21.55.31-1024x299.png)
// コピー用 AppStore
margin:10px;
// コピー用 GooglePlay
width="153"
以下のようなリンクがプレビューで確認できるようになると思います。
![Google Play で手に入れよう](https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png)
またいくつか表示調整の例を載せておきます。
<div align="center">
//ここにコードを並べると中心配置になる
</div>
以下は書き換えたHTMLです。
※こちらのURL部分を直接書き換えても変更はできます。
「https://apps.apple.com/jp/app/twitter/id333903271?mt=8」部分と「https://play.google.com/store/apps/details?id=com.twitter.android&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1」部分。
<div align="center">
<a href="https://apps.apple.com/jp/app/twitter/id333903271?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2009-10-09&kind=iossoftware&bubble=ios_apps) no-repeat;width:135px;height:40px;margin:10px;"></a>
<a href="https://play.google.com/store/apps/details?id=com.twitter.android&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img alt="Google Play で手に入れよう" src="https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png" width="153"></a>
</div>
最後に
おすすめのアプリなどがあった場合、色々と紹介を書きたくなりますよね。ぜひリンクも一緒に載せて、アプリ仲間を増やせるような記事にしましょう!