【超簡単】ブログでアプリリンクを貼る方法【iOS&Androidアプリ】

webデザイン

疑問を持ってる人ブログでアプリリンクを貼りたい人
「ブログでアプリを紹介してるんだけど、よくある、アイコンと文字が羅列していてダウンロードリンクがあるようなアプリリンクを作りたいです。教えて下さい!」

[code_balloon position=”left” name=”ゆうが” text=”こういった疑問に答えます!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

記事を読むメリット

  • アプリリンクの作り方がわかり、ブログに実装できるようになる
  • クリック率が上がり、商品が売れるようになる

アプリリンクは、視覚的にもわかりやすいのでテキストリンクで表示するよりも、圧倒的にクリック率が上がります。
※内部リンク記事の場合は別です。

完成イメージ

Instagram

Instagram

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

上記のようなアプリリンクが実装できます。

それでは、さっそくいきましょう!

スポンサーリンク

ブログでアプリリンクを貼る方法

アプリーチ

結論は、アプリーチというサイトでアプリリンクを作成して、ブログに貼ります。

アプリーチとは、iOSとAndroidのアプリリンクが簡単に作れるサイトで、多くのブロガーさん達に愛用されています。

アプリーチの使い方

やり方は簡単です。

  1. パーツ作成
  2. デザイン用コードの貼り付け
  3. アプリリンク用コードの貼り付け

なんと、たったこれだけで作れます。
一つずつ解説していきます。

1.パーツ作成

まずは、パーツを作っていきます。
下記の画像のように、自分がブログに貼りたいアプリを検索してください。

アプリーチ

次に、出力する際のイメージを作っていきます。
※とはいえ重要じゃないので、あまりいじらなくて良いです。

具体的には、下記の画像のようすればOKです。

アプリーチ

2.デザイン用コードの貼り付け

続いて、アプリリンクのデザインのコードを貼り付けていきます。

下記の画像のように、「こちらのCSS」をクリックして、コードを表示させてコピーします。

アプリーチ

アプリーチ

上記の画像のようにすればOKです。

そしたらつぎに、WordPressの方にいき「外観→カスタマイズ」を選択して、追加CSSに先程のコードを貼り付けます。

WordPressのカスタマイズ画面

これでアプリリンクのデザインは完了です。

[code_balloon position=”left” name=”ゆうが” text=”つぎの工程で実装が完了するので、がんばりましょう!” img=”https://yuuuugablog.com/wp-content/uploads/2020/11/yuga_Original-1.jpg”]

3.アプリリンク用コードの貼り付け

つぎに、ブログにコードを貼っていきます。

先程の画面に戻り、コードをコピーしてください。

アプリーチ

そしたら、記事投稿画面にいき、先程のコードを下記の画像のように貼りましょう。
※コードは、自分がアプリリンクを表示したいところに貼ればOKです。

wordpress画面

お疲れさまでした!
これにて、アプリリンクの実装が完了しました!

それでは、今回は以上です。
最後まで見てくださり、ありがとうございました。