メインコンテンツに移動
ホーム

古松

メインナビゲーション

  • ホーム
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • Drupal8のw3cssテーマ改造2:サイドバー(side bar)のインデント上下間隔調整変更

Drupal8のw3cssテーマ改造2:サイドバー(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のサブテーマを作成します
    • Drupal8のサブテーマ作成について「Drupal8のテーマ(theme)の構造及びディレクトリの整理 」をご参考
  • サブテーマのcss定義ファイル(style.css)でインデント上下のmargin, padding 要素間隔を設定します
    .w3-sidebar-second .view-content ul li{
        margin: 0;
        padding: 0 1em;
    }

     

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

 

Drupal8のw3cssテーマ改造1:フォントサイズ(font-size)の変更、設定

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)を確認します
    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のフォントサイズオーバーライド

検索フォーム

カテゴリ別

  • laravel
  • drupal
  • javascript
  • windows
  • html
  • mysql
  • php
  • apache
  • css
  • SEO
  • video
  • wordpress
  • linux
  • python
  • Electron
  • Visual Studio Code

google ads