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

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 フォーラム