ブログ等でiPhoneアプリを紹介をしたい場合、Apple公式サイトのLink Makerというページからリンクコードを取得すると、簡単にボタン（バッジ）の設置ができます。
しかし、WordPress をお使いの場合には、ちょっとした注意が必要です。なぜなら、そのままコードを貼り付けても上手くいかないからです。
そこで今回は、WordPress をお使いの方が、App Storeのボタン（バッジ）をブログに掲載する方法を解説します。
記事の後半では、より簡単に使うための方法も紹介しているので、ぜひ参考にしてください。
Link Makerで埋め込みコード取得
Link Makerとは、iTunesで提供しているApp・映画・Musicなどのコンテンツへのリンクボタン（バッジ）を簡単に取得できる、Apple公式のサービスです。
まずは、Appleの Link Maker にアクセスして、紹介したいアプリを見つけることから始めます。
目的のアプリを検索する前に、「ストア国」と「Media Type」を選択します。
今回は、サンプルとして、iPhoneの無料写真文字入アプリ「Phonto 」のリンクを作ってみます。
【 ストア国 ＞ 日本 】と【 Media Type ＞ App 】を選択したら、検索窓に【Phonto】と入力して、検索をかけます。
目的のアプリを見つけたら、クリックしてください。
次の画面でリンクの取得ができます。
①の中から、表示したいバッジのタイプやテキストリンクが選べます。選択すると②に【 埋め込みコード 】が表示されます。
実際には、それぞれこんな感じで表示されます。
③は直リンクになりますが、アプリ紹介なんかじゃあまり使う機会がないかもしれませんね。
今回は、大きい方のバッジを取得したいと思いますが、WordPress を利用している人はここで注意が必要です。
WordPress での Link Maker利用方法
そのままでは使えない
WordPress でバッジの埋め込みコードを利用するには、通常だと、「投稿の編集」画面をテキストモード（HTMLモード）にして、ただ貼り付けるのが一般的だと思います。
しかし、取得したコードをそのまま貼り付けてはいけません。リンク文字が空欄になっているので、何かしらのテキストを追記する必要があるんです。
<a href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8" style="display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">何かテキストを入力してください</a>
なぜなら、ここが空欄のままだと、ビジュアルモードに戻した時に、せっかく入力した埋め込みコードが綺麗さっぱり消えてしまいます。
これは、WordPress の自動整形機能によるものですが、これを防ぐため、何かしらのテキストを入れてやる必要があるんです。
CSSで調整する
けれども、テキストを入力すると、バッジとテキストが重なって表示されてしまいますよね。
なので、styleタグに手を加えて、テキストが表示されないようにしてあげます。
text-indent: 100%;white-space: nowrap;overflow: hidden;
上記のコードをstyleタグに加えてください。
<a href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8" style="text-indent: 100%;white-space: nowrap;overflow: hidden;display:inline-block;overflow:hidden;background:url(//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg) no-repeat;width:135px;height:40px;background-size:contain;">何かテキストを入力してください</a>
これで、文字を消すことができます。
ただ、たくさんのアプリを紹介したい時なんかは、この作業っていちいち面倒ですよね？
そんな時のために、簡単にテキスト部分を消す方法をご紹介します。
クイックタグを登録してテキスト消去を自動化する
考え方としては、「埋め込みコード」をdivタグで囲み、スタイルシートでテキストを見えなくするといった感じです。
ポイントは、divタグで囲む作業を、手入力ではなく、クイックタグを使いボタンひとつで実現するところです。
クイックタグの登録
まずは、クイックタグ登録のため、functions.phpに以下のコードを追記します。
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_itunes', 'iTunes', '<div class="itunes">', '</div>');
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );この記述を加えるだけで、投稿の編集」のテキストモードにiTunesボタンが追加されているはずです。
このiTunesボタンを一度押すと<div class=”itunes”>が、もう一度押すと</div>が自動で入力されます。これを利用して、「埋め込みコード」をdivタグで囲ってあげてください。
<div class="itunes"><a style="display: inline-block; overflow: hidden; background: url('//linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg') no-repeat; width: 135px; height: 40px; background-size: contain;" href="https://itunes.apple.com/jp/app/phonto-%E5%86%99%E7%9C%9F%E6%96%87%E5%AD%97%E5%85%A5%E3%82%8C/id438429273?mt=8">テキストを入力</a></div>
CSSで非表示に
また、実際にテキストを非表示にするため、style.cssには次のコードを書き加えます。
/**********************************************/
/* Link Maker 埋め込みコードのテキスト非表示化 */
/**********************************************/
.itunes a{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}これで完了です。
まとめ
いかがでしたか？上手くできましたか？
クイックタグを追加する方法は、結構応用が利くので、アイデア次第で他にも色々な使い方ができると思います。ご自身で研究されてみてはいかがでしょうか。
以上、「App Store のアプリをブログで紹介したいなら iTunes の Link Maker を使おう」でした。