2020/02/19 (更新日: 2020/03/16)

【余白修正】sharehtmlをもっと綺麗にしたメーカー/CSS

CSS HOW TO

sharehtmlをもっと綺麗にしたメーカーを実際に使ってリンクカードを作ってみたんだけど、枠の下に余白ができて、見栄えが悪くなっちゃんたんだけど、どうしたら余白が出ずに綺麗に反映されるの？

こんな疑問にお答えます。

余白はこんな感じかな・・↓

参考：sharehtmlをもっと綺麗にしたメーカーの作り方についてはこちらのブログを参考にしてみてください。
▶︎ あなたのスイッチを押すブログ

こんにちは　YASUです。

sharehtmlをもっと綺麗にしたメーカーは、使い方も簡単でシンプルだし、こんな機能を無料で提供されてる「manablog」運営のマナブさんにはほんと感謝ですね。
でも、ちょっと余白があって気になりました。

結論：下記でご紹介するCSSをコピペするだけで綺麗になります。

【余白修正】sharehtmlをもっと綺麗にしたメーカー/CSS

モニター・余白

下記のCSSコードを丸ごとブログ記事のCSSに貼り付けてください。

/*-----New Share HTML----*/

.link-box {
	border:1px solid #e1e1e1;
	padding:10px;
	display:flex;
	margin:30px;
}

.link-box:hover {
	background-color:#f3f3f3;
	-webkit-transition:background-color .35s;
	transition:background-color .35s;
}

.img-box {
	width:25%;
	float:left;
}

.img-box div {
	min-height:170px;
	background-size:cover;
	background-position:center center;
}

.text-box {
	width:75%;
	float:left;
	padding-left:20px;
	line-height:1.7;
	margin:0;
}

.text-box .title {
	font-size:18px;
	font-weight:600;
	color:#428bca;
	padding:0;
	margin:0;
}

.text-box .description {
	font-size:15px;
	color:#333;
	padding:0;
	margin:0;
}

@media only screen and (max-width:479px) {

.img-box div {
	min-height:80px;
}

.text-box {
	margin-left:10px;
	line-height:1.5;
}

.text-box .title {
	font-size:13px;
	margin:0;
}

.text-box .description {
	font-size:11px;
	margin-top:5px;
}
}

/*-----ここまで：New Share HTML----*/

すると余白もなく、綺麗なリンクカードができました。

反映されてない場合は画面のキャッシュクリアをしてみましょう。

※ 以前、リンクカードを作った時の余白が出たCSSコードは削除してください。