読者です 読者をやめる 読者になる 読者になる

アプリーチの使い方の説明とコピペで使えるCSSデザインを用意しました

広告

どうも、ゴトーだ。

f:id:hogehoge223:20170208081817j:plain

アプリの紹介記事を書こうとして、アプリーチを使ってみたらCSSデザインが崩れてしまったのだが、それをカスタマイズした時に、その内容を共有したほうがいいのではないかと思って記事を書いてみた。
アプリーチの導入方法とコピペですぐに使えるサンプルを用意したので、ぜひ参考にしてみてくれ。

f:id:hogehoge223:20161118121129p:plain

アプリーチとは

ブログなどでスマホアプリを紹介したいのならアプリーチがおすすめだ。

アプリーチを使うことで、簡単に下の画像のようなアプリ紹介のボックスを作成することができる。

f:id:hogehoge223:20161118113410p:plain

Google PlayとApp Storeのリンクが自動で作成されて、アフィリエイトリンクに差し替えることもできるので、ブロガーのために作られたと言っても過言ではない。
まずはアプリーチの使い方について紹介したい。


アプリーチの使い方

STEP1: アプリの検索

f:id:hogehoge223:20161118113735p:plain

まずは上の画像のように、入力ボックスに検索したいアプリ名を入力して検索ボタンをクリックする。
すると最も適合したアプリのデータが表示される。ここでは「白猫」と入力したら白猫プロジェクトが表示されている。

STEP2: データのカスタマイズ

このSTEP2はアフィリエイトリンクに差し替えたり、データのカスタマイズをしなくても良いという場合は飛ばしても良い。

カスタマイズをしたい場合は、まずは「追加機能」というボタンをクリックしよう。

f:id:hogehoge223:20161118114400p:plain

すると上の画像のように様々なメニューが表示される。
それぞれどのようなものかは以下の通り。

  • 開発元あり / なし…ボックスに開発元を表示するかどうか。ただしなしにするとデザインが崩れる
  • 価格あり / なし…有料アプリの場合のみ価格と表示するかどうか。
  • タイトル…アプリのタイトルに何に準拠するかどうか。基本的にデフォルトで良い。
  • 画像…App StoreかGoogle Playどちらの画像に準拠するかどうか。
アフィリエイト設定

ここで重要なのがアフィリエイトの設定だ。
「Gamefeat」や「SmartC」のような成約型のアフィリエイトリンクを埋め込む場合は、「リンク差し替え」と書かれているところにアフィリエイト用のURLを貼る。

左にある「PHGコード」とはiTunesのアフィリエイト用IDのことだ。

iTunesのアフィリエイトIDを仕込んだURLから読者がアプリを購入すると、その7%が報酬として入る仕組みになっている。
これは有料アプリを購入した場合のみで、無料アプリがダウンロードされても報酬は入らないらしい。
ただし、全く意味がないかというとそうではなく、無料アプリのURLを踏んでから有料アプリを購入した場合はAmazonと同様に報酬になるとのこと。

STEP3: HTMLをコピーしてブログに貼る

生成されているHTMLタグをコピーして、それをブログやウェブサイトに貼れば終了だ。

CSSカスタマイズ

使い方が自体は直感的に扱えるので難しくはないが、最も厄介なのがCSSのカスタマイズだ。
生成されたHTMLを貼ってもアプリーチのようにボーダーは表示されないし、特にはてなブログの場合は盛大にデザインが崩れる。

これをカスタマイズするにはCSSを書かなくてはならないが、CSSが分からない人に取ってはかなり障壁になるだろう。
そんなわけで俺が2パターンのコピペですぐに使えるデザインパターンを用意したので参考にして欲しい。

はてなブログだとなぜ崩れるのか

はてなブログの「はてな記法」で書いていて、HTMLタグをそのまま挿入すると勝手に「brタグ」(=改行)が仕込まれてしまって、デザインがおかしくなってしまう。

そのため次に紹介するCSSではアプリーチ内のbrタグのみ無効にしている。

ベーシックパターン

f:id:hogehoge223:20161118120628p:plain

ボーダーや軽いシャドーで枠を作って、アプリ名を強調、その他の属性を控えめに表示。
全体的に余白も大きめにとっているので、ほとんどのブログで違和感なく表示できるように調整した。

CSSは以下の通り。

#appreach-box {
  max-width: 500px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1.4;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06);
}

#appreach-box br {
  display: none;
}

#appreach-image {
  margin-right: 15px !important;
  margin-bottom: 0 !important;
}

#appreach-appname {
  color: #3a3a3a;
  font-size: 1.35em;
  font-weight: bold;
}

#appreach-developer, #appreach-price, .appreach-powered {
  color: #888;
  font-size: 11px !important;
}

#appreach-box .appreach-links {
  margin-top: 10px;
}

#appreach-itunes-link {
  margin-right: 10px;
}

#appreach-box .appreach-links img:hover {
  opacity: 0.8;
}

ブラックスタイル

f:id:hogehoge223:20161118120534p:plain

黒い。黒こそが正義。
そんな中二病精神をくすぐるデザインになっている。

CSSは以下の通り。

#appreach-box {
  max-width: 500px;
  color: #fff;
  background: #4a4a4a;
  padding: 4px 6px;
  line-height: 1.4;
  border-radius: 4px;
}

#appreach-box a {
  color: #fff;
}

#appreach-box br {
  display: none;
}

#appreach-image {
  margin-right: 15px !important;
  margin-bottom: 0 !important;
}

#appreach-appname {
  font-size: 1.35em;
  font-weight: bold;
}

#appreach-developer, #appreach-price, .appreach-powered {
  color: #bbb;
  font-size: 11px !important;
}

#appreach-box .appreach-links {
  margin-top: 10px;
}

#appreach-itunes-link {
  margin-right: 10px;
}

#appreach-box .appreach-links img:hover {
  opacity: 0.8;
}

サンプルはこちら

実際にブラウザでどんな感じになっているか確かめたい人のためにサンプルを用意している。

まとめ

以上がアプリーチの使い方およびCSSカスタマイズのサンプルだ。
デフォルトだと味気ないし、はてなでは崩れてしまうので、カスタマイズしたものを使ってもらえればありがたい。

こんなスタイルのものがほしいという場合はコメントでリクエストしてもらって、暇だったら使ってみようかと思うので、要望があればコメント欄までどうぞ。