【初心者用】WordPress コクーン 記事タイトル(h1)のフォントサイズをスマホ表示だけ変更する方法

pool_koku-n1
あき
あき
どうも!POOLライターの"あき"です!

当ブログでは、WordPressテンプレートにCocoon(コクーン)を使わせてもらっています。あなたもCocoon使っていますか?

無料なのにエグいほどの機能性を兼ね備えているので、正直もうCocoon以外のテンプレートは使えないw

さて、そんなCocoonですが、スマホ表示したときの「記事タイトル(h1)」のフォント(文字)サイズがやたらデカくないですか?スキンの違いにもよるのでしょうか?

何が困るって、追加CSSカスタマイズから「記事タイトル(h1)」のフォントサイズ変更をしても、スマホで表示すると追加したCSSが適用されていないようなのです。(これについては、後ほど詳しく記述します。)

「コクーンはレスポンシブだから、CSS追加したらパソコン表示もスマホ表示もフォントサイズが変更されるんじゃないの?」

パソコン表示ではちゃんとフォントサイズが変わっているんですけどね。筆者はプログラミング初心者なので、「なぜスマホには適用されないのか」は分かりませんでした。

しかし、「メディアクエリ」という要素を使って、スマホで表示したときの「記事タイトル(h1)」のフォントサイズの変更に成功したので、これを備忘録として残しつつ、同じように困っているあなたにシェアしたいと思います。

ソースコードをコピペで、指定した箇所に貼ってもらえればOKなので、とても簡単です。

この記事では、WordPressの無料テンプレートである、cocoonを使用している場合を想定して手順紹介しています。他のテンプレートをお使いの場合は、ソースコードを貼り付けるファイルの場所や開き方が、紹介手順と異なる可能性がありますので、ご了承ください。
この記事を読むと分かること
  • 追加CSSでスマホ表示における記事タイトル(h1)のフォントサイズが変更されない場合に、「メディアクエリ」要素を使ってスマホ表示時のフォントサイズを変更する方法

スポンサーリンク
スポンサーリンク

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

さて、この記事ではCSSで「記事タイトル(h1)」のフォントサイズ指定をすでに行っていることを前提にはなしを進めております。

「そもそも、記事タイトル(h1)のフォントサイズ指定ってどうやるの?」

ということであれば、WordPressのサイドメニュー より、外観 >カスタマイズ >追加CSS(※テンプレートがコクーンの場合)に下記コードを貼り付けて更新してみてください。

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

どうでしょうか?記事タイトルのフォントサイズは変わりましたか?ちなみに「px」のところの数字は、お好きなサイズで変更してくださいね。

パソコン表示であれば、おそらく問題なくフォントサイズが変更されていると思います。大事なのは、「スマホで表示したときも、フォントサイズが適度なサイズで表示されているか」です。

スマホで表示したときに、フォントサイズが問題ないように感じるのであれば、ここで終わりです。もしも表示されているフォントサイズが納得いかなければ、まずは1度レスポンシブが効いているかを確認してみてください。

確認方法としては、先ほど追加CSSに書き込んだコードのフォントサイズを、1度50pxくらいにして、公開をしてみましょう。50pxにするのは、CSSが適用されているかを分かりやすくするためです。

パソコンで表示してみると、記事タイトルがバカでかくなっていることが確認できると思います。

それでは、スマホ表示ではどうですか?「あれ?さっきとサイズが変わってないぞ?」という場合は、指定したCSSがスマホにうまく適用されていないかもしれませんね。

なぜなのか、筆者もあまり詳しいことは分からないのですが、これからお伝えする「メディアクエリ」という要素を使って、スマホ表示したときの記事タイトル(h1)をフォントサイズ変更することができましたので、指定のファイルにコピペして運用してください。

メディアクエリを使ってスマホ表示時のフォントサイズを指定する

pool_koku-n2

「メディアクエリ」とは、超簡単に説明すると「ディスプレイのサイズごとに、見せ方を指定できる」CSS機能です。

例えば、Webページを見ている端末の「ディスプレイ幅が480px以下(スマホ)の場合は、文字サイズを〇〇pxで表示するよ。」、「ディスプレイ幅が800px以下(スマホまたはタブレット)の場合は、文字サイズを〇〇pxで表示するよ。」といった具合に、ユーザーがWebページを見る環境(デバイス)に応じて、CSSデザインを切り替えることができます。

これを使うことで、パソコン表示とは切り分けて、スマホで表示したときの記事タイトル(h1)のフォントサイズを指定することができました。それでは、スマホ表示で記事タイトル(h1)のフォントサイズを変更することができるコードと、そのコードを貼る場所をお伝えします。

コピペでOK!ソースコード&貼る場所

pool_koku-n3

テーマ編集をしますので、cocoonの子テーマをインストールしていない場合は、子テーマをインストール後、有効にしてから進んでくださいね。

↓なぜ子テーマが必要なのかは、cocoon作者のわいひらさんの記事から確認してください。↓

Cocoonテーマをインストールする方法
WordPressにCocoon親テーマと子テーマをインストールして利用するおすすめのインストール方法です。
pool_koku-n5

※クリックで画像拡大

まずは、WordPressのサイドメニューから、外観 >テーマ編集へ。「Cocoon Child: スタイルシート (style.css)」というファイルページになっていると思います。その項目内に「レスポンシブデザイン用のメディアクエリ」と記述されている場所がありますので、適当な〇〇〇px数の箇所 (/*必要ならばここにコードを書く*/の場所)に以下のコードをコピペしてください。

.article h1{
    font-size: 18px !important;
}
!importantは、スタイルを適用させる優先順位を1番高くするものです。CSSではスタイルの優先度がありますので、他のCSS記述と競合してしまい、うまく適用されない場合があります。そのため、!importantで優先度を強制的に上げています。

480pxの箇所にコピペすると、以下のような形になります。

/*480px以下*/ @media screen and (max-width: 768px){
 /*必要ならばここにコードを書く*/ 
.article h1{
 font-size: 18px !important;
 } 
}

これで、480px以下のディスプレイ幅でページを表示させたときに、記事タイトル(h1)のフォントサイズが18pxになります。 「18」pxの部分はお好きなサイズに変更してください。

ちなみにcocoonでは、「レスポンシブデザイン用のメディアクエリ」のディスプレイ幅が下から480px、768px、1030px、1240pxと記述されています。

  • 480px以下はスマホの縦画面
  • 768px以下はスマホの横画面~タブレット縦画面
  • 1030pxと1240pxはタブレットの横画面~パソコンのディスプレイ幅

ざっくりですが、それぞれに対応するディスプレイ幅は、こんな感じの認識で良いと思います。 つまり、スマホの縦画面のみでフォントサイズを指定させたいのであれば、480px以下のスペースに先ほどのコードを貼ればOKです。

ただし480px以下だと、スマホを横画面表示させたときに480pxを超えてしまうので、ここで指定したフォントサイズにはなりません。 なので、スマホの横画面表示でもフォントサイズを同じにしたければ、480pxのスペースではなく、768px以下のスペースにコードを貼りましょう。

同じように、タブレットの横画面表示でもサイズを同じにしたければ、1030px以下にすると良いと思います。 1240pxは、もはやノートパソコンやデスクトップパソコンのサイズになってくるので、ここに記述する必要はないでしょう。

筆者の場合は、スマホの縦画面のときにだけ、記事タイトルのフォントサイズが大きく感じたので、480px以下で適用させています。

スマホやタブレットが用意できるのであれば、それぞれの環境でCSSファイルを更新しながら実際の表示感を確認するのが1番いいと思いますよ。 ただ、キャッシュが残っているとCSSファイルを更新しても、指定箇所が変更されていないことがあるので、気をつけてください。 Chromeであれば、履歴からキャッシュをクリアすることができます。

↓CSSが反映されないときはキャッシュクリアを!詳しくはこちらの記事を参考に↓

cssが効かない対策まとめ(Google ChromeやSafariで反映されない場合も)
cssは簡単だけど、効かないということがよくあるトラブルです・・・。Chrome(クローム)やSafariなど一部のブラウザでcss(スタイルシート)が効かない原因chromeでcss(スタイルシート)が効かない・反映されないとき、原因はキ

まとめ

pool_koku-n4

いかがでしたでしょうか?とても簡単じゃなかったですか?

プログラミングは慣れないと、吐き気がしてくるほど難しいですよね。 でも、ブログ運営をしているのなら、やっぱり見た目は良くしたいですし、自分でサラサラとコードを記述できるようになったら最高ですね。

あき
あき

というわけで、勉強あるのみ!!!!

HTML・CSSの勉強にオススメの本

デザインの学校 これからはじめる HTML & CSSの本

HTMLもCSSもほとんど何も分からない人向きの本です。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

初心者にはこちらの本がおすすめです。

最短で勉強するのなら!!!

プログラミングのオンラインスクールです。独学よりプロに直接教わってしまったほうが近道ではありますね!

あき
あき
最後まで読んでくれてありがとう☆
スポンサーリンク
スポンサーリンク
スポンサーリンク
✐POOLライターあき✐おすすめの動画配信サービス
Amazonプライムビデオ~日常が3倍楽しくなる~

プライム会員<月額400円>になれば、会員特典対象の映画やドラマ、アニメ、Amazon Original 作品が見放題になります。
30日間の無料体験があるので、まずはお試しください。無料体験中にいつでもキャンセル可能です!

30日間の無料体験はこちらから 

Web
あきをフォローする
この記事を書いた人はだれ?
あき

雑記ブログ「POOL」の運営&ライターをしているアラサー男子。

2019年の5月に1児のパパになります☆

「圧倒的な金」と「圧倒的な自由がほしい」が口癖。ざわざわ…ざわざわ…

あきをフォローする
POOL

コメントはこちらから