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

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;
}

SWELLのデフォルトの状態だとちょっと文字が小さいなーって思うと思うので是非こちらのCSS試してみてくださいね♪

SWELLのテンプレ―トのCSSカスタマイズの依頼も受け付けております^^

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SWELLでサイトのカスタマイズが大好きです!SWELLのすごさをもっと色々な人に広めたい♪

目次