Twenty Seventeen 文字サイズ(タイトル・本文・サイドバー)を変更する-WordPress

テーマ「Twenty Seventeen」は、画面サイズの横幅によってフォントサイズが変化するレスポンシブ対応です。そのため、フォントサイズの設定も少し複雑でカスタマイズするのを面倒に思ってしまう人もいると思うのです。

そこで、少しでも文字サイズをカスタマイズしやすいように主要な箇所をまとめてみました。文字のカスタマイズは様々なパターンがあると思うので、ここでは初期状態のままの文字サイズ・色・行高のコードを載せます。ですので、カスタマイズしたい箇所のコードをコピーしstyle.cssに貼り付けた後、好みに変更してください。

スポンサーリンク

カスタマイズする前に確認

フォントサイズのpxとrem

「Twenty Seventeen」のフォントサイズにはpxとremがある。基本的にはremが採用されますが、pxもあわせて変更しておきましょう。ここでは「1rem=16px」となっているためpxとremの関係は下記のようになる。

画面サイズ幅による変化点を確認

「Twenty Seventeen」の画面サイズによる文字の変化点とそのコードは主に下記の通りとなっている。
・幅30em未満(モバイル縦表示)
・幅30em以上48em未満(モバイル横表示)
・幅48em以上(タブレット、PC)

Twenty Seventeen カスタマイズ 文字サイズ
画面サイズによるレスポンシブ文字

画面サイズによる文字の変化(例)

例えば下記コードの場合、「見出しh1」の文字サイズは次のように変化する。
・幅30em未満「文字色#333、文字サイズ24px」
・幅30em以上48em未満「文字色#333、文字サイズ30px」
・幅48em以上「文字色#333、文字サイズ26px」

文字サイズのカスタマイズ(箇所別)

前置きが長くなりましたが、ここからが「Twenty Seventeen」の文字コードのまとめになります。必要な個所をコピーしてstyle.cssに貼り付け変更してください。

サイトタイトルとキャッチフレーズの文字

サイトタイトルとキャッチフレーズの文字は画面サイズ48em(768px)を境に変化します。

記事タイトルの文字

記事タイトルの文字は画面サイズ30emと48emを境にそれぞれ変化します。

記事本文の文字

記事本文の文字は画面サイズ30emと48emを境にそれぞれ変化します。

h2~h6見出し文字

h2~h6見出し文字は画面サイズ30emを境に変化します。

ウィジェット(サイドバー)の文字

ウィジェット(サイドバー)の文字は画面サイズ48emを境に変化します。

カスタマイズ(参考)

このブログの文字カスタマイズです。参考になればと思います。

カスタマイズのまとめページはこちら⇒『テーマ Twenty Seventeen を使ってブログをカスタマイズ(目次)』

シェアしてください!お願いしますorz

スポンサーリンク
クリックコメントを閉じる

“Twenty Seventeen 文字サイズ(タイトル・本文・サイドバー)を変更する-WordPress” への3件の返信

  1. はじめまして。
    サイト作成にあたり大変参考にさせて頂いております。
    初心者ゆえ、初歩的な質問をさせてください。

    編集画面のどこに上のようなコードを貼り付ければ、反映されますか?

    1. アスナルさんはじめまして。

      ダッシュボードで「外観」→「テーマの編集」と進むと右側にstyle.cssがあるので、その末尾に貼り付けるとよいです。style.cssは下にあるコードが前のコードを上書きします。

      ただ、そのままカスタマイズしてしまうと、テーマの更新で初期値に戻りカスタマイズをやり直さなければならなくなるため、「子テーマ」を作成し、「子テーマ」のstyle.cssに貼り付けることをお勧めします。

      子テーマの作成はこちら→「子テーマの作成」

  2. 妻僕様

    ご返信ありがとうございます。初歩的な質問すぎて返信して頂けるとは思ってもみなかったです・・・。大変参考になりました。ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください