【10秒でできる】WordPressにアプリリンク(iOS&Android)を貼る方法

当ページのリンクには広告が含まれています。
【10秒でできる】ブログでアプリリンク(iOS&Android)を貼る方法
べるどら
合同会社Now Topic 代表社員・CyberProgress 運営責任者
CyberProgressの運営責任者。合同会社Now Topic 代表社員。2020年からWebメディアの運営を開始し、現在は約10サイトを手掛ける。Webアプリやスマホアプリの開発も行う。サーバーの解説を行うYouTubeチャンネルの総再生回数は6万回を突破。ITパスポート、情報セキュリティマネジメント、基本情報技術者試験、応用情報技術者試験、情報処理安全確保支援士試験に合格。

今回はアプリリンクを作る方法を紹介していきます。アプリリンクは視覚的にもわかりやすいのでテキストリンクで表示するよりも圧倒的にクリック率が上がりますよ。

[box class=”box30″ title=”本記事のもくじ”]

  1. アプリリンクとは?
  2. WordPressでアプリリンク(iOS&Android)を貼る方法
  3. アプリーチの使い方

[/box]

この記事を書いた人

滝田裕雅 たきたゆうが サイト運営者

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細&記事編集ポリシーはこちら

目次

アプリリンクとは?

アプリリンクを説明すると、先程の完成イメージのように「アプリ画像・App StoreやGoogle Playのダウンロードリンク」がキレイに並んでいるリンクカードのことです。

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/instagram-1.jpg” alt=”アプリリンクとは?”]
普通のテキストリンクで表示するよりも、視覚的にわかりやすいためクリック率も高いのが特徴です。
[/imgfuki]

ブログでiOS&Androidのアプリリンクを貼る方法

アプリーチ

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

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

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/Medium_app-link-1.jpg” alt=”アプリーチ”]
自分が紹介したいアプリを検索して、HTMLを貼れば一瞬でアプリリンクが作れるという便利すぎなサイトです。またアフィリエイトリンクを引っ張れば収益も得ることができて、かなり最強なサイトです。
[/imgfuki]

それでは、アプリーチの使い方を図解を用いて解説していきます。

アプリーチの使い方

アプリーチでアプリリンクを作成するには、下記の3STEPでできます。

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

STEP1:パーツ作成

アプリーチへアクセスして、パーツを作っていきます。

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/db2f1f398a24257503a9d500de8109db.jpg” alt=”1. パーツ作成”]まずは自分がブログに貼りたいアプリを検索してください。
[/imgfuki]

たとえば「instagram」のアイコンを作りたい場合はそのまま「instagram」と入力してください。

そして、下にスクロースすると「出力イメージを確認しましょう」とでてくるので、下記の画像のように設定をしてください。

アプリーチ

STEP2:デザイン用コードの貼り付け

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

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/d9012f34af9b021b7198214c5d6302d9.jpg” alt=”デザイン用コードの貼り付け”]下の方にスクロールすると「こちらのCSS」とあるのでクリックして、コードを表示させてコピーしてください。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/css-1.jpg” alt=”デザイン用コードの貼り付け”]
画像のように、CSSがでてくるのでこちらをコピーしてください。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/bd5cc07a27911b8015a47170d708bd68.jpg” alt=”デザイン用コードの貼り付け”]そしたらつぎに、WordPressへいき「外観→カスタマイズ」を選択して、追加CSSに先程のコードを貼り付けます。
[/imgfuki]

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

STEP3:アプリリンクのコードの貼り付け

では最後にブログにアプリリンクのコードを貼っていきます。

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/7f472ff4e30f3bc4266f93c0cb2287a6.jpg” alt=”アプリリンクのコードの貼り付け”]
アプリーチに戻って、下にある「新コード」をコピーしてください。
[/imgfuki]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2020/11/17ca518487e4933c44d7e9f787e1a48f.jpg” alt=””]
そしたらWordPressの投稿画面にいき、コピーしたコードをアプリリンクを表示したいところに貼ってください。
[/imgfuki]

お疲れさまでした!これにて、アプリリンクの実装が完了しました。
もっと貼りたい場合は、「アプリの検索⇨新コードのコピー⇨WordPressに貼り付け」を繰り返せばOKです。マジで10秒でできますよ。

必ず役に立つ記事

[catpost catid=”66″ num=”3″]

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

べるどらのアバター べるどら 合同会社Now Topic / 合同会社Veemlet 代表社員、CyberProgress 運営責任者

CyberProgressの運営責任者。合同会社Now Topic・合同会社Veemlet 代表社員。2020年からWebメディアの運営を開始し、現在は約10サイトを手掛ける。Webアプリやスマホアプリの開発も行う。サーバーの解説を行うYouTubeチャンネルの総再生回数は6万回を突破。ITパスポート、情報セキュリティマネジメント、基本情報技術者試験、応用情報技術者試験、情報処理安全確保支援士試験に合格。

目次