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

アプリーチ-ボタンの大きさ調整【CSS】

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

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

アプリーチのGoogle Playボタンがはみ出てしまう

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

アプリーチの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を採用しています)

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;
}
}

おわりに

アプリーチのボタンの大きさをスマホ向けに調整する方法を紹介しました。

アプリをダウンロードするユーザーはスマホでページを閲覧している場合が多いため、スマホに最適なサイズに整えるのがおすすめです。

例で紹介した絵しりとりアプリ「ILLUST CHAINER」も面白いので、ぜひ遊んでみてください。(ダウンロード無料です)

illust-chainer-絵しりとりアプリマルチプレイで遊ぶ絵しりとりアプリが超面白い!
Illust Chainer みんなでつなげる絵しりとり

Illust Chainer みんなでつなげる絵しりとり

gun's Turn無料posted withアプリーチ