Drupal8のw3cssテーマ改造２：サイドバー（side bar）のインデント上下間隔調整変更

Drupal8のw3cssのインデント（ul/li タブ）の上下間隔が比較的に広い（16px以上）ように見えます。全体的なバランスから見ると、変更する必要があります。

Drupal8のw3cssテーマ管理画面（ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme）では、インデント上下の設定項目はないようで、cssスタイルで変更したほうが良いでしょう。

w3cssの初期インデント上下間隔が広い

  • ブラウザの開発ツールでサイドバーのインデント（ul/li）タグのプロパティを確認します
  • インデント上下の間隔（ul/liタグ）がmargin, padding で設定され、合わせてみたら16pxもあります
    w3cssのインデントの上下間隔が広い

サブテーマ（sub theme）でインデントの上下間隔を変更

  • w3cssのサブテーマを作成します
  • サブテーマのcss定義ファイル（style.css）でインデント上下のmargin, padding 要素間隔を設定します 
    .w3-sidebar-second .view-content ul li{
    margin: 0;
    padding: 0 1em;
}

     

  • css設定が簡単で、結果は以下の用となります
    w3cssのインデントの上下間隔の変更結果

 

Drupal8のw3cssテーマ改造１：フォントサイズ（font-size）の変更、設定

Drupal8でw3cssテーマ（theme）の初期フォントサイズ（font-size）設定が大き目になっているので、調整する必要があります。

Drupal8のw3cssテーマ設定画面（ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme）では、フォント関連設定項目がないようで、cssスタイルで設定したほうが良いでしょう

サブテーマ（sub-theme）でフォントサイズ（font-size）を設定

  • w3cssのサブテーマを作成します
  • 作成したサブテーマの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）を確認します
    w3cssの見出し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）のフォントサイズがオーバーライドされました
    w3cssの見出しH1のフォントサイズオーバーライド