• 文字サイズ


解決済

コードに付いて

  • 相談者:非公開
  • 2019/11/08 16:22
以下のコードで画像を表示すると上の空白が開いております。
上の空白を詰めるような事は出来ますか?


<div class="container-fluid"><div class="row">
<style>.nms-plugin {
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.nms-plugin ul {
margin: 0;
padding: 0;
}
.nms-plugin li {
width: 170px;
display: inline-block;
margin-right: 10px;
}
.nms-plugin .goodsimg {
width: 170px;
height: 170px;
display: block;
background-color: #fff;
}
.nms-plugin .goodsimg img {
max-width: 170px;
max-height: 170px;
margin: 0 auto;
}
.nms-plugin .goodsname {
height: 35px;
overflow: hidden;
margin: 5px 10px;
display: block;
color: #333;
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
word-break: break-all;
}
.nms-plugin .goodsprice {
color: red;
}
.nms-plugin a img {
max-width: 84px;
max-height: 84px;
}

.nms-plugin .ranknumber {
width: 170px;
height: 40px;
letter-spacing: 2px;
text-align: center;
color: #bf0000;/*ランキング文字色*/
font-size: 20px !important;
}

.nms-plugin .ranknumber .rankico1 {
background-image: url(nms-plugin-rank1.png);
background-size: cover;
width: 0px;
height: 0px;
}

.nms-plugin .ranknumber .rankico2 {
background-image: url(nms-plugin-rank2.png);
background-size: cover;
width: 0px;
height: 0px;
}

.nms-plugin .ranknumber .rankico3 {
background-image: url(nms-plugin-rank3.png);
background-size: cover;
width: 0px;
height: 0px;
}

.nms-plugin .ranknumber .ranktext {
font-size: 0px;
font-weight: bold;
}

.nms-plugin .ranknumber .ranktext span {
display: inline-block;
}
</style>
<div class="swiper-container nms-plugin" data-perview-xs="2" data-perview="4">
<ul class="swiper-wrapper" data-id="64f74c72-906e-496f-be55-cad69d8c6c81" isbind="0" data-id-use="04b6e4b1-9f79-4b90-a1f9-b1a0de251ab8">
<li class="swiper-slide" data-swiper-autoplay="10000">
<div class="ranknumber">
<div class="ranktext">
<span class="rankico$Index$"></span> $Index$<small>位</small>
</div>
</div> <a class="goodsimg center-block" href="$GoodsUrl$" target="_top"><img class="img-responsive center-block" alt="$GoodsName$" src="$GoodsImages$"></a> <a class="goodsname text-center" href="$GoodsUrl$" target="_top">$GoodsName$</a>
</li>
</ul>
<div class="swiper-pagination hidden">
</div>
<div class="swiper-button-next">
</div>
<div class="swiper-button-prev">
</div>
</div>
</div>
</div>
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2019/11/08 19:33
ECマスターズの伊藤です。

> 以下のコードで画像を表示すると上の空白が開いております。
> 上の空白を詰めるような事は出来ますか?

コードを拝見………(省略)………
  • 返信者:非公開
  • 2019/11/08 20:02
ECマスターズの田中です。

実際のページをお送りいただき、
ありがとうございました。

上の空白は本来、順位を表示するためのスペースのようですが、 ………(省略)………
  • 返信者:非公開(質問者)
  • 2019/11/08 21:25
田中さんありがとうございます!
おかげさまで出来ました。
しかしスライドの矢印位置がずれたのですが、位置は動かせますか?、また矢印の色は変えられますか?………(省略)………
  • 返信者:非公開
  • 2019/11/09 11:57
ECマスターズの塚本です。

いただいたご質問ですが週明けに担当より回答させて
いただきますので今しばらくお待ちいただければと思います。………(省略)………
  • 返信者:非公開
  • 2019/11/11 14:03
ECマスターズの田中です。

> スライドの矢印位置がずれたのですが、位置は動かせますか?、また矢印の色は変えられますか?

いずれも、スタイルシートの………(省略)………
  • 返信者:非公開(質問者)
  • 2019/11/11 18:33
田中さん設置出来ました。
ありがとうございました!………(省略)………
このフォーラムへの質問は終了しました