スマホアプリをおしゃれに紹介できるブログパーツをお探しの方向け。
ブログにおすすめなスマホアプリを紹介する際、ただ単にアプリのリンクを貼るだけだと、見た目に素っ気ないですよね。
このような時、「アプリーチ」というブログパーツを使うと、アプリのアイコンやApp storeやGoogle playのボタンが表示された、おしゃれで見栄えの良いアプリリンクが簡単に作れるようになります。
この記事では、スマホアプリをおしゃれに紹介できるブログパーツ、「アプリーチ」の使い方を紹介します。
コピペするだけでおしゃれなアプリリンクが作れるようになりますので、本記事を参考にアプリリンクを作ってみて下さい。
前置きはこれぐらいにして、さっそく本題に入りましょう。
好きなところから読めます
アプリーチでおしゃれなブログパーツを作ってアプリを紹介する手順
それでは、アプリーチでおしゃれなブログパーツを作ってアプリを紹介する手順を紹介していきます。手順は下記のとおりです。
- 手順①：紹介するスマホアプリの検索
- 手順②：アプリの出力イメージ選択
- 手順③：コードをコピーする
- 手順④：コードをページに貼り付ける
- 手順⑤：デザインを修正するCSSを取得する
- 手順⑥：カスタムCSSに貼り付ける
上記のとおりです
手順①：紹介したいスマホアプリの検索
最初に、紹介したいスマホアプリをアプリーチで検索します。
下記リンクをクリックして、アプリーチの公式サイトに移動します。
公式サイト：アプリーチ
リンクをクリックすると下図のようにアプリーチのトップページが表示されます。
少し下の方に画面をスクロールすると、下図のようにブログパーツ作成という項目が出てきますので、①検索窓に紹介したいアプリ名を入力し、②「検索」ボタンをクリックします。
③下図のように紹介したいアプリが表示されたら画面下に移動します。
iPhoneとAndroidで違うアプリが表示された場合
似たような名称のアプリが多い場合、アプリを検索した際、iPhoneとAndroidで異なるアプリが表示される場合があります。
例えば、「麻雀」で検索してみると、iPhoneとAndroidで異なるアプリが表示されます。
このような時は、「複数検索」をクリックします。
「麻雀」に関連するアプリが複数表示されますので、iPhoneとAndroidで同じアプリになるよう、紹介するアプリを選択して下さい。
手順②：アプリの出力イメージ変更
アプリ検索で紹介したいアプリが表示されたら、アプリの出力イメージを変更します。
各項目の詳細は下記のとおりです。
- ①表示リンク：両方のままでOKです。
- ②タイトル：iPhoneとAndroidでタイトルが違う場合があります。ユーザーに分かりやすいタイトルを選択しましょう。
- ③アイコン画像：iPhoneとAndroidでアイコン画像が異なる場合があります。お好みの画像を選択して下さい。
- ④開発元：表示・非表示、どちらでもOKです。
- ⑤価格：iPhoneとAndroidで表示が異なることがあります。
手順③：コードをコピーする
アプリの出力イメージを変更し、画面を下にスクロールすると、アプリのコードが表示されます。
「コピーする」をクリックするとコードをコピーできます。
コードをコピーしたら、コードをページに貼り付けます。
手順④：コードをページに貼り付ける
コピーしたコードをページに貼り付けていきます。
ページ編集画面（投稿・固定ページ共通）を開き、設置したい場所にコードを貼り付けます。
①ブロックメニューを開き、②「カスタム」と入力し、③カスタムHTMLを選択します。
カスタムHTMLを開いたら取得したコードを貼り付けます。
下図のようにカスタムHTMLにコードを貼り付けたら、公開ボタンを押します（プレビューでもOKです）。
下図のようにアプリが表示されました。
ただ、よく見ると、レイアウトがかなりおかしいですね。
このままの状態だと下記のように綺麗に表示されませんので、CSSを追加して表示を修正します。
手順⑤：デザインを修正するCSSを取得する
デザインを修正するCSSを取得します。
コードを取得した画面に戻り、「こちらのCSS」を記載されたリンクをクリックして下さい。
CSSが表示されますので、「コピーする」をクリックします。
手順⑥：追加CSSに貼り付ける
取得したCSSをカスタマイズの「追加CSS」に貼り付けます。
ダッシュボード＞外観＞カスタマイズ を選択します。
カスタマイズメニューが表示されますので、「追加CSS」を選択します。
下図赤枠内にCSSを貼り付けます。
CSSが適用され、アプリリンクが綺麗に表示されますので、「公開」ボタンをクリックして設定を保存しましょう。
以上でアプリーチでブログパーツを作る手順は完了です。
アプリーチのデザインを変更できるCSS配布サイト3選
アプリーチで配布されているCSSは1種類だけなので、他アプリーチユーザーとデザインが被る可能性が高いです。
アプリーチのデザインを変更したい方は、下記サイトで配布されているCSSを使用して、アプリーチのデザインを変更しましょう。
まとめ
以上、スマホアプリをおしゃれに紹介するブログパーツ、アプリーチの使い方の紹介でした。
ブログでスマホアプリを紹介する時は、アプリーチを使うとおしゃれで見栄えよく表示されるので、是非使ってみて下さい。
ちなみに、スマートフォンアプリの案件を扱っているASPを「アフィリエイト初心者におすすめなASPまとめ【ジャンル別に紹介】」という記事で紹介していますので、興味のある方は是非どうぞ。
