ロゴ

(更新日:

【余白修正】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コードは削除してください。

sharehtmlの修正後のCSSコードの貼り方【手順】

修正する前にも一度リンクカードは作ってると思いますが、念の為貼り方を解説しておきます。

WordPressを使ってCSSを張り替えるやり方です。

1, 外観カスタマイズ を選択

CSS-カスタマイズ設定

2, 追加CSS を選択し、先ほどのCSSコードをコピペしてください。

CSS-カスタマイズ設定2

3, 完了

上手くリンクカードが反映しない場合

CSSだけでなく、HTMLの貼り付け方を見直しましょう!

Gutenbergエディタの場合は カスタムHTML 内にコードを貼り付ける必要があります。

1, ボタンを選択

グーテンベルグ

2, カスタムHTML を選択

グーテンベルグ-設定2

3, HTMLコードが入力できる枠が生成

グーテンベルグ-設定3

4, 枠内にリンクカードを生成した時のHTMLコードを貼り付ける

グーテンベルグ-設定4

これでプレビューで確認すると綺麗に反映されてると思います。

クラシックエディタの場合

クラシックエディタでは テキスト 画面の方にリンクカードを生成したHTMLコードを貼り付ければ上手く反映されます。

クラシックエディタ-設定

今回は以上です。

ぜひ試してみてください。

人気記事 【全公開】ブログの立ち上げ方法/サイト作成完全マニュアル【無料】

人気記事 【就職サポートあり】動画編集のおすすめオンラインスクール【5社】

                                                                   

Resources