web-dev-qa-db-ja.com

単一のページ/ノードにCSSを追加する方法はありますか？

私は大きなクレイジースタイルシート（将来の質問に関係する可能性があります）を整理しており、特定のノードまたはページにカスタムCSSを追加する最良の方法を考えています。

特に、私の作業サイトのホームページはパネルページであり、さまざまなスタイルがたくさんあります。現在、CSSはメインのテーマスタイルシートに含まれています。

「これがノードFooの場合、foo.cssを追加する」と言う方法はありますか？ CSS Injector は私が探しているものですか？

私はmightこれを他のノード/セクションなどに一般化することに関心がありますが、現時点では、この1つの項目のみを処理します。

私がやったこと

Zenサブテーマを使用していて、実際にtemplate.phpを読んでいると、条件付きスタイルシートを含めるためのコメントアウトされたコードがあることがわかりました。以下のコードは私が必要とするものを正確に行いました：

if (drupal_is_front_page()) {
  drupal_add_css(path_to_theme() . "/foo.css", 'theme','all'); 
}

（ストックZen template.phpファイルのFWIWの行80）。

7themingpanels
79
epersonae

これは私がコードでやるようなことですが、それはそれが私が転がる方法にすぎないためです。

Template.phpでは、次のようになります。

function MYTHEME_preprocess_node($vars) {
  if (drupal_get_path_alias("node/{$vars['#node']->nid}") == 'foo') {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/css/foo.css");
  }
}

Fooを独自のコードに関連する値に置き換えます。

69
Decipher

Code per Node モジュールを見ることができます。 ブログ投稿 でも紹介されています。

25
rakke

ページ/セクションに Context を作成し、次に Context Assets モジュールを使用して、その特定のコンテキストのCSSやJavaScriptをロードします。

コンテキスト：

コンテキストを使用すると、サイトのさまざまな部分のコンテキスト条件と反応を管理できます。各コンテキストは、サイトの「セクション」を表すものと考えることができます。コンテキストごとに、このコンテキストをアクティブにするトリガー条件を選択し、このアクティブコンテキストに反応するDrupalのさまざまな側面を選択できます。

条件は、アクティブなコンテキストを確認するためにページの読み込み中にチェックされる一連のルールと考えてください。次に、アクティブなコンテキストに関連付けられているすべてのリアクションが発生します。

Context Add Assets：

コンテキスト追加アセットにより、これを行うことができます。使いやすいUIを備えているため、コードを記述せずにすべてを実行できます。 ctoolsを使用しているため、これもすべてエクスポート可能です。

16
budda

それが少量のCSSである場合、ノードに基づいてCSSセレクターを作成し、テーマのCSSにCSSを含めることを検討しますか？ Drupal 7はbody.page-node-NODEIDセレクタを提供し、Zen for Drupal 6は同様のbody CSSクラスを提供します。

13
Dave Reid

CSSスタイルを追加する基準がノードのいくつかのプロパティに依存する場合、MYTHEME_preprocess_node(&$variables);を実装します。関数に渡される値の1つは_$variables['node']_です（これは_$variables['#node']_ではないことに注意してください）。

_MYTHEME_preprocess_node(&$variables) {
  if ($variables['node']->nid == 3) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}
_

基準がどのノードプロパティにも依存しない場合は、MYTHEME_preprocess_page(&$variables)を実装します。表示されているページがノードページの場合、_$variables['node']_にはノードオブジェクトが含まれます。 Drupal 6では、プロセス関数も_$variables['is_front']_を取得しますが、Drupal 7では、同じ変数が渡されません。ページがフロントページである場合は、drupal_is_front_page()を使用する必要があります。

_MYTHEME_preprocess_page(&$variables) {
  if ($variables['is_front']) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}
_
7
kiamlaluno

カスタムモジュールを作成し、hook_preprocess_node（）を使用して、ノードIDに基づいてスタイルシートを選択的にロードできます。

次に例を示します。

function MYMODULE_preprocess_node($vars) {
  $nid = 3;
  if (arg(0) == 'node' && is_numeric(arg(1)) && arg(1) == $nid) {
    drupal_add_css(drupal_get_path('theme', 'MYTHEME') . "/foo.css");
  }
}

MYMODULEをモジュールの名前に置き換え、MYTHEMEをcssファイルを含むテーマの名前に置き換えます。

7
Camsoft

それを行う管理者ベースの方法について、私は [〜＃〜] css [〜＃〜] モジュールを見てみます。 [〜＃〜] css [〜＃〜]を追加できるフィールドをnode/addおよびnode/editページに追加します。

CSS：

CSSモジュールは、十分な権限と有効なノードを持つユーザーのために、ノード作成ページにCSSフィールドを追加します。

ユーザーがCSSノードフィールドにCSSルールを挿入すると、それらのルールはノードの表示で解析されます。

このようにして、CSSの経験豊富なユーザーは、ノードのコンテンツに対して複雑なCSSベースのデザインを作成できます。

重要：CSSの編集権限は、信頼できるユーザー（管理者）にのみ付与する必要があります。この権限を持つ悪意のあるユーザーは、サイトのデザインを壊し、セキュリティ問題（XSS）を引き起こす可能性があります。

5
Paul Jones

CodePerNode はすばらしいですが、 CSS Injector の方がインストールが簡単です（ライブラリは必要ありません）。このモジュールを使用すると、コンテンツマネージャーは、PHPコードまたはINFOファイルにまったく触れることなく、特定のページに動的にCSSを追加できます。15777のインストールは間違いではありません。これは、このモジュールが機能する社会的証拠です。 CSSは、通常のキャッシングシステムでもキャッシュされます。

3
Druvision

/ * bartikテーマを使用して、コンテンツタイプに基づいてCSSを追加する例* /

function bartik_preprocess_node(&$variables) {
if(!empty($variables['node'])) {
    if($variables['node']->type == 'my_custom_content_type')
    {
      drupal_add_css(drupal_get_path('theme', 'any_theme_name') . "/css/foo.css");   
    }
  }
  // Some other code here
}
2
tal

これを「template.php」ファイルに追加してみてください：

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
}

「mytheme」をテーマディレクトリの名前に置き換え、「/ css/front.css」をCSSファイルのパスに置き換えます。

他のページから「front.css」ファイルの設定を解除するには、「template.php」に追加してみます。

function hook_css_alter(&$css) {
  if (!drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  }
}

ここでも、「mytheme」をテーマディレクトリの名前に置き換えます。

フロントページから「styles.css」の設定を解除する必要がある場合は、これら2つのコードを組み合わせるだけです。

フロントページに「styles.css」のない「front.css」が必要で、他のすべてのページに「front.css」のない「style.css」が必要だとしましょう。コードは次のようになります。

function mytheme_preprocess_page (&$variables)
{
  if (drupal_is_front_page()) {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/front.css');
  } 
  else {
    drupal_add_css(drupal_get_path('theme','mytheme'). '/css/styles.css');
  }
}

function hook_css_alter(&$css) {
  if (drupal_is_front_page()) {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/styles.css']);
  }
  else {
    unset($css[drupal_get_path('theme', 'mytheme') . '/css/front.css']);
  } 
}

また、「mytheme」を置き換えます。

これがお役に立てば幸いです。

2
mixerowsky

すでにパネルを使用しているため、ホームページパネルの各領域のパネルスタイルとしてCSSを追加する方が簡単な場合があります。そこでカスタムマークアップを定義して、サイト全体で再利用できます。

ホームページのページマネージャーバリアントルールの[一般]セクションに移動することもできます。現在のパネルのみにCSS IDとルールを追加するためのセクションがあります。

注：これはすべてD7に含まれているため、このアプローチは以前のバージョンよりもPanelsでより適切にサポートされている可能性があります。

2
Warpstone

Template.phpを完全に省略して、テーマの.infoファイルに別のアイテムを追加しただけです。

スタイルシートがcss/foo.css。

これが、theme_name.infoファイルの外観です。

name = Theme Name
...
stylesheets[all][] = css/foo.css

次に、メインのスタイルシートと一緒にキャッシュすることでメリットが得られます。これはあなたのホームページ用であると想定しているので、意味があります。

1
Alexander Hripak

Drupalアプローチとは別に、HTML5本文内に短いCSSが必要なだけの場合は、CSSスコープの属性があります。詳細は https://stackoverflow.com/a/をご覧ください） 4607092/195812

このソリューションにより、コードの編集や追加のモジュールのインストールが不要になります

1
augusto

あなたはボディタグでページノードを印刷することができます

<body page-node-26419 ...>

その後、制限することができます

body.page-node-26419 {
    background: red
}

これは、マイナーなクイック変更に役立ちます

0
Markus Zerres