WordPress は基本的にトップページでも下層ページ(投稿・固定ページ・アーカイブ)でも同じ CSS を読み込んでいる。

場合によっては、特定の CSS をそのページでのみ読み込みたいケースもあるだろう。たとえば「CSS を使った見出しのデザインサンプル」といった記事を書くときや、オリジナルテーマを制作して納品するときだ。

すべて style.css やカスタマイザーの「追加 CSS」に書くと管理が面倒になるし、他の記事でまったく使わない CSS が大量にあると表示スピードにもわずかながら影響する。

そこで、そのページにだけ個別のスタイルを適用する方法を解説していく。

個別の CSS を設定する方法

01. <head> 内で条件分岐する

投稿編集画面での CSS 編集を必要としないなら、特定のページに適用する CSS ファイルを FTP でアップロードしておき、<head> 内で条件分岐して読み込めばよい。

たとえば以下のようにしておくと、ID 100 の投稿で article.css が読み込まれる。
※ アップロード先をルート直下の css ディレクトリにした場合

<?php if( is_single( '100' ) ): ?>
  <link rel="stylesheet" href="<?php bloginfo(‘url’); ?>/css/article.css" />
<?php endif; ?>

<head> が含まれているファイルはテーマによって異なるが、テーマヘッダー(header.php)をたどっていけば見つかるはずだ。

02. functions.php で条件分岐する

WordPress の作法にならって functions.php から CSS を読み込む場合も、条件分岐が使える。

以下は「sample」というスラッグの固定ページで、テーマファイル内の css ディレクトリにある sample.css を読み込む場合。

function my_styles() {
	if ( is_page( 'sample' ) ) {
		wp_enqueue_style( 'sample', get_template_directory_uri() . '/css/sample.css', array(), '1.0.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

個人利用ではなく、サイト制作・納品であればこの形がスマートだと思う。

03. 投稿エディター内に直書きする

投稿編集画面で個別に CSS を設定する場合、最も簡単なのは <style> をそのまま投稿エディター内に書いてしまう方法だ。

ブロックエディターであれば「カスタム HTML」ブロックを入れて、そのなかに CSS を書く(場所はどこでもよい)。

カスタムHTML内にCSSを記述

ただしこの方法は非推奨。HTML では <style><head> 内に書かなくてはならない、というお約束があるためだ。

下書きで一時的に確認したい場合など、限定的に使える方法として覚えておこう。

04. 投稿エディター内に JS で直書きする

投稿エディター内に CSS を書きつつ JavaScript で <head> 内に出力する、という多少強引な方法もある。

body内のstyle要素が一定条件下で再びエラーに

<script>
var styleElm = document.createElement('style');
styleElm.innerText = 'p { color: red; }';
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

パターン 03 と同じく、「カスタム HTML」ブロック内に書けば OK。

カスタムHTML内にCSSをヘッダー内で読み込むJavaScriptを書く

HTML の文法上は問題ないものの、あまりスマートな方法ではない。とくに CSS が何行にもなる場合は視認性が悪くメンテナンスもしづらくなる。

WordPress 以外のブログサービスでも使えるため、予備知識として覚えておけば十分だ。

05. カスタムフィールドを使う

エディター内にコードを書くのは抵抗がある、という場合はカスタムフィールドを使うのがおすすめ。

以下は投稿で使う場合のコード。固定ページで使う場合は is_page() にする。

STEP 1
<head> 内にコードを挿入
<?php if ( is_single() ) {
	$article_css = get_post_meta( $post->ID, 'article_css', true );
	if( $article_css ) {
		echo <<<EOS
			<style>$article_css</style>
		EOS;
	}
}
?>
STEP 2
カスタムフィールドの名前を「article_css」とし、値に CSS を書く
投稿編集画面のカスタムフィールド欄

デフォルト設定でカスタムフィールドは表示されていないため、右上の「」から設定に進み、カスタムフィールド欄を ON にしておこう。

カスタムフィールドを表示するよう設定変更

カスタムフィールド欄をもっときれいに表示したいなら、Advanced Custom Fields などのプラグインを使うとよいだろう。

06. カスタム CSS 専用欄を作る

カスタムフィールドやプラグインを使わず、投稿編集画面に「Custom CSS」という専用欄を作ることもできる。

CocoonSWELL などのテーマにあらかじめ用意されているカスタム CSS 欄とほぼ同じだ。

STEP 1
functions.php にコードを追記
// 投稿画面にカスタム CSS を追加
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}
STEP 2
投稿編集画面下部の「Custom CSS」欄に CSS を書く
投稿編集画面下部に作成したカスタムCSS欄

カスタム CSS 機能がないテーマを使っているなら、試してみてほしい。

07. プラグイン「WP Add Custom CSS」を使う

functions.php 編集に抵抗がある場合、またはのちのちテーマ変更の可能性がある場合、プラグインで CSS 入力欄を作るのがおすすめだ。

ここでは「WP Add Custom CSS」を紹介する。

STEP 1
「WP Add Custom CSS」をインストール・有効化
WP Add Custom CSS インストール
STEP 2
投稿編集画面下部の「カスタム CSS」欄に CSS を書く

このプラグインは、設定画面でブログ全体に適用する CSS を追記できるほか、アドバンスドエディター機能(シンタックスハイライト&バリデーション)もある。

WP Add Custom CSS 設定画面

ほかにも JavaScript 入力欄を作るプラグイン、コードスニペットを管理するプラグインなどいろいろある。まずはシンプルな「WP Add Custom CSS」を試し、必要に応じて他のプラグインを検討してみよう。

まとめ

テーマにカスタム CSS 機能があるなら、それを使うのが手っ取り早い。ただし、テーマ変更したときに CSS がすべて消えてしまう(スムーズに移植するのは難しい)。

個別に CSS を適用する目的と今後の運用を考え、最適な方法を選択しよう。

Reinx 記事執筆:Reinx 編集部 瀬尾 真

Web 業界歴 20 年の知見と経験をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。Twitter では最新ニュース・小技集を配信中。

ブログ初心者向けサービス

Reinx では、WordPress ブログ初心者向けに様々なサービスをご用意しています。

  • Google AdSense 審査対策 ブログ診断
  • WordPress エラー・トラブル対応(復旧代行)
  • ブログ宣伝掲示板(無料)
  • 365 日 24 時間無制限で相談できる個別サポート

その他、運営に関するお悩みなどがありましたら、お気軽にお問い合わせください。