『アプリーチ』CSSをコピペでカスタマイズ〈はてなブログ〉

アプリを紹介するためのブログパーツ『アプリーチ』ってご存知ですか？

これを使うと、iPhone用とAndroid用を合わせて紹介することができてとっても便利！

使い方も簡単なので、ブログでアプリを紹介する際はぜひ利用してみてください(*´ω｀*)

アプリーチって？
アプリーチのカスタマイズ
アプリーチカスタマイズまとめ

アプリーチって？

f:id:setuyakuhappylife:20200118104837j:plain

アプリーチはままはっくのまなしばさんの旦那さまが作ったサービスです。

⇒アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。

サイトにアクセスして、アプリ名を検索すると、コードが表示されます。

それをブログに貼り付けるだけで、簡単にアプリが紹介できてしまいます。

iTunesアフィリエイトのコードを入れることもできます。

（※現在ではiTunesアフィリエイトでアプリは対象外になっているようです）

アプリーチのカスタマイズ

f:id:setuyakuhappylife:20170316092322p:plain

アプリーチをそのまま貼り付けると、枠も何もないシンプルな状態です。

これに枠をつけるカスタマイズをしてみました。

カスタマイズ後がコチラ！

f:id:setuyakuhappylife:20170316092432p:plain

破線で囲って、タイトルを強調。余白の調整を行いました。

コードを作る際、こちらの記事を参考にさせていただきましたm(_ _)m

⇒スマホアプリ紹介ツール「アプリーチ」の使い方とCSSデザイン

旧コード版

コードはコチラ↓

/* アプリーチ（ver.1.1） */
#appreach-box {
 border: 1px dashed #BDBDBD;
 max-width: 500px;
}
#appreach-appname {
 font-weight: bold;
}
.appreach-links{
 margin-top: 10px;
}
.appreach-footer{
 margin-bottom: 0;
 line-height: 0;
}

＊2017.3.23修正　ver.1.1

幅600px以上でデザインが崩れてしまったので、max-width :500px; を追加。

新コード版

/* アプリーチ（ver.2.0） */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px dashed #BDBDBD;
  max-width: 640px;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

これをCSSにコピペしてください。

はてなブログで表示確認していますが、他のブログでも使えると思います。