コードに付いて

Question

以下のコードで画像を表示すると上の空白が開いております。
上の空白を詰めるような事は出来ますか？



	.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;
		}
	
	
			
				
					
						
							 $Index$位
						
					  $GoodsName$

Answer

ECマスターズの伊藤です。

> 以下のコードで画像を表示すると上の空白が開いております。
> 上の空白を詰めるような事は出来ますか？

コードを拝見させていただきましたが
こちらのみでは、判断することができないため
お手数ですが、実際に設置頂いているページの
URLを頂戴できますでしょうか。

フォーラムへの投稿が難しい場合は
一番最初の投稿の右下にございます
「投稿内容について報告する」より
お知らせいただきますようお願いします。

Answer

ECマスターズの田中です。

実際のページをお送りいただき、
ありがとうございました。

上の空白は本来、順位を表示するためのスペースのようですが、
CSSで文字サイズが0pxに設定されており、
直上の文字が「ランキング」ではなく「オススメ」になっているということは、
順位を表示される予定はないということでしょうか。

その場合は、
.nms-plugin .ranknumber
の height を 40px から 0px にご変更いただき、
このスライドバナーを設置するためのiframeの高さ（height）も
40pxぶん減らして（280→240）いただきますようお願いします。

Answer

田中さんありがとうございます！
おかげさまで出来ました。
しかしスライドの矢印位置がずれたのですが、位置は動かせますか？、また矢印の色は変えられますか？

Answer

ECマスターズの塚本です。

いただいたご質問ですが週明けに担当より回答させて
いただきますので今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

> スライドの矢印位置がずれたのですが、位置は動かせますか？、また矢印の色は変えられますか？

いずれも、スタイルシートの規則を追加して、
既存の規則を上書きすることで可能です。

まずは、スタイルシートに下記規則の追加をお願いします。

= この下の行から ====================
.nms-plugin .swiper-button-next,
.nms-plugin .swiper-button-prev {
  margin-top: -42px;
}
.nms-plugin .swiper-button-next,
.nms-plugin .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.nms-plugin .swiper-button-prev,
.nms-plugin .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
= この上の行まで ====================

上記規則では、
矢印を20px上にずらし（上方向の余白を-22から-42に変更）、
色を黒（#000000）に変更しております。

矢印の上下位置は、上記規則のmargin-topの値を、
色は、background-imageの値に含まれる「000000」の部分（左右１つずつ・計２つ）を
それぞれご変更いただきますようお願いします。

Answer

田中さん設置出来ました。
ありがとうございました！