先ほど気づいたのですが、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;
}
}
以上です〜。