スマホから見えない！Cocoonの記事タイトルのフォントサイズ（文字サイズ）を変更する方法

この記事では、Cocoonの記事タイトルのフォントサイズ（文字サイズ）の変更の仕方をご紹介します。

頑張って記事のタイトルを考えたのに、SNSシェアボタンとかぶってちゃんと見えない！

もしくは、タイトルの文字（フォント）サイズを変更したけど、スマホから見ると変更されていない！な方、いらっしゃいませんか？

その問題を解決するコピペcssを今日は用意しました。

これを張り付けるだけで、スマホから見ても文字タイトルがちゃんと見えるようになりますよ。

１．スマホから見た時の文字（フォント）サイズの変更の仕方

まず、フォントサイズを変更する前に。

Cocoonの子テーマはダウンロード済みでしょうか？

もしダウンロードしていないようでしたら、子テーマをダウンロードして、適用させておいてください。（子テーマのcssをカスタマイズするため）

ー手順① ー

ダッシュボード＞外観＞テーマエディター＞ style.css を開く。

ー 手順② ー

↓6行のコードをコピーして、画像の青色ラインの4行の部分に張り付けて下さい。

style.cssに張り付けるコード

/*480px以下*/
@media screen and (max-width: 480px){
  .article h1{
    font-size: 18px !important;
}	  
}

貼り付けて↓こうなっていたら正解○

これでファイルを更新を押して、スマホから自分のサイトを見てみてください。

フォントがSNSシェアボタンに被らずに出ていると思います。

↑のコードではサイズが18pxになっていますが、この数字を触ってお好きな大きさに変更してくださいね。

数字が大きくなればフォントが大きくなり、数字が小さくなればフォントも小さくなります。

ー 手順① ー

ダッシュボード＞外観＞カスタマイズ＞追加CSS を開く。

ー手順② ー

↓4行のコードをコピーして空白部分に張り付けて下さい。

PCから見た時のフォントサイズ変更

/*記事タイトル（h1）フォントサイズ変更*/
.article h1{
  font-size: 23px;
}

貼り付けて↓こうなっていたら正解○

最後に公開⚙を押すと、フォントサイズが変更されています。

＼あわせて読みたい／