【JIN:Rカスタマイズ】アプリーチの表示崩れを応急処置するCSS

先ほど気づいたのですが、iPhone,Androidアプリを紹介するブログパーツを

瞬時に作成することができるツールの「アプリーチ」について、

JIN:Rに内包されているCSSを適用すると表示が崩れてしまいます。

応急処置として以下のコードを書きましたので、ご紹介します。元の出典はNomad Codeさんの雛形を利用してそこに少し修正を加えました。

まず、JIN:Rカスタマイズ→その他の設定→外部読み込み→アプリーチデザインを読み込むをOFFにしてください。

それから以下のコードを追記すれば一応の崩れは解消していると思われます。

/*
 * Copyright (c) NomadWorks
 * Design: NomadCode
 * https://www.code.nomad.inc/
 */

.appreach {
  text-align: left;
  box-shadow: 0px 0px 6px #000000;
  background: #FFF;
  max-width: 600px !important;
  width: 100% !important;
  padding: 30px;
  margin: 15px 0px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.appreach:after {
  content: "";
  display: block;
  clear: both;
}

.appreach p {
  line-height: 1.8em !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

.appreach a:after {
  display: none;
}

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

.appreach__detail {
  display: inline-block;
  line-height: 1.5;
  width: 72%;
}

.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}

.appreach__name {
  font-size: 15px !important;
  color: #323232 !important;
  line-height: 1.5em !important;
  font-weight: bold !important;
  max-height: 3em;
  overflow: hidden;
}

.appreach__detail .appreach__name {
  line-height: 1.3em !important;
  padding-bottom: 5px !important;
}

.appreach__detail .appreach__info .appreach__posted {
  line-height: 1.3em !important;
  font-size: .8em !important;
}

.appreach__info {
  font-size: 12px !important;
  color: #929292 !important;
}

.appreach__posted {
  font-size: .9em !important;
}

.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}

.appreach__posted a {
  margin-left: 0.8em;
  color: #55A8DC !important;
}

.appreach__links {
  display: flex;
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}

.appreach__aslink {}

.appreach__aslink img {
  height: 40px;
  -webkit-backface-visibility: hidden;
  margin-right: 10px;
}

.appreach__gplink img {
  height: 40px;
  -webkit-backface-visibility: hidden;
}

@media(max-width:460px) {
  .appreach {
    overflow: hidden;
    max-width: 300px !important;
    padding: 25px 15px 0px 15px;
    margin: 15px auto;
  }
  .appreach__detail .appreach__name {
    line-height: 1.3em !important;
    padding-bottom: 5px !important;
    font-size: .7em !important;
  }
  .appreach__posted {
    font-size: .7em !important;
  }
  .appreach__icon {
    width: 25% !important;
  }
  .appreach__info {
    font-size: 10px !important;
  }
  .appreach__links {
    margin: auto;
    margin-top: 5px;
    float: left;
    display: table;
    padding-top: 5px;
    padding-bottom: 30px;
  }
  .appreach__aslink img, .appreach__gplink img {
    margin-right: 2px;
    height: 40px;
  }
}

以上です〜。