Twitterはこちら

【初心者でも5分】アプリ公式リンクボタンをブログに設定する方法

アプリ公式リンクボタンをブログに設定する方法ブログ運営
おこ丸
おこ丸

アプリの公式リンクボタンはどうやって設定するの?

先生
先生

では今回はアプリのリンクボタン設定を確認しましょう。

ブログ記事でお気に入りアプリを紹介することありますよね。
その際に「アプリのインストールはこちら」といった公式アプリのリンクボタン案内を載せたい!

でも、初心者ブロガーにとってココが問題なんですよ。
「どうやってアプリの公式ボタンを設定するのか?」その疑問で作業が止まるのです。

今回はそんな初心者ブロガーにアプリ公式のリンクボタン設定について解説します。
では早速やってみましょう!

今回の記事で分かること
  • iOS向けアプリの公式リンクボタン設定
  • Andoroid向けアプリの公式リンクボタン設定
  • それぞれのバッチサイズを合わせる方法

iOS向けアプリの公式リンクボタン設定

iPhoneやiPadなどで使用できるApp Storeアプリを紹介するときに使用します。

ずばりLink Makerを使います!

Link Makerで対象アプリのコードを生成しよう

Link Makerを開いたら、以下の検索設定をしてください。

Link Maker公式サイトを開く
Link Makerの検索設定
  • ストア→日本
  • メディアタイプ→App

検索したいアプリ名を検索バーに入力します。
今回は頭痛―るアプリを探してみましょう。

頭痛ーるアプリを検索する

アプリを見つけたら、埋め込みコードを全てコピーします。

Apple Store公式アプリのリンクコピーする

CSSでレイアウトを調整

そのままコピーするとワードプレスでうまく読み取れないので、以下のようにコードを修正してください。

【コピーした初期状態】></a>

【赤字を追加】>&#x200B</a>

&#x200B=ゼロ幅スペース

CSSの詳細は置いといて、ワードプレスで設定する際に追加してくださいね。

CSSでサイズを調整

コピーした初期状態ですと、バッジのサイズは135×40 pxです。

サイズを変更する場合は以下の数字を変更します。

【コピーした初期状態】width:135px;height:40px;”>

ちなみにwidth=幅、height=高さと知っておけば大丈夫です。

AndoroidのGoogle Playストアと同じサイズにしたい場合

ここで初心者に難しいのが、AndoroidのGoogle Playストアの公式リンクボタンとサイズが一致しないこと。

CSSが苦手な方は以下の通りにコードを変更しましょう。
margin=余白background-size:containも深く考えずに追加しておいてください。

【変更前】width:135px; height:40px;

【変更後】width:218px; height:65px; margin:16px; background-size:contain;

完成イメージはこちら

実際のブログ掲載イメージです。

Apple Store公式アプリのリンクボタン

Andoroid向けアプリの公式リンクボタン設定

Andoroidで使用できるGoogle Playアプリを紹介するときに使用します。

Badge Generatorで簡単にリンク生成できます!

Badge Generatorを開いたら、以下の検索設定をしてください。

Badge Generator公式サイトを開く
Badge Generatorの検索設定
  • Launguage→Japanese
  • Play Store URL→目的のアプリページのURLをコピー

こちらも頭痛―るアプリを探してみましょう。
左側の埋め込みコードを全てコピーします。

Googleプレイ公式アプリのリンクコピーする

CSSでレイアウトを調整

生成コードを張り付けると、「めっちゃデカい!」と内心ワタワタします。
なぜかサイズが646px × 250pxもあり、大きすぎですね。

Googleプレイ公式アプリのリンクボタン初期値

【コピーした初期状態】_web_generic.png’/>

【赤字を追加】_web_generic.png’/width=”250px” height=”97px”></a>

CSSの深いところは忘れて「公式リンクボタンのサイズを変更した」と思っておきましょう。

もう少しバッチを小さくしたい!

少しバッチが大きいと感じたら、以下のサイズ設定を試してくださいね。

【コピーした初期状態】_web_generic.png’/>

【赤字を追加】_web_generic.png’/width=”155px” height=”40px”></a>

完成イメージはこちら

実際のブログ掲載イメージです。
※こちらは幅が250px、高さ97pxのバッチ例です

Googleプレイ公式アプリのリンクボタン

まとめ:たった5分で本格派アプリ紹介ブログになる

実は初めてアプリを紹介する記事を書いたときは、公式アプリのリンクボタンを設定する方法が分からずブログを更新していました。

他のブログを見ると公式アプリのロゴマークがカッコいい!
いろいろ調べてようやく2回目のアプリ紹介記事から、アプリ公式のリンクボタンを設定できるようになりました。

記事に公式ロゴマークを出せたときはプチ感動!
やってみると簡単にできるので、皆さんも挑戦してくださいね。

まとめ
  • Apple Storeのリンクボタン設定にはLink Makerを使う
  • Google Play Storeのリンクボタン設定にはBadg Generatorを使う
  • 公式アプリのリンクボタン設定は5分できる
おこ丸
おこ丸

見た目がカッコいいです!

先生
先生

うまくできない時はご相談ください。

コメント