先日、アプリを紹介する記事をかきました。
記事をかきながら、よく目にする「App Store」と「Google Play」のボタンをブログ記事内に反映できたらなぁ…と思いました。
このようなボタンです。
このボタンは、バッジとよばれていて、埋め込みコードを取得してブログ内にコードを貼り付けることで設置されます。
ただし、「App Store」と「Google Play」では、それぞれバッジの入手方法がちがいます。
また、大きさも違うので、ブログ内に反映させるには大きさを調整する必要があります。
それぞれのバッジの入手方法と大きさの調整方法を、自身の備忘録も兼ねて記事にまとめました。
Contents
バッジについて
バッジをクリックすることによって、それぞれのストアの紹介したいアプリに移行するバッジを作成することができます。
今回は、移動するだけでポイントが獲得できる「トリマ」アプリをブログで紹介するために、バッジを作成しました。
バッジをクリックしていただければ、それぞれのストアのトリマアプリの説明欄に飛ぶようになっています。
バッジの入手方法は違いますが、「App Store」および「Google Play」のどちらもバッジ作成ツールが用意されています。
| App Store | Link Maker |
| Google Play | Google Playバッジ |
App StoreバッジはLink Makerサイトから、Google Playバッジは、Google Playバッジ作成ツールから入手します。
バッジの色を変更したり、デザイン要素を変えたり加えたりすることは禁止です。
必ずガイドラインに沿って使用することが求められていますので注意してください。
では、入手方法を説明していきましょう。
App Storeバッジの入手方法
「App Store」バッジを入手して、ブログ内に設置するまでの手順を説明します。
【１】Link Makerサイトを開きましょう。
「App Store」バッジの作成ツールは、Link Makerサイトからでしたね。
Link Makerサイトを開くと最初に言語を選択ページがあらわれますので、日本語を選択します。
【２】アップルサービスマーケティングツール画面が開きます。
言語を選択すると、画面が切り替わってアップルサービスマーケティングツールが表示されます。
【３】アプリを検索しましょう。
アップルサービスマーケティングツール画面の検索窓にアプリ名を入力して、検索してください。
私は「トリマ」と入力しました。
【４】国名を選択します。
画面が切り替わります。
世界中のたくさんのアプリのなかから必要なアプリを検索するので、条件を加えて検索しやすいようにします。
検索窓の下に国名をいれましょう。プルダウンから日本を選択してクリックしてください。
【５】アプリをクリックします。
検索したアプリ一覧が表示されます。
アプリ一覧から表示したいアプリをみつけてクリックしましょう。
私は「トリマ」アプリをクリックしました。
【６】埋め込みコードを入手しましょう。
クリックするとアプリページが開きます。
アプリページを下へスクロールしていきますと、「バッジとロックアップ」という項目があります。
バッジの色と表示言語をプルダウンして選んでください。
色は「黒い」と「白い」から選べます。
今回、表示言語は日本語を選択しました。
バッジの色と表示言語を選択し終わったら「埋め込みのコピー」ボタンをクリックします。（コードがコピーされます）
【７】ブログ内にコードを設置します。
つぎにWordPressブログ編集画面に移動します。
WordPress編集画面でHTMLブロックを選択して、コピーしたコードを貼り付け(ctrl+v)ます。
これで、ブログ内にApp Storeバッジが表示されました。
Google Playバッジの入手方法
では、つぎにGoogle Playバッジの入手のしかたと、ブログ内に設置する方法を説明します。
【１】Google Playストアを開き、必要なアプリを検索します。
まずは、Google Playストアを開きます。
右上の検索ボタンをクリックします。
検索窓にアプリ名を入力して検索しましょう。
【２】アプリのURLをコピーしましょう。
検索すると、アプリのページに移動します。
ページのURLをコピーします。
コピー部分は、下の画像の枠で囲んだ部分です。
【３】Google Playバッジを開きます。
アプリのページをコピーしたまま、つぎにGoogle Playバッジのサイトを開きます。
Google Playバッジのサイトは、Google Playストアとは別のサイトになります。
【４】バッジ作成ツールにアプリのURLを貼り付けましょう。
Google Playバッジのページを下へスクロールしていくと、バッジを入手する「バッジ作成ツール」があります。
PlayストアURL欄に、アプリのページのURLを貼り付けます。
【５】表示されたコードをコピーします。
アプリのURLを入力すると、左側にバッジのコードが表示されます。
コードをコピーしましょう。
【６】WordPress編集画面のカスタムHTMLブロックにコードを貼り付けます。
つぎにWordPress編集画面を開き、カスタムHTMLブロックを選択しましょう。
コピーしていたバッジのHTMLコードを貼り付け（ctrl+v)ます。
バッジの大きさを調整する
ここでお気づきと思いますが、二つのバッチの大きさがちがいます。
Google Playバッジのほうがかなり大きいですね。というか…ビックリする位かなり大きすぎです。
そこで、大きさを調整しました。
HTMLコード内の width(横幅）と height(高さ) の数字を書き換えることで、大きさを変えることができます。
App Storeバッジのコードをみてみましょう。(横幅と高さの部分だけ抜粋しています）
style=”border-radius: 13px; width: 250px; height: 83px;”
width(横幅)は250px、height(高さ)が83pxに設定されていますね。
反対にGoogle Playバッジのコードには、width(横幅)表記が見当たりません。
そこで、App Storeバッジの大きさにあわせて、Google Playバッジの大きさを変えてみます。
①App Storeバッジの大きさに合わせる方法
コピーして貼り付けたGoogle Playバッジのコードに、width(横幅)を設定してあげます。
コピーしたコードの最後、</a>の前、png”の後ろに、width=”250″と手入力してください。
images/badges/ja_badge_web_generic.png”></a>
images/badges/ja_badge_web_generic.png” width=”250″></a>
Google Playバッジが小さく表示されましたね。
それでは、2つのバッジを表示してみましょう。
比べてみると、App Storeバッジの高さが少し高く感じますね。
つぎに、App Storeバッジの高さを調整してみましょう。
② 高さをそろえる方法
App Storeバッジのheight(高さ）を68pxに変更します。
コピーしたコードの最後あたりのheight(高さ)の数字を68と手入力して変更してください。
alt=”App Storeでダウンロード” style=”border-radius: 13px; width: 250px; height: 83px;”
alt=”App Storeでダウンロード” style=”border-radius: 13px; width: 250px; height: 68px;”
ではもう一度2つのバッジを表示してみます。
どうでしょうか。良い感じになりましたね。
こちらの方法で、もう少し小さなバッジを作成してみましょう。
App Storeバッジの方は、width:135px; height:40px
Google Playバッジは、width=”150″に変更してみます。
どんなふうに表示されるでしょうか。
画像の大きさが小さくなりましたね。
スマートフォンでご覧いただいている場合は、2つのバッジが縦並びになるので問題ないかと思いますが、パソコンで見てみると画像がずれて表示されてしまいました。
この現象は、App Storeバッジの画像の上側に余白を設定することで解決します。
App Storeバッジのコードのなかにmargin-top(画像上側の余白)を書き入れてあげます。
style=”border-radius: 13px; margin-top: 35px; width: 135px; height: 40px;”
今回の場合は、margin-top: 35px;としました。
では、もう一度2つのバッチを表示させてみましょう。
いかがでしょうか。良い感じに表示できていると思います。
まとめ：「App Store」「Google Play」バッジをブログに設置する方法
App StoreバッジとGoogle Playバッジをブログ内に表示させる方法についてまとめました。
2つのバッジの入手方法は違いますが、どちらも作成ツールが用意されています。
作成ツールが発行してくれるコードを、ブログ内のカスタムHTMLブロックに貼り付けることで、ブログ記事に表示できます。
ただし、入手した2つのバッジは大きさが違うので、大きさを調整する必要があります。
2つのバッジの入手方法と、大きさの調整方法を理解しておくことは、今後のブログ執筆に大いに役立つことでしょう。
今回の記事をかいていて気づいたことがあります。
それは、2つのバッジをブログ記事内に表示させた場合、パソコンとスマートフォンでは表示のされ方（見え方）が違う点です。
スマートフォンでは、2つのバッジが縦並びに表示されるので、あまり違和感はなくほぼ問題なくみえます。
しかし、パソコンでは、2つのバッジが横並びで表示されるので、バッジ同士がずれて表示される場合があります。
その場合の解決方法と調整方法を理解しておくことも大切なことだと感じました。
本日も最後までおつき合いくださいましてありがとうございました。
次回もお楽しみに♪