キャッチコピーの余白を調整するCSSの例

キャッチコピーの余白を調整する

キャッチコピーのフォントサイズは全体の設定に影響されます。
そのため、キャッチコピーだけ少し小さくしたい場合や、下部の余白を調整したい場合はCSSでカスタマイズします。

「外観」>「カスタマイズ」>「テーマ設定」から
「全体の設定」内の「メインコピー」が該当の箇所

CSSの追加

キャッチコピーの調整

.mv__copy {
font-size:.8em;
margin-bottom:30px;
margin-top:-10px;
}
@media screen and (max-width:639.98px) {
.mv__copy {
font-size:.9em;
margin-bottom:10px;
margin-top:-20px;
}
}

上記のようにPC表示、スマホ表示で微調整をおこないます。

CSSの記述場所について

子テーマを利用の際は「style.css」に記述しましょう。
カスタマイズの「追加CSS」に記述することも可能ですが、その場合はテーマのアップデート時にご注意ください。
※同名のフォルダでアップデートする場合、カスタマイズの内容は保持されますが念のためバックアップをお取りください。