アプリのリンクをブログに置く方法

スポンサーリンク

ブログ内でおすすめアプリを紹介するときに、便利なのが下のようなバッジタイプのリンクです。この記事ではバッジタイプリンクの貼り方について記載しています。

Google Play で手に入れよう

※上のリンクはTwitterアプリへのリンクです。

※もっとお手軽な方法として、「アプリーチ」というサービスがあります。無料プランではアプリの紹介部分にアプリーチへのリンクが入りますが、それでもOKという方はこちらからアクセスできます!

リンクの取得

まずはAppStoreとGooglePlayのリンクを取得しましょう。

AppStore

iOSのアプリリンクは「Link Maker」を使います。

iTunes Link Maker

使い方は簡単で国を日本、メディアタイプをAppにして探しているアプリの名前を入れるだけです。あとは紹介したいアプリがアイコンで表示されると思うのでそれをクリックします。

設定例

クリック後は埋め込みコードが発行されるので、コードをWordPressの場合は「カスタムHTML」のブロックに貼り付けます。

表示例

GooglePlay

GooglePlayの場合は先にアプリのリンクを検索しておきます。検索はこちらの「GooglePlay」のページで行います。

アプリを検索で見つけたら、URLをコピーします。

URL例

コピーしたURLを以下のサイトで使います。

Google Play バッジ – Google

URLをPlayストアURLの部分に貼り付けると自動でHTMLが出力されます。これをコピーしてカスタムHTMLブロックで使います。

作業場所の例

表示を整える

カスタムHTMLにそのまま貼り付けを行うと、大きすぎて整った表示になりません。試しに以下のように先ほどのリンクを並べて見るとかなり大きな表示がされることになると思います。

HTMLの例
表示の例

そこで少しだけサイズ調整を行います。基本的には以下の部分にサイズ調整を追加するだけです!

// コピー用 AppStore
margin:10px;

// コピー用 GooglePlay
width="153"

以下のようなリンクがプレビューで確認できるようになると思います。

Google Play で手に入れよう

またいくつか表示調整の例を載せておきます。

<div align="center">

//ここにコードを並べると中心配置になる

</div>
<div align="center">

//ここにコードを一つ並べて

<br>

//さらに、ここに並べると縦に並ぶ

</div>

最後に

おすすめのアプリなどがあった場合、色々と紹介を書きたくなりますよね。ぜひリンクも一緒に載せて、アプリ仲間を増やせるような記事にしましょう!