AppStoreのバッジをコピペしても表示されない!?
そこで、今回は簡単にAppStoreのバッジを表示させる方法を紹介。作業は3分ほどで完了しますよ。
解決策：文字列を加えて表示させる
今回バッジを設置するアプリは、人気ゲーム「アルトのオデッセイ – Snowman」。
最初にiTunes Link Makerを開きます。
①国を日本、②リンクの種類をAppに指定、③キーワードに「アルトのオデッセイ」と入力。
検索結果をクリックして詳細ページに飛んだら、一番下の直リンクをコピーします。
この直リンクのURLは、
https://apps.apple.com/jp/app/%E3%82%A2%E3%83%AB%E3%83%88%E3%81%AE%E3%82%AA%E3%83%87%E3%83%83%E3%82%BB%E3%82%A4/id1182456409?mt=8
WordPressの投稿画面を開き、コピーしたURLを投稿編集画面の適当なところにペースト。
次にHTMLを編集します。ビジュアルエディタを使っている場合は、テキストモードに切り替えます。
まずこのコードをコピペします。
<div class="itunes" style="text-align: center;">
<a style="display: inline-block; overflow: hidden; background:
url('https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?
releaseDate=2015-05-17&kind=iossoftware&bubble=ios_apps')
no-repeat; width: 135px; height: 40px;"></a></div>次に先ほどLink MakerでコピーしたURLを、href=を入力した後に↑のコードの中にペースト。
<div class="itunes" style="text-align: center;">
<a style="display: inline-block; overflow: hidden; background:
url('https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?
releaseDate=2015-05-17&kind=iossoftware&bubble=ios_apps')
no-repeat; width: 135px; height: 40px;
"href=https://apps.apple.com/jp/app/
%E3%82%A2%E3%83%AB%E3%83%88%E3%81%AE%E3%82%AA%E3%83%87%E3%83%83%E3%82%BB%E3%82%A4/
id1182456409?mt=8"></a><div>href=と、コピペしたURLの前後に” “をつけることを忘れずに！
これが終わったら、バッジを表示させるための文字を加えます。
ここでは テキスト とします。文字は何でもいいので、テキストモードに切り替えた際に自分ですぐ判別できるものにしてください。例えば アプリ でもいいですね。
<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&kind=iossoftware&bubble=ios_apps')
no-repeat; width: 135px; height: 40px;"href=https://apps.apple.com/jp/app/
%E3%82%A2%E3%83%AB%E3%83%88%E3%81%AE%E3%82%AA%E3%83%87%E3%83%83%E3%82%BB%E3%82%A4/
id1182456409?mt=8">テキスト</a></div>以上で完成。
入力し終えたら、ビジュアルモードに切り替えます。実際のバッジがこちら！
テキストモードの時に加えた テキスト は、実際には表示されません。安心してください。
さらに一工夫する
iTunesだけならこれだけでもレイアウトが崩れませんが、 Google Playバッジを横並びにしたいときは次のテクニックを試してみてください。こちらで詳しく解説しています。
バッジをしっかり表示させてキレイなページに仕上げましょう！
