【THE THOR】アプリーチを利用する際のCSSカスタマイズ

【THE THOR】でアプリーチを利用する際に、アプリーチ公式で配布しているCSSを使用するとレイアウトが崩れてしまいます。

この記事では、それを回避するためのCSSカスタマイズデザインを6種類用意しました。コピー&ペーストするだけで利用可能になっています。

 

この記事のカスタマイズは、2018年4月9日に仕様変更された新コード用CSSについてのみ掲載しています。

 

アプリーチの設定時、Android版がある場合、画像アイコンはAndroid版を使用するようにしてください。iPhone版はhttpsに完全対応しておらず、httpsサイトで表示されないものがあるようです。

また、Android版とiPhone版のダウンロードリンクアイコンはそれぞれ画像のサイズが異なっていますのでCSSでサイズ調整をしていないと片方のアイコンだけはみ出したりする場合があるので注意して下さい。

 

スポンサーリンク

アプリーチ公式のCSS使用時

 
アプリーチのデフォルトCSS使用時

AppreachデフォルトCSS

【THE THOR】固有のCSS設定が影響してレイアウトが崩れています。

 
 

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

デフォルトのレイアウトを含めて、カスタマイズデザインを6種類用意しました。お好みのデザインのCSSをstyle-user.cssにコピー&ペーストして利用してください。

 

アイコンの画像サイズ変更について

この記事内にあるカスタマイズCSSは、アプリ名等の説明文が1行ずつの場合のエリアサイズに合わせてアイコンの画像サイズを【120px】から【100px】に変更しています。

CSSの該当箇所は【.appreach__icon】classの【max-width】プロパティになりますので環境に合わせて好きなサイズに調整して下さい。
 

.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 100px !important;
}

 
 

カスタマイズCSS1

レイアウト崩れの調整のみ行ったカスタマイズです。

cssカスタマイズ00

  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 p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

カスタマイズCSS2

ボックスの外側に影を入れています。

cssカスタマイズ01

  CSSは右端の+をクリック
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
  box-shadow:1px 1px 4px 1px #999;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

カスタマイズCSS3

ボックスの内側に影を入れています。

CSSカスタマイズ02

  CSSは右端の+をクリック
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
  box-shadow:1px 1px 3px 1px inset #999;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

カスタマイズCSS4

ボックスのコーナーを丸めて、色を【#8fb1db】、スタイルを1本線(左右)、2本線(上下)にしています。

CSSカスタマイズ03

  CSSは右端の+をクリック
.appreach {
  text-align: left;
  padding: 10px;
  border-top: 7px double #8fb1db;
  border-bottom: 7px double #8fb1db;
  border-left: 10px solid #8fb1db;
  border-right: 10px solid #8fb1db;
  overflow: hidden;
  border-radius: 20px;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

カスタマイズCSS5

ボックスのコーナーを丸めて、色を【#8fb1db】、スタイルを2本線にしています。

CSSカスタマイズ04

  CSSは右端の+をクリック
.appreach {
  text-align: left;
  padding: 10px;
  border: 5px double #8fb1db;
  overflow: hidden;
  border-radius: 10px;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

カスタマイズCSS6

ボックスのボーダーを上下のみにしてコーナーを丸めて、色を【#8fb1db】、スタイルを2本線にしています。

CSSカスタマイズ05

  CSSは右端の+をクリック
.appreach {
  text-align: left;
  padding: 10px;
  border-top: 7px double #8fb1db;
  border-bottom: 7px double #8fb1db;
  overflow: hidden;
  border-radius: 20px;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach p::after {
  display: none;
 }
.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: 100px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
  margin-top: 0 !important;
}
.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 !important;
  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;
}

 

※プラグイン等の有無など環境によっては同じには表示されない場合がありますのでご注意下さい。