メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • DrupalでのモジュールPanelsの複数Pineのラップ方法

DrupalでのモジュールPanelsの複数Pineのラップ方法

drupal
css
customization
pane
panels

問題点: Panelsでは、同一Regionに複数Pane(表示上では複数のフィールド)をdivでラップすることができない

  • nodeタイプの複数のフィールドをラップしたい場合、モジュールField Collectionを利用することはできます。
  • 同様にPanelsの場合に、モジュールPanel Extra Stylesで同一Regionにある複数のPaneのまとめができます。
  • 最初モジュールPanels Extra Stylesを使う時に、どこで何を設定すればよいかさっぱり分かりませんでした。ここでモジュールの使用方法をまとめます。

やりたいこと: Panelsで作成した複数のElement、またRowのラップ

  • 複数のElement(またはPane)をラップする
  • もちろん、新しいテンプレートを作成すれば、このようなラップの必要はありません

通常インストール後にPanelsのCSSクラス設定

  • モジュール通常インストールし、モジュールの管理画面に「設定」リンクなどはありません。
  • PanelsのVariantの「コンテンツ」設定画面に、各Region/Paneの「スタイル」設定メニューに以下のメニューが表示されます
    • Wrapper:Element
    • Wrapper:Raw
  • ラップ開始のPaneから「Wrapper:Raw」を選んで、「次へ」ボタンを押します
    • 「タイトル」/「コンテンツ」の接頭語に適切なラップクラス名を入力します(例:<div class="panel-col-middle-button-wrap-div">)
  • ラップ終了のPaneから「Wrapper:Raw」を選んで、「次へ」ボタンを押します
    • 「タイトル」/「コンテンツ」の接尾語に適切なラップクラス名を入力します(例:</div">)

表示画面でラップ設定の確認

  • ラップ設定の表示画面で、ブラウザの開発機能でラップの設定確認ができます
  • 必要に応じて、style.cssファイルにラップクラスのcss設定をすればよいです。

 

ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)