WordPress

AppStoreとGooglePlayのダウンロードロゴ(バッジ)の埋め込み・貼り付け方法!

投稿日:2018-08-03 更新日:

Google Play で手に入れようAppStoreで入手

 ⇑  このマーク    

これ、Web業界だと バッジ って言うらしいですよ。

 

このバッジをブログやホームページのサイト内に貼り付け・埋め込む方法を記載していきますよ~

 

このバッジを貼り付けするだけなら画像コピーして、貼り付けりゃ終了だけど、貼るからにはリンクを記載してクリックしたら所定の場所に飛ばしたいって人向けの記事です。

 

Google PlayApp Storeの両方ともやり方は、そんな変わらないので簡単です。

初心者でも楽勝に出来ちゃいます!

ただ、WordPressを利用している方はApp Storeのバッジだけ、ひと手間加えないとイケないので、その手順も解説しちゃうゾ!

 

 

アイコン画像も一緒に追加したい場合は、こっちがオススメ!

♥ アプリーチを使った貼り付け方法

便利
アプリーチの使い方
ブログ記事でアプリを紹介【アプリーチの使い方】スマホでアフィリエイト

続きを見る

 

Google Playの貼り付け方法

まずは、簡単な方からヤっつけちゃぃましょ!

Google Play マークのバッジを利用する場合は、アプリ以外の「映画」「マンガ」「音楽」どのページでも貼り付け可能なので、色々と試してみてね。

アプリ以外でも、手順は全く一緒です。

 

最初にGoogle Playのページから、貼り付けしたいページを開きます。

Google Play 公式サイト

 

開いたページの「URL」をコピーします。

バッジのアドレス

 

 

次に「Google Play バッジ」にアクセスします。

グーグルプレイバッジ

 

下の方までスクロールしていくと「バッジ作成ツール」があります。

この「バッジ作成ツール」を使用します。

 

バッジ作成

設定箇所はデフォルト(初期設定)のままで大丈夫です。

赤枠で囲んでいる「言語」の表記を変更すると、バッジ内の文字も変更されるので、日本語以外の表示が良い人は、ここを変更してください。

言語を変更すると「バッジ」と表記されているプレビュー画面が変更されるので、確認しながら作成してね。

 

もう少し下にスクロールして「Play ストア URL」の項目があるので、そこに先程コピーした URL を貼り付けします。

 

バッジ作成2

 

すると、左側の「マーケティングにこのHTMLバッジを含めます」の箇所にコードが表示されます。

こんな感じね ⇓  ⇓ ⇓ 

バッジ作成4

 

この赤枠内のコードをコピーして、表記したい自分のサイト内に貼り付けて完了です!

WordPressの人は「投稿」から「テキスト」エディタ内に貼り付けして下さい。

 

 

Google Play バッジのサイズ変更

作成したコードに「width="数字"」を入れます。

<a href="https://play ~~~~~ alt="Google Play で手に入れよう" width="153" /></a>

これでサイズが変更されます!

この記事に記載のバッジは「153」で設定してますが、好みで変更してね!

 

 

 

App Store の貼り付け方法

続いて App Store バッジの貼り付け手順です。

2つの貼り付け方法を説明していきます!

 

1つ目はApp Developer」からバッジがダウンロードできます。

ここからダウンロードして使用が可能です。

App Developer

 

 

2つ目はiTunes Link Maker」からダウンロードする手順

iTunes Link Maker」にアクセスします。

linkmaker

貼り付けしたい「アプリ名」を検索します。

ストア国日本

メディアタイプApp

 

アプリが表示されたら、クリックします!

linkmaker2

クリックすると、埋め込みコード直リンクが表示されます。

赤枠内の埋め込みコードをコピーして、表記したい自分のサイト内に貼り付けて完了!!

 

WordPressを利用している場合は、この埋め込みコードを貼り付けしても表示されません。

このコードを埋め込むと、コード自体が削除されてしまいます。

WordPressの仕様上、この埋め込みコードは読み込まれないので、このコードにひと手間加えていきます。

 

これが実際に、この記事で埋め込んでいるコードです。

<a href="https://itunes.apple.com/jp/app/instagram/id389801252?mt=8"><img style="margin: 10px;" src="https://linkmaker.itunes.apple.com/assets/shared/badges/ja-jp/appstore-lrg.svg" alt="AppStoreで入手" height="40" /></a>

 

 

<a href="〇〇〇〇〇"><img style=~~~~~~</a>

このコードの〇〇〇の箇所(赤文字の箇所)に、上記の画像の所の「直リンク」と記載してある URL を貼り付けしてください。

こちらも「テキスト」エディタに貼り付けして下さい!

以上で App Store バッジの貼り付けが完了です!

 

 

WordPress利用中の人は、他の画像と同様にセンター寄せや、背景の設定が可能なのでサイトに合ったデザインにカスタムして貼り付けしてみて下さい!

 

ガイドラインを読んでから利用して下さい

ガイドラインにAppバッジに関しての利用方法が記載されています。角度の変更やアニメーションにしたりするカスタマイズは禁止されています。

App ガイドライン

 

 

こちらの貼り付け方法も可能!

♥ アプリーチを使った貼り付け方法

便利
アプリーチの使い方
ブログ記事でアプリを紹介【アプリーチの使い方】スマホでアフィリエイト

続きを見る

 

急上昇の記事

マシェバラトークラーバー

アプリ

【マシェバラ・トークアプリ】配信用ライバーで気軽にお小遣い稼ぎ!

2018/08/02    , ,

【女性必見】 お小遣い稼ぎが出来ちゃう。マシェバラトークアプリをご紹介!   ライブ配信で、報酬ゲット!ってゆーアプリです。 使い方や、どんなアプリなのかを徹底解説していきます! &nbsp ...

lipsリップスアプリ

アプリ

【LIPS】コスメ・メイク好き女子必見の無料アプリ(リップス)とは…?使い方を徹底調査。

2018/12/06    , ,

LIPS(リップス)   コスメ・メイク好きが、こぞって利用している無料アプリ LIPS(リップス) 美容系で有名なYouTuber、TikToker、インスタグラマーなどの多くのインフルエ ...

cartuneapp4

アプリ

CARTUNE(カーチューン)車好きが集まるSNSアプリ

2018/07/11    

CARTUNE(カーチューン)   車好きな人が集まるSNSコミュニティアプリのCARTUNE(カーチューン)   今までにも車関連のアプリやSNSといった車好きが集まるコミュニテ ...

女性人気アプリ

アプリ

女性に人気の話題アプリをまとめて紹介 / これがトレンド

2018/12/18    , ,

女性向けに人気のアプリを まとめて紹介!!   ■ 美容系アプリ LIPS(リップス) コスメ・メイク好き女子に人気の 美容アプリです。   最近ではローラさんのCMで話題となって ...

ホンネアプリロゴ

アプリ

【HONNE(ホンネ)】匿名の悩み相談ができるヒマつぶし無料アプリの使い方

2018/11/27    , , ,

誰か悩みを聞いてぇー 誰でもイイから、かまちょー 相談にのってぇー そんな時にバッチリなアプリ【HONNE】     「みんなの本音、覗きみちゃう」がキャッチフレーズな完全ヒマつぶ ...

アプリ

【ARINE(アリネ)】女性のための美容まとめ無料アプリ。使い方から評判などを解説!

2018/12/03    

キレイになりたい。 可愛くなりたい。 オシャレになりたい。 美容が大好き。 すべての女性の為の、美容アプリ【ARINE(アリネ)】   美容に関する全般(ヘア・メイク・コスメ・ファッション・ ...

よく読まれている記事

-WordPress
-,

Copyright© wright BLOG , 2019 All Rights Reserved.