【2020年】WordPressでスマホアプリのバナーリンクを貼る2つの方法【iPhone/Android】

WordPress
© 2019 Pixabay

今回の記事は、自分のブログでスマホアプリの紹介をしたい初心者のブロガーに向けたものです。

私自身、バナーリンクをきれいに貼るために少し調べたので、自分のためにも残しておきます。

なお、テーマは【Cocoon】を使用しております。

この記事はこんな人におすすめ!

  • WordPress(ワードプレス)でアプリの紹介をしたい
  • 直リンクでなく、バナーとして表示させたい
  • 貼ったアプリのリンクコードが消えてしまい困っている

この記事での目標は、このようにアプリのバナーリンクを表示させることです。
(リンク先はTwitterアプリ)

Google Play で手に入れよう

それでは、2つの方法を解説していきます。

アプリーチを使ってバナーを貼る方法

使い方は超簡単!「Twitter」を紹介する例として説明していきます。

サイト「アプリーチ」にアクセス

まずはここをクリック→アプリーチ

するとこのような画面が出てきますので、下の画像赤枠内より紹介したいアプリを検索していきます。

検索をして、ページの下に移動していきます。

ここではアイフォーンかアンドロイド、どちらのアプリを紹介するか選択できます。

基本的に、どちらも紹介したい方が多いと思うので、初期のこの選択で問題ないと思います。

そして、さらにページの下に行くとこのようなコードがあるので新コードを選択してコピーしましょう。

ワードプレスに貼り付ける

そうしたら、あとは貼り付けるだけになります。

私の使っているテーマ【Cocoon】では「Classic Paragraph」というライティングモードがあるのでそちらで編集していきます。

上のメニュー「ツール」より「ソースコード」を選択してそこに先ほどコピーしたコードを貼り付けます。

そのままコードを貼り付けると下にあるように巨大なアプリ画像ちぐはぐなリンクバナーが表示されるので、編集します。

Twitter

Twitter

Twitter, Inc.無料posted withアプリーチ

これでは、アプリの紹介どころではありません

今回は、一例としてこのように調整します。

Twitter

Twitter

Twitter, Inc.無料posted withアプリーチ

やったことは以下のことだけ。ソースコード内を編集していきます。

① 画像の右にバナーリンクを配置するために
alignleft
を追加

② アプリの画像サイズを小さくするために
  width=”180″ height=”180″
  を追加

③ ちぐはぐなサイズのGoogle Playバナーを調整するために
  width=”135″ height=”40″
 を追加

これだけで完成です!お疲れさまでした!

WordPressに直接コードを書き込む方法

これは、上で紹介したアプリーチと違いiPhoneとandroidのアプリを同時に貼ることができませんので順に説明していきます。

iPhoneアプリのバナーリンクの貼り方

iTunes Link Maker にアクセス

ここをクリック→iTunes Link Maker

リンクバナーを貼りたいアプリのコードをコピー

上の画像のように選択していき、リンクバナーを作りたいアプリを検索します。

アプリをクリックし、コードをコピーします。

WordPress にコードを貼る

コピーまでできたら、コードを貼っていきます。

同じく、テーマ【Cocoon】で 「Classic Paragraph」というライティングモードを使用していきます。

まずは右上の変換から「カスタムHTML」を選択

そして、先ほどコピーしたコードを貼り付ける。

次に赤枠の「プレビュー」を選択

すると、このように映ります。

そして、実際のバナーがこちら。

これでおしまいです!

Androidアプリのバナーリンクの貼り方

Google PlayのBadge Generator にアクセス

ここをクリック→Badge Generator

Google Play Store で紹介したいアプリのURLを調べておく

ここからアプリのURLを検索→Google Play Store

コードをコピーする

Google PlayのBadge Generator にアクセスしたら、

ページの下の方へ行き、下の画像のように
「Japanese」を選択してアプリのURLをコピーし、最後にコードをコピーする。

WordPress にコードを貼る

先ほどコピーしたコードをワードプレスに貼り付けていきます。

Google Play で手に入れよう

もちろんこんなバカげたデカさではよろしくないので、小さくします。

今回は隣に「App Store」のボタンと並べることを想定して、大きさを設定します。

すると下に表示されているように小さくなりました。

Google Play で手に入れよう

まとめ

この記事は私自身の備忘録としての意味もありますので、振り返って分かりやすいように要点だけを簡単にまとめておきます。

要点まとめ

  • 大きさはwidth=”135″ height=”40″ 
  • アプリ画像の横に文字やボタンを配置したいときはalignleft
  • アプリーチはソースコード
  • App Store はカスタムHTML
  • Google Play Store はソースコード

以上になります。お疲れさまでした。

コメント

タイトルとURLをコピーしました