サポート » 使い方全般 » Twenty Sixteenのフォントサイズを変更したい

  • 解決済 pilocc

    (@pilocc)


    Twenty Sixteenの「投稿タイトルのフォントおよびサイズ」を変更したいのですが、うまく変更できません。ソースのどこを変更するのでしょう?教えていただけませんでしょうか?

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • 「投稿タイトル」にプロパティはないので、スタイルシートの286行目からの「3.0 – Typography」セクションで可能ですよ。

    ダッシュボード->外観->CSS編集、にて以下のCSSを設定すると、

    @font-face {
    	font-family: HuiFont;
    	src: url("http://meta-scheme.jp/software/font/HuiFont29.woff") format("woff");
    	font-weight: normal;
    	font-style: normal;
    }
    
    header.entry-header .entry-title * {
    	font-size: 64px;
    	font-family: HuiFont !important;
    }

    投稿タイトルのフォントが、ウェブフォントの「ふいフォント」に、フォントサイズが64pxになります。

    ↓表示例
    http://meta-scheme.jp/

    ただし、ダッシュボード->外観->CSS編集、にてCSS設定することが可能になるためには、もしかしたらJetPackというプラグインをインストールして、「カスタムCSS」という機能をONにする必要があるかもしれません(私のサイトは、ずっと以前からそういう設定だったので、WordPressのデフォルト機能でCSS編集が出来たのか、JetPackのお陰なのか、もう覚えてないです)。

    仮に、端末側インストール済みのフォントのいずれかを指定したいだけならば、@font-faceの部分は必要ありません。単純に、狙っているインストール済みフォントのフォントファミリー名をfont-family:の後ろに書いて、効きが悪かったら、!importantを書いてください。

    指定した部分のfont-familyの他にも!important指定されているfont-familyがあると、font-family指定はうまく効かないかもしれません。

    font-size指定はわりと簡単に効きます(たぶん、font-size指定を!important指定することなんてあんまりないからなのでしょう)。

    間違えました。上の書き方だと、投稿を個別表示した時のタイトルが変わりませんね。

    訂正版は下記です。

    @font-face {
    	font-family: HuiFont;
    	src: url("http://meta-scheme.jp/software/font/HuiFont29.woff") format("woff");
    	font-weight: normal;
    	font-style: normal;
    }
    
    header.entry-header .entry-title {
    	font-size: 64px;
    	font-family: HuiFont !important;
    }

    トピック投稿者 pilocc

    (@pilocc)

    맹조さま
    ご連絡ありがとうございます。
    何分、HPビルダーの経験しかないもので、
    どうもこのスタイルシートがうまく理解できません。
    ご指導いただきましたところは、
    294行目
    textarea {
    color: #1a1a1a;
    font-family: Merriweather, Georgia, serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.75;
    この辺でしょうか?
    HPのソースを見ると、H2あたりかなともおもうのですが?

    トピック投稿者 pilocc

    (@pilocc)

    tg29359さま
    ご連絡ありがとうございます。
    ご指導いただきましたところは、
    11.1 – Headerの
    1560行目
    .site-title {
    font-family: Montserrat, “Helvetica Neue”, sans-serif;
    font-size: 23px;
    font-size: 1.4375rem;
    font-weight: 700;
    line-height: 1.2173913043;
    margin: 0;
    もしくは、
    1658行目
    .entry-title {
    font-family: Montserrat, “Helvetica Neue”, sans-serif;
    font-size: 28px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1em;
    でしょうか?

    まずは、フォントサイズを小さくしたいと思っております。
    理解不足で申し訳ありません。

    1658行目からの
    .entry-title {
    font-family: Montserrat, “Helvetica Neue”, sans-serif;
    font-size: 28px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1em;
    }

    ブラウザの画面を985px以上の大画面にしてページを見ている時に効く箇所は、3386行目と3387行目の以下の部分です。

    font-size: 40px;
    font-size: 2.5rem;

    これを小さくするには、例えば以下のように修正します。

    font-size: 20px;
    font-size: 1.25rem;

    見ている時のブラウザのサイズ別に複数の定義があります(印刷用の定義もあります。また、特定の投稿タイプにのみ効く定義もあります)。style.cssの中で、.entry-titleに対してfont-sizeを設定しているところを全て調べて、各部分で採用させたいフォントサイズに書き換えてください。

    もし、私が前の書き込みで例示したみたいに、単純に「全ての画面サイズ、全ての媒体、全ての投稿タイプで同じフォントサイズで良い」ということであれば、style.cssの末尾に以下の様な感じの記述を付け加えると良いと思います。

    .entry-title {
    	font-size: 20px;
    	font-size: 1.25rem;
    }

    画面サイズ別・媒体別の設定内容は、style.cssの先頭の方の目次部分を見るとわかりますが、以下の様な種類があるようです。

    * 14.0 - Media Queries
    *    14.1 - >= 710px
    *    14.2 - >= 783px
    *    14.3 - >= 910px
    *    14.4 - >= 985px
    *    14.5 - >= 1200px
    * 15.0 - Print

    ちなみに、私が前の書き込みで例示した方法は、テーマのCSSファイル自体は書き換えずに、JetPack等のプラグインを使うことによって指定できるカスタムCSSを記述することで変更する方法です。

    その方法を採ろうかと思った理由は、style.cssに直接書くと、テーマがバージョンアップされた時に、もう一回編集をし直さないといけなくなるかな?と思ったからです(実際にテーマを編集し直さなければいけなくなった経験があるわけではないのですが、なんとなく想像で)。なお、子テーマを作って子テーマ側のファイルを修正している場合にはその心配は多分ないと思います。これも想像ですが。

    トピック投稿者 pilocc

    (@pilocc)

    맹조さま
    何度も、ありがとうございました。

    トピック投稿者 pilocc

    (@pilocc)

    tg29359さま
    何度も、ありがとうございました。
    おかげで、うまくいきました。
    以下に変更しました。(わたしのメモ帳では、3381-3382行)
    14.4
    .entry-title {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1.225;
    margin-bottom: 1.05em;
              ↓
    .entry-title {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1.225;
    margin-bottom: 1.05em;
    重ねて御礼申し上げます。

    蛇足ながら付記しますと、14.4の変更が有効になるのはブラウザのウィンドウ幅が985px以上の場合だけかと想像されますので、パソコンなど大画面の端末上で以下の手順を行って、念のため、もっとウィンドウ幅が狭い場合にも問題がないかどうかチェックしてみると、より確実かと思います。

    1. ブラウザのウィンドウ幅を狭めてみる( 710px以下、783px以下、910px以下、それぞれを試す。または、スマホ、iPad Air並の大きさのタブレット、パソコン、それぞれで表示して見るのも可)
    2. ブラウザのリロードボタンを押してみる
    3. 表示結果にて、投稿タイトルのフォントサイズと本文のそれとの比が、自分の望んでいるような比になっているかどうかチェックする
    4. 望んでいる比になっていなかったら、関連する14.Xのfont-sizeを書き換える
    トピック投稿者 pilocc

    (@pilocc)

    tg29359さま
    了解しました。
    ありがとうございました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「Twenty Sixteenのフォントサイズを変更したい」には新たに返信することはできません。