CSSでサイトタイトルのフォントサイズ変更するカスタマイズ例

CSS
この記事は約2分で読めます。

Cocoonの、テキストサイトロゴのフォントサイズを変更するCSSコード例です。

子テーマのstyle.cssに貼り付けて、数値を調整してご利用ください。

/*デフォルトのサイトタイトルサイズ*/
.site-name-text{
  font-size: 28px;
}

/*ヘッダーレイアウトがトップメニューのとき*/
.header-container-in.hlt-top-menu .site-name-text{
  font-size: 22px;
}

/*ヘッダーレイアウトがトップメニュー(小)のとき*/
.header-container-in.hlt-top-menu.hlt-tm-small .site-name-text{
  font-size: 20px;
}

/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
  #header .site-name-text{
    font-size: 22px;
  }
}

/*端末幅が480px以下のとき*/
@media screen and (max-width: 480px){
  #header .site-name-text{
    font-size: 18px;
  }
}

ヘッダーのサイトテキストタイトルであれば、上記あたりがポイントとなると思います。

タイトルとURLをコピーしました