Drupal8でw3cssテーマ(theme)の初期フォントサイズ(font-size)設定が大き目になっているので、調整する必要があります。
Drupal8のw3cssテーマ設定画面(ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme)では、フォント関連設定項目がないようで、cssスタイルで設定したほうが良いでしょう
サブテーマ(sub-theme)でフォントサイズ(font-size)を設定
- w3cssのサブテーマを作成します
- Drupal8のサブテーマ作成について「Drupal8のテーマ(theme)の構造及びディレクトリの整理 」をご参考
- 作成したサブテーマのcss定義(例:style.css)にフォントサイズを再定義します
h1{font-size:28px;} h2{font-size:24px;} h3{font-size:20px;} h4{font-size:18px;} h5{font-size:16px;} h6{font-size:14px;}
- css定義更新後に、Drupal8のキャッシュクリアを忘れずにしてください
見出し(H1)のフォントサイズが変わらない問題
- 見出し(h2)などが順調に変更できました
- 見出し(h1)が変わらないことを気づきました
- ブラウザの開発ツールで見出し(H1)を確認します
- 見出し(H1)のフォントサイズ設定はcssクラス:w3-xxlargeで管理しているようです
解決:サブテーマのcss定義でh1.w3-xxlargeクラスを再設定
- 見出し(H1)を限定して、w3-xxlargeのフォントサイズを設定します
h1, h1.w3-xxlarge{font-size:28px!important;} h2{font-size:24px;} h3{font-size:20px;} h4{font-size:18px;} h5{font-size:16px;} h6{font-size:14px;}
- 「w3-xxlarge{font-size:28px;}」のような設定を避けたほうが良いでしょう。なぜならば、ここで見出し(H1)のフォントサイズを再定義、ほかの部分のw3-xxlargeの定義を変更するつもりはありません
- これで、見出し(H1)のフォントサイズが順調に変更されました
- 開発ツールで見出し(H1)のフォントサイズがオーバーライドされました