特定のコンテンツタイプにだけCSSを適用させる方法

DrupalにおいてCSSは基本的に「テーマ」の管轄ですが、テーマに手を加えることなくCSSを効かせたい……という場面もあると思います。

方法はシンプルで、hook関数を使えば簡単に実現できます。
例えば、後から作ったコンテンツタイプに専用のスタイルを適用させたい、といった場合に役立ちます。

モジュールの作成

まずカスタムモジュールを用意します。構成要素は下記の４ファイルです。

• module_name.info.yml
• module_name.libraries.yml
• 適用させたいCSSファイル
• module_name.module

#module_name.info.yml

name: Module Name
type: module
core: 8.x

#module_name.libraries.yml

library_name:
  css:
    theme:
      css/file_name.css: {}

#css/file_name.css

// スタイルを記述

上記の３ファイルはそれぞれ最小限の構成となっています。
CSSファイルを複数使いたい場合、JSファイルも使いたい場合などはlibraries.ymlファイルに適宜追記してください。

残りのmodule_name.moduleについてはこの後詳しく説明します。

新規作成画面・編集画面

新規作成、編集画面はいずれもフォーム画面なので、hook_form_alter()というhook関数を使えば操作できます。

コンテンツタイプの内部名称が必要なので、わからなければ調べておきましょう。
管理メニューからコンテンツタイプの編集画面に遷移し、URLを確認すれば分かると思います。

上記画面のパスは /admin/structure/types/manage/article/fields となっています。「article」の部分がコンテンツタイプの内部名です。
以降のコードでコンテンツタイプ名の部分は「CONTENT-TYPE」とするので読み替えてください。

#module_name.module

/**
 * Implements hook_form_alter().
 */
function module_name_form_alter(array &$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
 
  // 新規作成時、編集時にスタイルを適用.
  if ($form_id == 'node_CONTENT-TYPE_form' || $form_id == 'node_CONTENT-TYPE_edit_form') {
    $form['#attached']['library'][] = 'module_name/library_name';
  }
}

「library_name」はlibraries.ymlファイルで1行目に書いた名前です。

これで当該コンテンツタイプの新規作成時、編集時のみCSSが読み込まれます。
ただし通常の閲覧時には読み込まれません。閲覧時については別途処理を記述する必要があります。

通常の閲覧時にスタイルを適用

閲覧時はフォーム画面ではないため、hook_form_alter()は使えません。

今度はhook_ENTITY_TYPE_view_alter()というhook関数を使います。
module_name.moduleに下記のコードを追加しましょう。

#module_name.module

/**
 * Implements hook_ENTITY_TYPE_view_alter().
 */
function module_name_node_view_alter(array &$build, Drupal\Core\Entity\EntityInterface $entity, \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display) {

   // 閲覧時にCSSを適用.
  $node_type = $entity->getType();
  if ($node_type == 'CONTENT-TYPE') {
    $build['#attached']['library'][] = 'module_name/library_name';
  }
}

これで新規作成時、編集時、および通常の閲覧時すべてでCSSを適用させることができます。
ちなみに、今回は１つのCSSファイルにすべてのスタイルを記述するような書き方をしましたが、実際にはフォーム画面用のCSSと閲覧画面用のCSSで２ファイルに分けたほうがいいかもしれません。

後はこのモジュールを有効化するだけです。

補足：Views画面

今回はコンテンツタイプを例に出して説明しましたが、例えば「特定のViewsにだけCSSを効かせたい」といった場合も同じような書き方で可能です。

#module_name.module

/**
 * Implements hook_views_pre_render().
 */
function module_name_views_pre_render(Drupal\views\ViewExecutable $view) {

   // ViewsにCSSを適用.
  if (isset($view) && ($view->storage->id() == '対象のviews_id')) {
    $view->element['#attached']['library'][] = 'module_name/library_name';
  }
}