AppStoreバッジをコピペ→表示されないときの解決策

Sponsored link

AppStoreのバッジをコピペしても表示されない!?

iTunesのアプリや音楽、映画などを紹介するときに欠かせないのがAppStoreのリンクです。リンクは「バッジ」「テキスト」「スモールバッジ」の3種類。中でもアプリのレビュー、紹介記事では、「バッジ」(下の画像)を目にする機会が多いと思います。
ところが、AppStoreのバッジ。WordPressで使おうとするとリンクをコピペしただけでプレビューはおろか、投稿編集の段階でも表示されません。コピペに慣れきっていると「ええっ⁈何で⁈」と頭を抱える人も多いはず…。

そこで、今回は簡単にAppStoreのバッジを表示させる方法を紹介。作業は3分ほどで完了しますよ。

Sponsored link

解決策:文字列を加えて表示させる

今回バッジを設置するアプリは、人気ゲーム「アルトのオデッセイ – 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&amp;kind=iossoftware&amp;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&amp;kind=iossoftware&amp;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&amp;kind=iossoftware&amp;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>

以上で完成。

入力し終えたら、ビジュアルモードに切り替えます。実際のバッジがこちら!

テキストモードの時に加えた テキスト は、実際には表示されません。安心してください。

Sponsored link

さらに一工夫する

iTunesだけならこれだけでもレイアウトが崩れませんが、 Google Playバッジを横並びにしたいときは次のテクニックを試してみてください。こちらで詳しく解説しています。

GooglePlayバッジのサイズをAppStoreと揃える方法
ダウンロードバッジのレイアウトで手こずり、公開するのが遅れました。その記事はこちら↓ Google Playのバッジをサイズ変更したら、下の画像のような...

バッジをしっかり表示させてキレイなページに仕上げましょう!

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