WordPressのテーマ、Twenty Twelveは標準のままだと文字が小さいです。
そこでカスタマイズして文字を大きくしてみましょう。
カスタマイズの前に
バックアップは忘れずに
カスタマイズではstyle.cssファイルを書き換えるので、問題が起きても元に戻せるようバックアップを取っておきましょう。
検索で効率アップ
style.cssファイルの中身はかなり長いので、検索を利用して目当ての項目を探すと効率的です。
2種類の指定方法の理由
font-sizeでpxという単位で指定しつつ、remという単位を指定していますが、これはremに対応していないブラウザのためです。
最近のブラウザなら問題なく対応しているので、後で指定されたremのほうが有効になります。
レスポンシブ対応ならではの問題
Twenty Twelveはレスポンシブデザインに対応しているので、対応した分だけカスタマイズしなくてはなりません。
大まかな説明になってしまいますが、style.cssファイルの前半が600px未満、後半が600px以上の場合の指定になります。
最後のほうに960px以上の場合の指定がありますが、そこで指定されているものに文字の大きさに関するものはないので無視していいでしょう。
なお、後半で指定がない場合は前半で指定したものになります。
両方で指定した場合、後から設定したものが有効になるので、忘れずに両方カスタマイズしておきましょう。
画面幅が狭い場合は後半で指定されたものが有効にならないので前半の指定が有効になります。
言葉で説明しても分かりにくいですね。
どういったルールで有効になるのかは実際に試してみたほうが分かりやすいと思います。
ちなみにstyle.cssファイルの最後に印刷物用の指定があります。
個人的には面倒なので、そこまでカスタマイズはしません。
レスポンシブ対応ということでカスタマイズすべき箇所が増えています。
思ったように変更が反映されない場合は、このレスポンシブ由来の原因だと思われます。
文字の大きさのカスタマイズ
ブログタイトル
左上のほうに表示されるブログタイトルの文字の大きさを変える方法です。
.site-header h1 という項目を探しましょう。
そこに font-size という項目があります。
その値を変更することで文字の大きさをカスタマイズすることができます。
キャッチコピー
ブログタイトルの下に表示される部分です。
.site-header h2 という項目を探し、font-sizeを変更しましょう。
ブログタイトルは全画面サイズ共通の設定になっているようです。
印刷物用は別に指定されているようです。
ヘッダー下のナビゲーション
メニューと言ったほうが分かりやすいかもしれません。
この部分をカスタマイズするには .main-navigation li という項目内の font-size を変更しましょう。
この部分は各画面サイズで共通の設定になっています。
記事タイトル
.entry-title という項目のfont-sizeを変更しましょう。
こちらはレスポンシブ対応なので2箇所カスタマイズしておきましょう。
印刷物用の設定をしたい場合は、もう1箇所カスタマイズしましょう。
記事本文
ここは複数の項目が共通の設定になっている場合があったり、設定すべき項目が多いのでカスタマイズも面倒です。
そのため想定していない問題が生じやすい部分なので注意しましょう。
まず最初に多くの部分に関わるところをカスタマイズしましょう。
Basic structure という項目の html という項目に、font-size: 87.5%; という設定があります。
ここを100%にするだけでも文字が大きくなって見やすくなるでしょう。
ただし本文のみならず、他の部分の文字まで大きくなってしまいます。
本文以外のカスタマイズでも、最初はまずここを設定したほうがいいかもしれません。
更に本文の文字の大きさをカスタマイズするには .entry-content p という項目をカスタマイズします。
ここで注意すべき点は、他の項目と共通の設定になっていることです。
共通でも問題ないならいいですけど、別にしたい場合は .entry-content p を独立させましょう。
いずれにせよ .entry-content p という項目に font-size を追加する必要があります。
分かりやすいように例を挙げてみます。
ちなみに本文の文字の大きさを変えてあります。
.entry-summary p,
.comment-content p,
.mu_register p {
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
line-height: 1.714285714;
}
.entry-content p,
font-size: 14px;
font-size: 1rem;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
line-height: 1.714285714;
}なお、整形済みテキストや引用は別に指定する必要があります。
整形済みテキストは.entry-content preの部分です。
引用は.entry-content blockquoteの部分です。
他にも設定されていますが、詳しい説明は省略します。
ウィジェットのタイトル
.widget-titleという項目のfont-sizeで変更できるのですが問題もあります。
デフォルトのままでは他の設定も一緒に行っているため、ここをカスタマイズしようとすると同時に他の部分まで影響が及んでしまいます。
対策としては次の例のように項目を分割する方法があります。
ちなみにウィジェットの文字の大きさを変えています。
/* Small headers */
.archive-title,
.page-title,
.entry-content th,
.comment-content th {
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
font-weight: bold;
text-transform: uppercase;
color: #636363;
}
.widget-title {
font-size: 14px;
font-size: 1rem;
line-height: 2.181818182;
font-weight: bold;
text-transform: uppercase;
color: #636363;
}ウィジェット内のテキスト
widget-area .widget p を含む複数の項目が共通の設定になるようになっています。
これはウィジェット内のテキストがpタグだったりliタグだったりするので共通のまま設定したほうが便利です。
文字の大きさを変えるには font-size の値を変更しましょう。
なお、この項目は各画面サイズ共通で使われています。
フッター
フッターの「Proudly powered by WordPress」と書かれている部分の文字の大きさをカスタマイズする方法です。
footer[role=”contentinfo”] と書かれている部分を探してください。
何やら見慣れないroleというものが含まれていますが気にしないでください。
この項目内の font-size を変えることで文字の大きさを変えることができます。
終わりに
自分が必要だったカスタマイズを中心に紹介したので、紹介できなかった項目も多々あります。
そのような項目も、ここで紹介されたやり方を見ていれば何となく分かるのではないでしょうか。
この記事がカスタマイズの役に立ったのであれば幸いです。
