アプリーチを使ってブログにスマホアプリのリンクを置いてみた

Appreach

今回は「アプリーチ(Appreach)」というツールを使ってブログ内にスマホアプリのリンクを埋め込んでみる回。

本日の実験内容(目次)

アプリーチとは?

アプリーチ」はスマホアプリを紹介するブログパーツを無料で作成することができるとてもすごいツール。

こんな感じのブログパーツが簡単に作成できる。
cssを追加してデザインをカスタマイズすることも可能。

プロジェクトセカイ カラフルステージ! feat. 初音ミク

プロジェクトセカイ カラフルステージ! feat. 初音ミク

SEGA CORPORATION無料posted withアプリーチ

ラボコ

なにを隠そう、自分は初音ミク好きなのだ!みんなもやろう!

また、月500円(2022/06時点)のプレミアムプランも用意されています。
プランの内容は下記4つの機能が追加されます。

  • アプリーチサイト内Adsense広告の非表示
  • アプリーチサイト内のASPの紹介リンクの非表示
  • 「アプリーチへのリンク(posted with アプリーチ)」のないブログパーツ発行機能
  • プラン加入中に発行したアプリーチへのリンクが無いブログパーツの利用

アプリーチの使い方

アプリ紹介のブログパーツを作成する手順を紹介。

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

https://mama-hack.com/app-reach/

ブログパーツ作成でアプリ名を検索

出力イメージを確認

表示リンク、タイトルなどの各項目を選択する。下にプレビューがでて確認できるので便利!

作成されたブログパーツのコードをコピー

下の方にスクロールしていくと貼り付け用のコードがあるので「新コード」が選択されているのを確認してコピーする。

また、紹介しようとしているアプリにアフィリエイトプログラムがあれば設定できるみたいです。

WordPressのブロックエディタでコードを貼り付け

カスタムHTML」ブロックにコピーしたコードを貼り付けます。

CSSを設定しないとレイアウトが崩れて表示されてしまいます。

ということでCSSを設定します。

「アプリーチ」サイトからCSSコードをコピーする

こちらのCSS」となってるリンクをクリック。

ポップアップで出てきたCSSコードをコピーする

テーマのスタイルシートにコピーしたCSSを貼り付け(SWELLの場合)

使用しているテーマのスタイルシートにCSSを貼り付けます。
ちなみにこのブログで使用しているテーマは「」です。

WordPress管理ページの「外観」⇒「テーマファイルエディタ」を選択

style.css」を選択していることを確認して、コピーしたCSSコードをファイルの後ろに貼り付ける。

ファイルを更新」ボタンのクリックを忘れずに!

レイアウトが適用されたか確認

ブロックエディタに戻ってレイアウトが適用されたか確認してみる。
けど、ブロックエディタ上では変わってなかった。

ブロックエディタだとレイアウトがくずれてるけど・・・

でも、プレビューページではちゃんと表示されたのでとりあえずヨシ

プレビューページで見るといい感じ!!

まとめ

「アプリーチ」を使えばスマホアプリのリンクを簡単に作成できた!
CSSをいじればデザインをカスタマイズできるみたいなのでそれはまた今度。

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

コメント

コメントする

本日の実験内容(目次)
閉じる