grayishスキン適用中

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

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

CSS

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

\WordPressの情報を発信中!/

わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

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