広告 How To

AFFINGER5&6【記事内でアプリを紹介する方法】アプリーチの使い方

パソコンとスマホ

AFFINGER5&6で、記事内でアプリのダウンロードボタンを表示させる方法の紹介です。

専用ツール使用で、簡単&おしゃれにアプリを紹介できるようになります。

 

こんな人のお役に立てる記事です。

小豆
小豆
ブログ内で、アプリを紹介したいときがある。
他のブログを見ると、似たようなおしゃれなデザインを使っている。
あれって、AFFINGERでも使えるの?

記事内でアプリを紹介するならアプリーチ

ブログ記事内で、アプリを紹介したいときってありますよね。

例えば、ブロガーである僕が毎日欠かさずに利用している【SmartNews】アプリ。

アプリ紹介

これをブログ内で紹介しようとすると、以下のような感じになります。

 

小豆
小豆
うーん・・なんだかパッとしないなぁ。
他のブログでは、みんなもっと見た目の良いデザインだったけど。

確かに、お世辞にも「デザインが良い」とは言えないですよね。

それに、アプリのアイコン画像もなく、正直わかりづらいです。

 

で、専用ツールを使って表示した場合がこちら。

スマートニュース 最新ニュースアプリで天気予報やクーポンも

スマートニュース 最新ニュースアプリで天気予報やクーポンも

SmartNews, Inc.無料posted withアプリーチ

めちゃくちゃ見栄えが良くなりましたね。

一気に、洗練されたおしゃれなデザインになりました。

こちらのデザインは、別途カスタマイズを行っています。
詳しいカスタマイズ方法などは、記事後半で紹介しています。

 

アプリ紹介専用ツール【アプリーチ】

アプリーチ

使用したのは、アプリーチという専用ツール。

アプリーチを使用すれば、iPhone・Androidアプリを紹介するブログパーツを簡単に作成することができます。

利用は、もちろん無料。

面倒な会員登録なども一切なく、誰でも利用することができます。

アプリーチの使い方【AFFINGER5&6編】

アプリーチをAFFINGERで使うための下準備と、実際の使い方を紹介していきます。

アプリーチ with AFFINGER

  • 下準備編
    こちらの手順を踏むことで、表示デザインの見た目を良くします(飛ばすことも可)
  • 実践編
    アプリーチから専用コードを発行→AFFINGERブログ内で表示させるまでの手順です

 

下準備編

こちらの手順は、飛ばすことも可能です。

ただし「下準備を行った場合」と「行わなかった場合」では、以下のようにデザインに差が出ます。

下準備あり 下準備なし
アプリーチ表示サンプルCSS追加あり アプリーチ表示サンプルCSSなし

画像はクリックで拡大できます

下準備が不要な場合は、【実践編】からスタートしてください。

 

手順

  1. 専用CSSをコピーする
  2. WordPressにCSSを追加する

 


  • 専用CSSをコピーする

    専用CSSを表示

    アプリーチに移動  → 専用CSSを表示

    専用コードをコピー

    コピーする


  • WordPressにCSSを追加する

    WordPress外観メニュー

    WordPressメニュー → 外観 → カスタマイズ

    CSSを貼り付け

    追加CSS → コピーしたCSSを貼り付け → 公開


 

小豆
小豆
すでに他のCSSが追加されている場合は、どうしたらいいの?
その場合は、行を空けずに直後にそのまま追加すれば大丈夫。
大福
大福

別のCSSが追加済みの場合

下準備はこれで完了です。
初回のみの設定です。今後はこちらの作業を行う必要はありません。

 

実践編

アプリーチを使用し専用コードを発行ブログに表示させる手順を解説していきます。

 

手順

  1. アプリの検索
  2. 出力イメージの設定
  3. コードのコピー
  4. 記事内にコードを挿入

 

step
1
アプリの検索

アプリの検索

検索窓に紹介したいアプリ名を入力 → 検索

狙ったアプリが表示されない、関連アプリも表示したい場合は複数検索をクリックします。

 

step
2
出力イメージの設定

出力イメージの確認

プレビューを確認しながら、出力イメージを調整

 

表示リンク ダウンロードボタンの表示数を設定
タイトル iPhone・Androidどちらかのタイトルを選択
アイコン画像 iPhone・Androidどちらかのアイコン画像を選択
開発元 開発元の表示・非表示を選択
価格 アプリの価格を表示
target="_blank"の付与 ダウンロードボタンを押した時のページの移管方法を選択
なし:同じウィンドウ内で展開 あり:新規ウィンドウが立ち上がる

 

ちなみに、当ブログの場合は以下のように設定しているよ。
大福
大福
表示リンク 両方 タイトル iPhone アイコン画像 iPhone
開発元 表示 価格 iPhone    
target="_blank"の付与 なし      

 

step
3
コードのコピー

コードを選択してコピー

新コード → コピーする

下準備編の設定を飛ばした人の場合は、旧コードを利用して下さい。

 

step
4
記事内にコードを挿入

WordPressにコードを貼り付け

WordPress → テキストエディタ → コードを貼り付け

 

  • ブロックエディタ(Gutenberg)を利用している場合

ブロックエディタの場合

カスタムHTML → コードを貼り付け

 

大福
大福
早速プレビューを見てみよう!
見栄えのいいデザインでアプリの紹介ができているはずだよ。

見た目をこだわりたい人のカスタマイズ

デフォルト設定のままのアプリーチを使用した場合のデザインはこちら。

デフォルトのアプリーチデザイン

小豆
小豆
これはこれで、シンプルでいいんだけど・・。
もう少し、見た目を変えたい。

 

カスタマイズを行うことで、以下のようなデザインでの表示が可能になります。

カスタマイズ後のアプリーチデザイン

だいぶ見た目の印象が変わりますよね。

というわけで、さらにデザインにこだわりたい場合は、カスタマイズが必要です。

 

カスタマイズ方法は、人気のWordPressテーマ「JIN」の開発者である「ひつじ」さんの記事が参考になります。

当記事内で使用させていただいたデザインを含む、7種類のデザインが用意されています。

該当記事に移動する

※ひつじさんのブログに移動します

 

ブログ歴4年の僕も愛用中ブロガーにおすすめのアプリを3つ紹介

ブログ歴4年、ブログで生計を立てている僕のお気に入りアプリを3つ紹介します。

どれもブログ運営に役立つ、おすすめのアプリです。

すべて無料のアプリだよ。
大福
大福

SmartNews

SmartNews

紹介するまでもないほど、有名なアプリですよね。

ニュースアプリは数多くありますが、スマートニュースアプリの良いところは、個人の趣味に合わせてトピックスを選べるところ。

僕の場合は、最新ニュース以外に「100均」「DIY」「地元密着ニュース」などを追加しています。

ブログに関連した話題の最新ニュースが手に入りやすく、おすすめです。

スマートニュース 最新ニュースアプリで天気予報やクーポンも

スマートニュース 最新ニュースアプリで天気予報やクーポンも

SmartNews, Inc.無料posted withアプリーチ

 

Googleドキュメント

Googleドキュメントアプリ

出先などでのブログ作業用に利用しています。

通常のメモアプリとの違いは、編集中の内容をパソコンと同期できること。

アプリに書き込んだ内容は、パソコン側でも表示することが可能です。

というわけで、隙間時間を使ってアプリで記事執筆 → 家に帰ってきたら続きをパソコンで・・みたいな使い方が便利です。

Google ドキュメント: 同期、編集、共有

Google ドキュメント: 同期、編集、共有

Google LLC無料posted withアプリーチ

 

Lightroom

Lightroomアプリ

ブログに載せる写真の編集に便利なアプリです。

色合いやサイズの調整はもちろん、さらに細かい編集を行うことができます。

が、僕の一番のお気に入りは「傾き補正」機能。

撮影時に斜めになってしまった写真も、ワンクリックで傾きを修正してくれます。

関連Lightroomを使った傾き補正の方法はこちら

Adobe Lightroom 写真加工・編集・高画質カメラ

Adobe Lightroom 写真加工・編集・高画質カメラ

Adobe Inc.無料posted withアプリーチ

 

まとめ:ブログ内でのアプリ紹介はアプリーチが便利

アプリーチを使えば、ブログ内でアプリをおしゃれに紹介できます。

利用は無料、面倒な会員登録も一切不要です。

アプリ紹介時には、ぜひアプリーチを使ってみて下さい。

 

  • 関連記事

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴5年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To