いろいろ紹介記事を書く上で、アプリの紹介は必要不可欠ですよね。この記事では、アプリのバナーリンクの貼り方を解説します。
iPhoneアプリのバナーの貼り方
まず、AppStoreのページでバナーを貼りたいアプリを検索します。今回はぐるなびのバナーを作ってみます。
関連アプリがでてくるのでぐるなびアプリをクリックします。
アプリアイコンやQRコードなども作成できますが、今回はバナーを作成するので、「バッジとロックアップ」の、「埋め込みをコピー」をクリックします。
あとはワードプレスの記事編集画面で、「カスタムHTML」を選択して貼り付けるだけです。
サイズは気に入らない場合、赤丸で囲まれたwidth、heightの値を変更することでバナーの大きさを変更することができます。
ちなみ上のHTMLで作ったバナーのサイズは
これくらいになります。下がデフォルトのサイズ
自分好みの大きさに編集しましょう。
Androidアプリのバナーの貼り方
次にandroidのアプリのバナーを作成します。
androidはGoogle playを使用します。さきほどと同様に「ぐるなび」で検索します。
関連アプリがいくつかでてくるので、目的のアプリをクリックします。
目的のアプリのページに飛んだら、そのページのURLをコピーして、Googleplay badge pageにとびます。
上のページにとんだら、下の方へスクロールします。
①の言語を「japanese」にします。「日本語」と漢字で選択できないので注意です。
②PlayストアのURLの欄に先ほどコピーしたURLを貼ります。
③するとバナーリンクがここにでるので、コピーします。
そして、ワードプレスの記事編集画面の「カスタムHTML」に貼り付けます。
が、そのまま貼ると
こんなにでかくなってしまうので、
上記画像の下線にように編集すると下のサイズのバナーになります。
大きさはwidth、heightの数値を設定することで自由に変更できます。
iPhone、android両方のバナーを一気に貼る方法
iPhone、androidのアプリバナーの貼り方を別々に説明しましたが、けっこう面倒ですよね。。。
そこで、最後に両方のバナーを一気に貼ることができるツールがあるので紹介します。
そのツールとは、アプリ―チです。
このサイトを利用することで簡単にバナーを両方同時に作成することができます。
アプリ―チの検索画面で目的とするアプリ名をいれましょう。今回は「ぐるなび」で検索します。
上記のような画面になりますが、基本的にはすべてデフォルトのままで大丈夫です。変えたい項目があればかえましょう。
①新コードと旧コードがありますが、新コードはCSSの編集が必要になるので、よくわからない人は旧コードを選びましょう。
②「コピーする」をクリックして、ワードプレスのカスタムＨＴＭＬに貼り付けて終了です。
アプリ―チを使うと非常に楽なのですが、「posted with アプリ―チ」という文字が必ずつきます（課金すれば消えるようですが）。これが嫌でなければアプリ―チを使ったほうが圧倒的に楽ですね。
まとめ
アプリリンクのバナーの貼り方でした。個人的にはアプリ―チを使ったリンクが一番楽で早いのでおすすめです。
今後もブログにおける小ネタ、小技を投稿していきます。
では！