ワードプレスでApp Storeのアプリのバッジを設置する

こんにちは。

今回はAppStoreのアプリをダウンロードするためのリンク付きバッジをブログに設置する方法を紹介します。

あのダウンロードするバッジどうやって設置してんだろう？って不思議じゃなかったですか？

この記事ではその方法を分かりやすく説明します。

ワードプレスではうまくやれなかった人もこれで解決です。

簡単ですので是非挑戦してみてください。

Googleplayストアのやり方はこちらで紹介しています。

Word press cocoon 　簡単！　Ｇｏｏｇｌｅ　プレイストア　のリンクを簡単に作る方法

こんにちは。 今回はWord pressで作った記事内にＧｏｏｇｌｅプレイストアへのリンクを直接貼り付ける方法とGoogleプレイストアのバッジを取得してリンクを張る方法のふたつを書いていきます。 リンクの貼り付け方法は２つとも...

the-technorogy.com

2019.10.04

AppStoreアプリのダウンロードバッジのコードを生成する方法

AppStoreのダウンロードバッジは「i Tune Link Maker]で作成します。

このサイトではAppStoreだけでなくiTuneStore、iBookstore、MacAppStoreのリンクも作成できます。

使い方は簡単なので早速やってみましょう。

i Tune Link Makerの使い方

まずは国または地域を日本にします。

赤く囲んだ所をクリックして日本を選択してください。

次はメディアタイプをApple MusicからAppに変更します。

黄色く囲んだ「人気のコンテンツを検索」という所にリンクのバッジを作りたいアプリの名前を入力します。

今回はYouTubeにしました。

赤く囲んだ虫眼鏡をクリックすると候補が出てきます。

YouTubeはさすがに候補が多いですね。

黄色く囲んだアプリを選択すると埋め込みコードが生成されます。

赤く囲んだバッジ、テキストリンク、スモールバッジの３種類から選べます。

好きなタイプをクリックしてください。

黄色く囲んだ枠がAppStoreのアプリのコードですがワードプレスではこのコードを使えませんのでコードの下に表示されている直リンクを使用します。

下の画像で黄色く囲んだURLをアップルが提供しているダウンロードバッジにリンクを追加します。

もう少しです。

ワードプレスに貼り付ける

下のコードはアップルの提供しているダウンロードバッジのコードです。

コピーしてワードプレスの記事に貼り付けます。

テキストモードで作業してください。

コード内の「アプリのリンク」の位置に上の画像で黄色く囲んだ直リンクのURLを入力します。

<a href="アプリのリンク"><img style="margin: 10px 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreからダウンロード" height="40" /></a>

こんな感じで先ほどのYouTubeの直リンクURLを入力しました。

出ました！

これでAppStoreアプリのリンクのバッジの設置は完了です。

まとめ

AppStoreのアプリのダウンロード用バッジをワードプレスの記事内に設置する方法。

ワードプレスのテキストモードで作業してください。

1. ワードプレス記事内にアップルが提供しているダウンロードバッジのコードにコピーし貼り付ける。
2. i Tune Link Makerでダウンロード用バッジのコードを生成して、一緒に作成される直リンクをコピーする
3. １で貼り付けたダウンロードバッジのコードに２でコピーした直リンクURLを追加する。

簡単ですのでやってみてください。

最後まで読んでいただきありがとうございました。