【スタイルシートの基本】特定ファイルにCSSを読み込ませる方法

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

本日はワードプレス内などでCSSを読み込ませる方法をご紹介。CSSを取り込む方法は大きく分けて２種類あります。１つは外部CSSをリンクさせる外部ファイル型。２つ目がhtml内にCSSを直接書くインライン型。

【スタイルシートの基本】特定ファイルにCSSを読み込ませる方法
まとめ

【スタイルシートの基本】特定ファイルにCSSを読み込ませる方法

CSSはhtmlファイルと連携させて使います。そのためhtml内に記述が必要です。以下は特定のhtmlから外部に保存されたCSSファイルを呼び出す基本構文です。外部にあるcssディレクトリのlayout.cssを指定しています。

外部CSSを呼び出す基本構文

<link rel="stylesheet" type="text/css" href="/css/layout.css">

しかし、ワードプレスで外部CSSを読み込ませたいタイミングは状況によって異なります。

１. テーマから呼び出したいとき

ワードプレスではテーマフォルダは以下に格納されています。

/wp-content/themes/

themesフォルダに格納されたテーマデータ内のphpファイルから外部CSSを呼び出す書き方は以下です。

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/layout.css">

テーマ内からcssファイルが呼び出されるのは大半がheader.phpファイルです。html構文上でCSSはheader.phpから、JSはfooter.phpからという暗黙のルールがあります。高速化が考慮されていなかった頃はJSもheader.phpで呼び出していましたがJavascriptのライブラリなどが急増した背景もあり自然とルール化されました。

ただし、bloginfo関数のtemplate_directoryは非推奨になったので下記でもOKです。非推奨とはいえ動作自体は問題ないので厳密にダメというわけではありませんが将来的に動作しなくなる可能性もあります。

//親テーマの場合（基本）
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/layout.css">

//子テーマの場合
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/layout.css">

上記の補足ですが、子テーマの場合で書くと「子テーマのディレクトリ名」が指定されます。あえて子テーマから親テーマのディレクトリを呼び出したいシチュエーションもあるので上記の限りではありません。

２. プラグインから呼び出したいとき

同じくワードプレスではプラグインフォルダは以下に格納されています。

/wp-content/plugins/

プラグインフォルダのなかにあるphpファイルからcssを呼び出す際は以下を使います。

<link rel="stylesheet" type="text/css" href="<?php echo plugin_dir_url( __FILE__ ); ?>/css/layout.css">

htmlのヘッダーからCSSを指定する構文

htmlのインラインでCSSを指定する場合は以下をhead内に追記しましょう。

<style type="text/css">
<!--
#sample {color:#333333;}
-->
</style>

記述の一部をphpの設定値で上書きするなどシステム連動させる場合はインラインでCSSを書きます。CSSは外部ファイル化した方がhtmlのソース上ではスマートに見えますが使い方はケースバイケースです。

まとめ

外部ファイル型もインライン型も両方とも適切に使い分けるとより柔軟なサイト設計が可能となります。ご希望に合わせて最適なCSS設定をご利用くださいませ。ワードプレスではどのphpファイルから呼び出すかで書き方が変わったり、ある程度はルールに乗っ取って記述する必要があります。実際にCSSの中身を追記する際もさまざまなブラウザに合わせて適応性を持たせることが重要です。ぜひお試しくださいませ。