grayishスキン適用中

吹き出しの文字サイズを端末ごとに切り替えるCSS記述

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

Cocoonの吹き出し機能の文字サイズを、PC、タブレット、スマホ毎に切り替えるCSSの紹介です。

まずはCocoonを最新版にアップデートしてください。古いバージョンだと、うまくいかない場合があります。

以下のスタイルシートを子テーマのstyle.cssにコピペ等で追記してください。

/*パソコン*/
.speech-wrap {
  font-size: 18px;
}

/*おおよそタブレット*/
@media screen and (max-width: 768px) {
  .speech-wrap {
    font-size: 17px;
  }
}

/*おおよそスマホ*/
@media screen and (max-width: 480px) {
  .speech-wrap {
    font-size: 16px;
  }
}

最後に、font-sizeを好みに合わせて調節してください。

トピック 吹き出し機能の文字サイズ | Cocoonテーマに関する質問 | Cocoon フォーラム

CSS

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

\WordPressの情報を発信中!/

わいひら

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

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

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

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

サービス運営期間:20年

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