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

古松

メインナビゲーション

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

パンくず

  • ホーム
  • Drupal8のw3cssテーマ改造4:アンカー・リンク(Anchor link)をハイライトする

Drupal8のw3cssテーマ改造4:アンカー・リンク(Anchor link)をハイライトする

Drupal8のテーマ:w3css がインストール後の初期画面が比較的に特徴がなく、ごく普通の画面と同じような画面で、文字フォント、間隔、インデント、リージョンなどの調整がしないと、見た目ではあまり使用する価値がありません

w3cssの初期画面で、アンカー・リンク(anchor link)がほかの文字のカラーと同じで、アンカーリンクの認識は難しいです

w3css管理画面で「ADVANCED SITE COLORS」の設定

  • w3cssでアンカーのカラー(anchor color)設定があります
  • 設定画面: ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme で「ADVANCED SITE COLORS」項目があります
    • 好きな「Link Text Color」、「Link Background Color」をコピーしてします 
    • 「W3CSS Content」項目にコピーしたカラー名をペストします
    • 複数のカラーを設定する際に、たて棒 ”|” で区切りします
      w3cssのアンカーリンクカラー設定

アンカーリンク(Anchor Link)がはっきりハイライトされた

  • 上記表示設定後に、サイトホームに戻ると、アンカーリンクががはっきりにハイライトされました。
    w3cssのアンカーリンクのハイライト結果

w3cssの設定より各種色でイライトが可能

  • 初期として、なんにも設定していないため、見た目はあまりぱっとしないです
  • 文字、バックグラント、リージョンなどを色で、はっきりしたハイライト効果設定が出来ました
  • 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のフォントサイズオーバーライド

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テーマ改造3:コンテント・リージョン(content region)をハイライトする

Drupal8のテーマ:w3css がインストール後の初期画面が比較的に特徴がなく、ごく普通の画面と同じような画面で、文字フォント、間隔、インデント、リージョンなどの調整がしないと、見た目ではあまり使用する価値がありません

w3cssの初期画面で、メイン・コンテント・リージョン(main content region)がバックグラント(background color)カラーと同じで、このリージョンの認識は難しいです

w3css管理画面で「Enable/Disable Match Height for Main Contaners」の設定

  • w3cssでメイン・コンテント・リージョンのハイライト(highlight)設定があります
  • 設定画面: ホーム >> 管理 >> テーマ >> Appearance settings >> w3_css theme で「DISABLE/ENABLE MATCH HEIGHT」項目があります
    • 「Enable/Disable Match Height for Main Containers」項目をチェックします
      w3cssでのメイン・コンテンナー・ハイライト設定

メイン・コンテンツ・リージョン(main content region)が立体的にハイライトされた

  • 上記表示設定後に、サイトホームに戻ると、メイン・コンテンツ・リージョンが立体的にハイライトされました。
    w3cssでのリージョン・ハイライト設定結果

w3cssの設定より各リージョンのハイライトが可能

  • 初期として、なんにも設定していないため、見た目はあまりぱっとしないです
  • リージョン・ハイライトを設定してみたら、はっきりしたハイライト効果が出来ました
  • w3cssの柔軟性がここでも感じました

検索フォーム

カテゴリ別

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

google ads