![KIKI](https://obagirl.com/wp-content/uploads/2020/02/gomen-karu.png)
教授、ブログでアプリの紹介をしたいのですが、簡単に素敵に表示する方法はありませか?
![チンアナゴ教授とニシキアナゴ助手](https://obagirl.com/wp-content/uploads/2020/04/chin-100x100.png)
ありますよー。「アプリーチ」という便利なツールでできます。こんな感じです。どうでしょう。
![KIKI](https://obagirl.com/wp-content/uploads/2020/02/bitukuri-karu.png)
そーです!これでーす!「アプリーチ」って私でも簡単にできますか?
![チンアナゴ教授](https://obagirl.com/wp-content/uploads/2020/04/chin-100x100.png)
とっても簡単にできますよー。
WordPress(Cocoon)のGutenbergエディタで説明しますね。
ブログにアプリ紹介をするアプリーチの使い方
とても簡単で4工程で終わります。
①アプリーチでアプリを検索する
アプリーチのページに行き、アプリを検索します。
検索窓に表示したいアプリを入れます。今回は「Yahoo!カレンダー」と入れました。
![アプリーチの検索が目](https://obagirl.com/wp-content/uploads/2020/04/apuleach-1-800x271.jpg)
iPhoneアプリは①のところに、Androidアプリは②に表示されています。片方しかない場合もあります。
出てきてほしいアプリがない場合は検索ボタンの横の「複数検索」ボタンをクリックしてください。関連するアプリが出てくるので、その中にあれば選んで使えます。
②アプリの紹介リンクの表示する条件を選ぶ
表示する項目を設定していきます。それぞれの項目を好きな表示になるように選んで行きましょう。めちゃわかりやすい仕様。
![アプリーチの表示項目の設定](https://obagirl.com/wp-content/uploads/2020/04/2-1.png)
target=”blank”の付与は「あり」にすると、リンクをクリックしたときに別ウインドウで開きます。
③アプリの紹介リンクにアフィリエイトコードをいれる
アプリの紹介で、アフィリエイトがある場合は、アプリーチのページにASPで取得したコードを入力します。
![チンアナゴ教授](https://obagirl.com/wp-content/uploads/2020/04/chin-100x100.png)
アフィリエイトを入れない場合はこの説明は飛ばしてください。
ページ内にもボタンがありますが、アプリのアフィリエイトは、Smart-C、afb、Zucksが有名です。残念ながら今回の例のYahoo!カレンダーアプリのアフィリエイトは見つかりませんでした。。
![アプリーチのアフィリエイトの設定ほ](https://obagirl.com/wp-content/uploads/2020/04/apleafi-1.png)
iPhoneリンクにはiOS対応、AndroidリンクにはAndroid対応のソースを入れます。
Smart-Cの場合だと<a href=”https://smart-c.jp/c?*************のようなコードです。
ここにコードを入れて、サイト内を右クリックすると反映されます。
④アプリの紹介リンクのコードをWordPressに貼る【Cocoon】
ここまできたらコードが自動で出来上がっているのでWordPressに貼るだけです。
旧コードと新コードがあります。ここでは新コードで説明をします。
CSSを使いたくない人、カスタマイズをしない人は旧コードを貼り付けるだけでも大丈夫です。
アプリーチの新コードをコピーします。
![アプリーチでコードをコピーする画面](https://obagirl.com/wp-content/uploads/2020/04/codecopy-1.png)
次にWordPressの編集画面で、コードを貼り付けます。ここではGutenbergを使っての説明になります。
「ブロックの追加」⇒「カスタムHTML」を選びます。
![ブロックの追加のカスタムHTMLの選び方](https://obagirl.com/wp-content/uploads/2020/04/kasutamuHtml-1.png)
そこにコピーしたコードを貼り付けます。
![](https://obagirl.com/wp-content/uploads/2020/04/html-1.png)
続いて、新コードの場合はCSSも追加する必要があります。旧コードの場合はいりません。
CSSを追加することにより、文字の色や太さや間隔など変更することが可能になります。
まずは「アプリーチ」のコードのコピーの前に「こちらのCSSを」という箇所があるのでクリックします。
![](https://obagirl.com/wp-content/uploads/2020/04/CSScode-1.png)
CSSが出てくるのでコピーします。
![](https://obagirl.com/wp-content/uploads/2020/04/tuikacsscode.png)
張り付けるやり方は3通りあります。(テーマはCocoonです。)
①記事内の「 カスタムCSS 」に追加
②ダッシュボードの「 追加CSS 」に追加
③Style.cssに追加
記事ごとにカスタマイズをしたい人は①を、ブログ全部の設定をしたい人は②or③にしてください。②、③はどちらでも大丈夫です。まよったら②で!
①記事内の「 カスタムCSS 」に追加からです。
記事を書いているエディタの下の方にスクロールするとカスタムCSSの入力項目があるので、さきほどコピーしたCSSを貼り付けます。
![カスタムCSS](https://obagirl.com/wp-content/uploads/2020/04/image.png)
次に②ダッシュボードの「 追加CSS 」に追加です。
WordPressダッシュボード ⇒ 「外観」⇒「カスタマイズ」から追加CSSを選んでここにコードを貼り付けます。
![追加CSSのカスタマイズ場所](https://obagirl.com/wp-content/uploads/2020/04/tuika-1-500x300.png)
次に③Style.cssに追加です。
WordPressのダッシュボード⇒「外観」⇒「テーマエディタ」から子テーマのStyle.cssに貼り付けます。
当ブログは、普段からStyle.cssに追加して管理していので、③で運用しています。
また、アプリーチ公式サイトのデザインから少し変えています。
ひつじさんのサイトを参考(デザイン3番)にしています。
これで完成です。
![チンアナゴ教授](https://obagirl.com/wp-content/uploads/2020/04/chin-100x100.png)
どうですか?できましたでしょうか。
![KIKI](https://obagirl.com/wp-content/uploads/2020/02/bakusho-karu.png)
ありがとうございます!できました~。
まとめ:ブログにアプリを紹介するアプリーチについて
iOSとAndroidのアプリの紹介リンクが簡単に綺麗に表示できるアプリーチ。
とても便利で初心者にもやさしいです。プラグインを使わないでできるところも最高です!
CSSでお好みにカスタマイズすることも可能ですしね♪
どんどん活用したいと思います。
KIKI