【SWELL】トップページのメインビジュアルメインテキストの見出しのサイズを変更する方法

SWELLのトップページのメインビジュアルの見出しの文字の大きさがデフォルトだとちょっと小さいから大きくしたいのでCSSでカスタマイズしてみました!

備忘録の意味もこめてこちら作業方法をブログにて紹介します♪

目次

SWELLトップページのメインビジュアルのメインテキストフォントサイズを変更する方法-CSSでカスタマイズ-

/*★トップページのメインビジュアルメインテキストの見出しのサイズを変更★*/
/*メインテキストのフォントサイズ*/
.p-mainVisual__slideTitle{
  font-size:50px;  

}

/*サブテキストのフォントサイズ*/
.p-mainVisual__slideText{
  font-size:20px;  
}

/*ボタンテキストのフォントサイズ*/
.c-mvBtn__btn{
  font-size:15px;  
}

/*スマホの場合*/
/*メインテキストのフォントサイズ*/
@media (max-width: 480px){
.p-mainVisual__slideTitle{
  font-size:35px;  
}
	/*サブテキストのフォントサイズ*/
.p-mainVisual__slideText{
  font-size:15px;  
}
}

トップページのメインビジュアルのメインテキストの文字間隔も調整

使用するフォントや文字によってはメインビジュアルのトップページの見出しのところだけ文字間隔を開けたい場合もあるかと思います。

その場合に使うのがこちらのCSS

.p-mainVisual__slideTitle {
letter-spacing: 0.1em;
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次