App Storeへのリンクバッジの貼り方解説

App Storeへのバッジ（リンクバッジ）とは上にあるような、App StoreにリンクするApple公式のボタンのことです。通常のテキストリンクより、カッコよくて、これを使うと記事自体の信頼性が上がるような気がしませんか。ここではこのバッジをWordPressで作ったブログ記事への貼り方を解説していきます。とても簡単ですので、トライしてみて下さい。

バッジの作り方・貼り方
細かな問題点とその解決方法

バッジの作り方・貼り方

https://linkmaker.itunes.apple.com/ja-jp/

みゆきメダカ

アップル公式の”LinkMaker"というサイトでバッジを作ります。まずは、上のリンクから”LinkMaker"のサイトに移動しよう。。

みゆきメダカ

移動すると、上のスクショのようなサイトが開くので、ストア国①で「日本」をメディアタイプ②で”App"をプルダウンメニューから選択しよう。

みゆきメダカ

次に検索窓にリンクしたいアプリの名前を入れよう。例として、ここでは、「グーグルマップ」を入れてるよ。

みゆきメダカ

アプリの候補が表示されるので、目的のアプリのアイコンをクリックしよう。

みゆきメダカ

バッジ①をクリックして選択し、埋め込みコード②をコピーしよう。

みゆきメダカ

次にWordPressで、バッジをたりつけたい記事の編集画面に移り、①のボタンをクリックして、プルダウンメニューを開き、コードエディターを選択しよう。

みゆきメダカ

そして、先ほどコピーしたコードを矢印のところ、（実際はバッジを挿入したい場所）にペーストするよ。

みゆきメダカ

コード①をペーストした後、下書きとして保存②して、プレビュー③をクリックしてみよう。

みゆきメダカ

ちゃんと、リンクバッチが貼られているよ。

みさきメダカ

パパ、バッチがバッチリ貼られてるね。テへ。

細かな問題点とその解決方法

ローカル環境でのトライアル

いかがでしたでしょうか。思っておられたより簡単にできたのではないでしょうか。他の方の記事では、コードエディターからビジュアルエディターに変換すると、不具合が起こるとレポートされていますが、少なくともぼくの環境では問題ありませんでした。ぼくは”Cocoon"をテーマとして使っているのですが、ローカル環境下で、いろいろなテーマで試してみましたが、他のテーマでも問題なく動きました。アップデート時に問題解決されているのでしょうか。

また、やはりローカル環境はトライアルを行うには、非常に便利ですね。本番環境だとテーマの変更はおいそれとはできませんからね。ローカル環境の導入はそれほど難しくありません。以下のぼくの記事で詳しく解説していますので、未導入で興味がある方は、覗いてみて下さい。

細かな問題点

コードエディターからビジュアルエディターに移行してもバッジは問題なく貼れるのですが、ビジュアルエディターではバッジのコードのブロックは以下のスクショのように「クラシック」とだけ表示されます。このままだと良いのですが、このブロックを触ると（移動しようとしたり、複製しようとしたりする）バッジが表示されなくなります。