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

古松

メインナビゲーション

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

パンくず

  • ホーム
  • Drupal8: W3.CSSのカスタマイズ:モジュール(Display Suite)を利用してcssルールの追加

Drupal8: W3.CSSのカスタマイズ:モジュール(Display Suite)を利用してcssルールの追加

問題点:Drupal8のW3.CSSの管理設定可能な部分は少ない

  • W3.CSSモジュール:Drupal 8 W3CSS Theme 8.x-1.16
  • W3.CSSの管理画面:ホーム » 管理 » テーマ » テーマの設定
  • 管理できる項目はコンテンツの色、メディアリンクなどぐらいです
    • W3.CSSの豊富なコンポーネント(例:Card、Selectionなど)の直接な設定はできない
  • W3.CSSの各種コンポーネントを理由するため、Sbu-Themeを作成してstyle.cssにcssルールを作成することができます
    • 以下のページはW3.CSSのsub-theme利用の説明:「Drupal8のw3cssテーマ改造1:フォントサイズ(font-size)の変更、設定 (508)」

やりたいこと:フロントページに各記事ブロックをW3.CSSのCardで表現

  • 以下はW3.CSSのCardで表現する前後のイメージ
    ブロックをW3.CSSのCardで表現比較
  • このブロックはFiedのTeaserを利用したので、W3.CSSテーマ管理画面(ホーム » 管理 » テーマ » テーマの設定)では管理設定できません

解決:モジュール(Display Suite)を用いてTeaserをラップしてW3.CSSのクラスを設定

  • モジュール:Display Suiteがよく利用されるモジュールです
    • Drupal7のモジュール(Display Suite)のインストールおよびフィールドテンプレート(Field Template)の有効化 
    • Drupalのモジュール(Display Suite)でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする (167)
  • コンテンツの表示管理画面(ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理 » ティーザー)からDisplay Suiteを有効かして、カスタムクラス(Manage region and field CSS classes)にW3.CSSのクラスを追加します
    w3-card-2|w3 card-2
    w3-hover-shadow|w3 Hover Shadow

    Regionsにw3cssのCardクラスを追加

  • 同一コンテンツ管理画面の「Cstom Class」タブの「Class for layout」で設定したW3.CSSのクラスを選択します
    W3.CSSのクラスをTeaserのラップDIVに追加

 

 

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のフォントサイズオーバーライド

Drupal7のモジュール(Display Suite)のインストールおよびフィールドテンプレート(Field Template)の有効化

やりたいこと:コンテンツの表示レイアウト/フィールドを自由変更したいです

  • 既存のNode表示システムでは、レイアウト/フィールドなどの表示を変更したいです
  • 例:Drupalのモジュール(Display Suite)のフィールドTテンプレート(Field Template)で各フィールド表示の調整 

解決:モジュール(Display Suite)の導入

  • モジュール:Display Suite-7.x-2.14
  • モジュールを通常の方法でインストール、有効化します(ビデオをご参考ください)

DSのフィールドテンプレート(field template)の有効化

  • モジュールインストールだけでフィールドテンプレート(field template)は有効になっていません
  • DS(Display Suite)の管理画面(ホーム » 管理 » サイト構築 » Display Suite » Extras )でField Templateタブにある「Enable Field Template」をチェックします
  • 他のオプションが初期設定のままでよいです

コンテンツの表示管理画面でカスタムレイアウトを選択しないとフィールドテンプレートが有効になりません

  • コンテンツ表示管理画面(例:ホーム » 管理 » サイト構築 » コンテンツタイプ » Article » 表示管理)の下に、「Layout for article in default」タブで適切なレイアウトを選択します
  • 各フィールドの右側にフィールド表示オプションボタンをクリックすると、Field Template選択肢が現れます
  • 必要に応じ、cssよろ各フィールドの表示設定ができます

Drupalのモジュール(Display Suite)でコンテンツレイアウト変更、初期表示されていないフィールドの選択/設定が可能にする

Drupalのコンテンツ表示設定にレイアウトの変更はできない。すべてのフィールド表示はしていない

  • Drupalのコンテンツ表示管理画面(例:Article: ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」)にある表示タイプ(例:全文)のレイアウト変更はできない
  • そのレイアウトのコンテンツのすべてフィールドが表示されていない(例:投稿日付、投稿者など)

モジュール(Display Suite)導入で、同一表示タイプに複数のレイアウト選択可能、隠されたフィールドの表示/設定が可能になる

  • Drupalのコンテンツ表示には大きな役割を果たしたモジュール(Display Suite)がぜひ利用してください
  • 通常の方法でDisplay Suiteをインストール/有効化します
  • コンテンツの表示管理画面(例:Article: ホーム » 管理 » サイト構築 » コンテンツタイプ » Article の「表示管理」)でDisplay Suiteのレイアウトが表示され、表示必要に応じ選択します
  • また、初期隠されたフィールドも表示されます。表示必要に応じフィールドを表示場所に配置します
  • 具体的な操作法はビデオでご参考ください
  • Display Suiteの応用に「シリーズ記事」をご参考ください

検索フォーム

カテゴリ別

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

google ads