ブログでアプリを紹介したい時に分かりやすく表示してリンクボタンをつけたいですよね。
『アプリーチ』というツールを使えば簡単に貼り付けることが可能なので、今回はその使い方を簡単に説明していきます。
アプリーチの使い方
まずはアプリーチにアクセスします。
参考 アプリーチアプリーチ|iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。少しスクロールすると写真のようなブログパーツ作成の画面が表示されます。
(画像引用元:アプリーチ)
紹介したいアプリ名を入力し、検索ボタンを押すとiPhone、Androidそれぞれの検索結果が表示されます。
(画像引用元:アプリーチ)
ボタン表示を設定する
そのまま下へスクロールすると写真のような画面が出てきます。
(画像引用元:アプリーチ)
こちらで好みに合わせて表示を変えることが出来ます。
特にこだわりがなければそのままでも構いません。
変更した内容はすぐ反映されて表記されるので、好きなように試してみてください。
今回のケースで言えば、アイコン画面をiPhoneからAndroidに変えてみます。
(画像引用元:アプリーチ)
Android表示の方が円が大きいデザインになっているのが分かるかと思います。
好みに合わせた設定で試してみてください。
※さらにスクロールすると写真のようなアフィリエイトとの連携欄が表示されますが、ここは特に入力する必要はありません。
(画像引用元:アプリーチ)
今回はそのままコード取得の説明をしていきます。
コードをコピーして貼り付ける
さらに下にスクロールするとコードが表示されているので、それをコピーして記事に貼り付ければ完成になります。
(画像引用元:アプリーチ)
しかし、新コードを利用するにはCSSの追加が必要になります。
まずは簡単な旧コードを選択し、コピーしたものを貼り付けてみます。
自分のWordPressのテキストエディタにそのまま貼り付けると下のようになります。
これでも特に問題なく使用できるので、大丈夫という方は問題ないです。
新コードは枠もあったりカスタマイズも出来たりするので、個人的には新コードをオススメします。
ここからは新コードの使い方を説明していきます。
アプリーチ新コードの使い方
新コードを使う場合にはCSSを自身のブログに追加する必要があります。
(画像引用元:アプリーチ)
まずは先ほどのコード取得ページの『新コードを利用する方はこちらのCSSをご自身のブログに追加が必要です。』の『こちらのCSS』部分からリンク先に飛びます。
(画像引用元:アプリーチ)
すると上のような写真画面になりますので、CSSをコピーしてください。
今度は自身のWordPressにCSSを追加していきます。
WordPressにCSSを追加する方法
自身のWordPressのダッシュボードから「外観」→「カスタマイズ」と進みます。
カスタマイズ画面に移ったら、左のサイドバーを下にスクロールと「CSSの追加」という項目があります。
CSS欄にコピーしたCSSを貼り付ければ完了です。
アプリーチに戻り、今度は旧コードではなく新コードをコピーして自身のテキストエディタに貼り付けます。
記事を確認すれば、下記写真のような枠付きのリンクになっているはずです。
枠のカスタマイズが可能
ひつじアフィリエイトさんがデザインCSSを無料配布してくれているので、先ほどのCSSをデザインCSSに張り替えればデザインを変更することも可能です。
参考 【コピペで完成】アプリーチのデザインCSS配布!全7種類用意したのでお好みをどうぞひつじアフィリエイト筆者は影のついたデザインを使用させていただいています。
WordPress
Automattic無料posted withアプリーチ
より分かりやすいアプリ紹介が可能
旧コードで手間なく貼り付けても良し、CSSを追加してカスタマイズするのも良し。
好みに合わせて利用してみてください。