ワードプレスにApp Storeアプリのバッジをブログに載せる方法

ワードプレスアップルストア ブログ

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

こんにちは。

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

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

上級者向けでしょうか?

難しいに決まってる。

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

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

Appstoreのリンク付きバッジを設置する手順
  1. コードを生成してコピーする。
  2. ブログ記事内に貼り付ける。

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

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

スポンサーリンク

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

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

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

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

i Tune Link Makerの使い方

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

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

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

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

今回はYouTubeにしました。

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

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

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

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

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

黄色く囲んだ枠が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>

<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を入力しました。

<a href=”https://apps.apple.com/jp/app/youtube/id544007664?mt=8″><img style=”margin: 10px 10px;” src=”https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg” alt=”AppStoreからダウンロード” height=”40″ /></a>

出ました!

AppStoreからダウンロード

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

Gutenbergでの作業動画です。参考にしてください。

appstoreアプリのダウンロード用バッジをワードプレスGutenbergで貼り付ける方法

まとめ

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

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

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

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

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

コメント

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