アプリーチのアプリダウンロードボタンをスマホ向けに調整する方法

Apple Store, Google Playのアプリ紹介リンクを簡単に作成できるツール「アプリーチ」。

アプリーチ用のCSSをひつじアフィリエイトさんのカスタマイズ記事を参考に編集したところ、画面の小さいスマホだとGoogle Playボタンが隠れてしまう問題が発生しました。

今回はアプリーチのボタンの大きさを調整し、スマホで見たときのデザインをいい感じに調整する方法を紹介します。

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品やサービスの購入・申し込みによって、当サイトに売り上げの一部が還元されます。

アプリーチのCSSを調整する方法
おわりに

目次へ

アプリーチのCSSを調整する方法

アプリーチ公式CSS

アプリーチ公式ページのCSSをstyle.cssに追加すると、スマホでは以下のようなデザインになります。

アプリーチ公式のCSS

style.css

.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  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;
}

デザインパターン3

このCSSをまるっとひつじさんのカスタマイズ記事の通りに書き換えると、こうなります。（私はデザインパターン3を採用しています）

ひつじさんのCSS（パターン3）

style.css

.appreach{
  border:3px solid #eee;/*ボーダー色*/
}
.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach img,
.appreach p {
  margin: 0;
  padding: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;
}
p.appreach__name {
  font-size: 16px;
  color:#555;
  padding-bottom:10px;
  font-weight:bold;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
  color:#888;
}
.appreach__info a{
  color:#aaa;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
  margin:20px 0;}
.appreach__info {
  font-size: 11px !important;}
p.appreach__name {
  font-size: 15px;}
}

参考記事

ひつじアフィリエイト：【コピペで完成】アプリーチのデザインCSS配布！全7種類用意したのでお好みをどうぞ

ダウンロードボタンが大きく、ボックスの下に隠れてしまっています。

これを解決するために、iOS、Google Playのボタンをそれぞれスマホ表示時のみ小さくする処理を施します。

具体的には、@media only screen and (max-width: 786px)のコードに追記をします。

style.css

@media only screen and (max-width: 786px){
.appreach{
  margin:20px 0;}
.appreach__info {
  font-size: 11px !important;}
p.appreach__name {
  font-size: 15px;}
.appreach__aslink img/*App Storeボタンの大きさ調整*/ {
  height: 35px;
  width: 118.125px;
}
.appreach__gplink img/*Google Playボタンの大きさ調整*/ {
  height: 35px;
  width: 118.125px;
}
}

完成したコード

スマホ表示でも、ダウンロードボタンがいい感じの大きさで表示されるようになりました。

上記のパーツをそのまま使いたい場合は、以下のコードをコピーしてお使いください。

完成形のコード

style.css

.appreach{
  border:3px solid #eee;/*ボーダー色*/
}
.appreach{
  text-align: left;
  padding: 25px;
  margin:20px;
  border-radius:2px;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach img,
.appreach p {
  margin: 0;
  padding: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;
}
p.appreach__name {
  font-size: 16px;
  color:#555;
  padding-bottom:10px;
  font-weight:bold;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
  color:#888;
}
.appreach__info a{
  color:#aaa;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 15px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
@media only screen and (max-width: 786px){
.appreach{
  margin:20px 0;}
.appreach__info {
  font-size: 11px !important;}
p.appreach__name {
  font-size: 15px;}
.appreach__aslink img/*App Storeボタンの大きさ調整*/ {
  height: 35px;
  width: 118.125px;
}
.appreach__gplink img/*Google Playボタンの大きさ調整*/ {
  height: 35px;
  width: 118.125px;
}
}