\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

Cocoonの記事タイトルのフォントサイズ(文字サイズ)を変更する方法

スマホから見えない!Cocoon記事タイトルの文字サイズ(フォントサイズ)を変更する方法 エラー解決
スマホから見えない!Cocoon記事タイトルの文字サイズ(フォントサイズ)を変更する方法
この記事は約3分で読めます。

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

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

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

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

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

Cocoonの記事タイトルの文字(フォント)サイズを変更する方法
Cocoonの記事タイトルの文字(フォント)サイズを変更する方法
スポンサーリンク

1.スマホから見た時の文字(フォント)サイズの変更の仕方

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

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

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

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページです。


手順① ー

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

cocoonの記事タイトルの文字(フォント)サイズを変更する方法
クリックすると拡大します


手順②

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

style.cssに張り付けるコード
/*480px以下*/
@media screen and (max-width: 480px){
  .article h1{
    font-size: 18px !important;
}	  
}


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

cocoonの記事タイトルの文字(フォント)サイズを変更する方法
クリックすると拡大します


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

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

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

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

2.PCから見た時の文字(フォント)サイズの変更の仕方


手順①

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

cocoonの記事タイトルの文字(フォント)サイズを変更する方法_PC
クリックすると拡大します


手順② ー

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

PCから見た時のフォントサイズ変更
/*記事タイトル(h1)フォントサイズ変更*/
.article h1{
  font-size: 23px;
}


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

cocoonの記事タイトルの文字(フォント)サイズを変更する方法_PC
クリックすると拡大します


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


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