個別記事ページのタイトル文字の大きさを変更する方法

 

PPW_pagewomekurunote500

テーマGushでのやりかたです。
記事全文を表示する、個別記事のページのタイトルの文字の大きさを変更する方法です。

Gushのスタイルシートの構造

まず、Gushの作り方を見てみます。
Gush作者様のサイトにも説明があります。
レスポンシブデザインCSSの構成

レスポンシブデザインといって、スタイルシートひとつでスマートフォン、タブレット、PCと画面の大きさが違うメディアに対応しています。
なので、ひとつのスタイルシートの中にそれぞれに対する指定が混在しているのですね。

Gushはまずスマホ用にデザインし、それを元にタブレット用を調整し、その後にPCに合わせて調整しているようです。
スマホのデザインのままタブレットで表示すると変になる所のみスタイルシートで追加指定して修正する。といった具合です。

なので、スタイルシートの上の方はスマートフォン&全部の基礎となる指定、

/*————————————–
切替 768px
————————————–*/
以下がタブレット用の指定、

/*————————————–
切替 1024px
————————————–*/
以下がPC用の指定となります。

よく見てみると、上の方で書いているのと同じ場所を下の方で違う数値で書いている。というものがあります。これがメディアに合わせて修正している部分です。

スタイルシートは下に書かれているものが上に書かれているものを上書きして表示します。

何故スマホでタブレット用の設定が上書きされないかというと、@media screenというのでそこらへんちゃんと設定してあるからです。

前置きが長くなりましたが、これを頭に入れておかないと、正しいタグの数値を変えているのに何故反映されないのだろう??ということになります。

では、本題です。

個別記事ページのタイトル文字の大きさを変更する

個別記事のタイトル文字のタグはこれです。

/*--------------------------------------
記事見出し
--------------------------------------*/

#contents #main #single_title {
font-size: 24px;
margin-bottom: 24px;
}

文字の大きさを変える時は赤文字の所の数字を変えます。
大きい値にするほど大きな文字になります。

最初に登場する#contents #main #single_titleで、スマホ、タブレット、PC全ての個別記事タイトルの文字の大きさを指定してある状態です。

切替 768pxのタブレットの所を見てみると、#contents #main #single_titleの指定はありません。
なので、上のスマホでの設定がそのまま適応されているという事です。

次に切替 1024pxのPCの所を見てみると・・・ありました。

/*--------------------------------------
1024px 記事見出し
--------------------------------------*/

#contents #main #single_title {
font-size: 30px;
line-height: 1.2;
margin-bottom: 24px;
}

ここの数値を変えないと、PCでの見た目は変わりません。上のスマホの設定を上書きしているためです。
PCでの個別記事のタイトルの大きさを変えたい場合はここを修正してください。

タブレットでの表示も個別に違う大きさにしたいという場合は、768pxの所にタグを追加してやるとできます。

ちょっとややこしいですが、理解してしまうと細かに設定できるので結構便利でありがたかったりします。

この記事は頂いた質問を元に作成しました。
ただ場所を教えるだけでなく、何故そうなるのか説明してみましたがいかかでしたでしょうか・・・?
逆に分かりづらかったかもしれません(^^;)
またご質問くださいね。

おつかれさまでした。

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。