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

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

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

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

私は可能性がある他のノード/セクションの/ etcにこれを一般化に興味があるが、現時点では、私はこの1つのだけのアイテムを扱いたいです。

私がやったこと。

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

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

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

これは私がコードでやるようなことですが、それは私が転がるだけの方法だからです。

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を独自のコードに関連する値に置き換えます。

Nodeモジュールごとのコードを見ることができます。このブログ投稿でも取り上げられています。

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

状況：

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

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

コンテキストアセットの追加：

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

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

カスタムモジュールを作成し、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ファイルを含むテーマの名前に置き換えます。

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");
  }
}

それを行う管理者ベースの方法については、CSSモジュールを参照します。CSSをnode/addとnode/editページに追加できるフィールドが追加されます。

CSS：

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

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

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

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

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

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

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

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

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

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
}

これを '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」を置き換えます。

これが役立つことを願っています。

template.phpに触れることを完全にスキップし、テーマの.infoファイルに別の項目を追加するだけです。

スタイルシートがにあるとしcss/foo.cssます。

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

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

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

Drupalのアプローチとは別に、HTML5本体内に短いCSSのみが必要な場合、CSSスコープの属性があります。https://stackoverflow.com/a/4607092/195812を参照してください

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

bodyタグでページノードを印刷できます

<body page-node-26419 ...>

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

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

これは軽微な変更に便利です