2026年5月20日

WordPressに印刷用スタイルシートを設定する方法（@media printとmedia=’print’）

テーマ・デザイン

WordPressの記事を印刷やPDF保存したときにメニューや広告まで出てしまうなら、印刷時だけ効くCSSを用意すれば解決できます。方法は、既存のCSSに @media print のブロックを書き足すか、印刷専用のCSSファイルを wp_enqueue_style() の第5引数 'print' で読み込むかの2通りです。この記事では、それぞれの書き方と使い分け、印刷用CSSに入れておきたいルール、崩れたときの確認方法までを解説します。

印刷用スタイルが必要になる場面

ブラウザの印刷機能は、画面用のCSSをそのまま使って紙面を組みます。そのため、何も対策していないサイトでは次のような問題が起きがちです。

グローバルメニュー、サイドバー、フッター、追従ボタンが紙面の多くを占める
背景色や白抜き文字が省かれ、文字が読めなくなる
本文の幅が狭いまま印刷され、ページ数が増える
見出しだけがページの最後に残り、本文が次のページに送られる
リンクのURLが紙面に残らず、参照先が分からない

手順書、レシピ、料金表、マニュアルなど、印刷やPDF保存されやすい記事が多いサイトほど、印刷用スタイルを整える価値があります。

方法1：既存のCSSに@media printを追記する

最も手軽なのは、子テーマの style.css など、すでに読み込まれているCSSの末尾に @media print のブロックを書く方法です。親テーマのファイルを直接編集すると更新時に消えるため、子テーマか、管理画面の「追加CSS」に書いてください。

@media print {
	/* 印刷に不要な要素を隠す（セレクターはテーマに合わせて変更） */
	#wpadminbar,
	.site-header nav,
	.sidebar,
	.site-footer,
	.comments-area,
	.share-buttons,
	.ad-area {
		display: none !important;
	}

	/* 本文を紙面いっぱいに使う */
	.site-content,
	.entry-content {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	/* 白地に黒文字を基本にする */
	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
		line-height: 1.6;
	}
}

この方法の利点は、ファイルが増えないことです。印刷用の記述が少量なら、この方法で十分です。

隠す要素のセレクターはテーマによって異なります。ブラウザの開発者ツールで要素を選び、class や id を確認してから指定してください。!important を付けているのは、テーマ側のCSSが display: flex などを強い詳細度で指定していることが多く、それに負けないようにするためです。

方法2：印刷専用のCSSファイルをmedia=’print’で読み込む

印刷用の記述が多い場合は、print.css のように別ファイルに分け、wp_enqueue_style() の第5引数 $media に 'print' を指定して読み込みます。

// 子テーマの functions.php
add_action( 'wp_enqueue_scripts', function () {
	$path = get_stylesheet_directory() . '/print.css';

	wp_enqueue_style(
		'mytheme-print',                                   // ハンドル名
		get_stylesheet_directory_uri() . '/print.css',     // URL
		array(),                                           // 依存スタイル
		file_exists( $path ) ? filemtime( $path ) : null,  // 更新時刻をバージョンにする
		'print'                                            // 印刷時だけ適用
	);
}, 20 );

出力される <link> タグに media='print' が付き、画面表示のときにはこのCSSは適用されません。ブラウザはこのファイルを低い優先度で取得するため、画面の描画を待たせる要因にもなりにくいのが利点です。print.css の中には @media print { } の囲みは不要で、通常のCSSとして書きます。

優先度を 20 にしているのは、親テーマのCSSより後に出力し、同じ詳細度のルールで印刷用の指定が勝つようにするためです。子テーマの作り方によって最適な値は変わるので、ソース上の <link> の順番を見て調整してください。

どちらを選ぶか

印刷用の記述が数十行程度なら方法1、100行を超えるような作り込みをするなら方法2が管理しやすくなります。方法2はファイルが分かれる分、印刷用スタイルだけを無効にしたいときに wp_dequeue_style() で外せるという利点もあります。

印刷用CSSに入れておきたいルール

要素を隠すだけでなく、次のようなルールを足すと紙面の読みやすさが上がります。

@media print {
	/* 用紙の余白 */
	@page {
		margin: 15mm;
	}

	/* 本文中のリンクの後ろにURLを表示する */
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	/* 見出しの直後で改ページしない */
	h2, h3, h4 {
		break-after: avoid;
	}

	/* 画像・表・コードの途中で改ページしない */
	img, figure, table, pre, blockquote {
		break-inside: avoid;
	}

	/* 画像やコードを紙面幅に収める */
	img {
		max-width: 100% !important;
		height: auto !important;
	}
	pre {
		white-space: pre-wrap;
		word-break: break-all;
	}

	/* 色付きの表見出しやラベルを印刷に残したい場合 */
	.keep-color {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

それぞれの意図を補足します。

リンクURLの表示：紙ではリンクをクリックできないため、参照先を文字で残します。内部リンクが多い記事では紙面がURLだらけになるので、本文 .entry-content 内だけに絞っています
改ページの制御：break-after: avoid は見出しだけがページ末に取り残されるのを防ぎます。古いブラウザ向けに page-break-after: avoid を併記する書き方もあります
色の扱い：ブラウザは標準で背景色や背景画像を省いて印刷します。print-color-adjust: exact を指定した要素は、画面と同じ色で印刷されやすくなります。ただし最終的には利用者の印刷設定が優先されることもあります

特定のページだけ印刷向けにする

WordPressは <body> に single、page、postid-123 のようなクラスを付けます。これを使えば、投稿ページだけ、特定の固定ページだけといった絞り込みができます。

@media print {
	/* 投稿ページでは関連記事も隠す */
	body.single .related-posts {
		display: none;
	}
}

「印刷する」ボタンを置きたい場合は、ボタンに onclick="window.print()" を付けるだけで印刷ダイアログを開けます。そのボタン自体も印刷用CSSで隠しておくと紙面がすっきりします。

崩れたときの確認方法

毎回プレビューを開いて確かめるのは手間がかかります。Chromeなら開発者ツールの「Rendering」パネルにある「Emulate CSS media type」で print を選ぶと、画面上で印刷時のスタイルを確認できます。ここで要素を選べば、どのルールが効いているかも通常どおり調べられます。

最後は実際の印刷プレビューでも確認してください。改ページの位置や余白はプレビューでないと分からないためです。ChromeとFirefoxでは改ページの扱いが少し異なることがあるので、利用者が多いブラウザで両方見ておくと安心です。

つまずきやすい点として、次のものがあります。

指定が効かない：テーマ側のCSSのほうが詳細度が高い。開発者ツールで打ち消されているルールを確認し、セレクターを強めるか !important を使う
画像が空白になる：遅延読み込み（loading="lazy"）の画像が、まだ読み込まれていない状態で印刷されることがある。ページを最後までスクロールしてから印刷すると改善する場合がある
変更が反映されない：キャッシュプラグインやブラウザのキャッシュが古いCSSを返している。キャッシュを削除し、バージョン番号が変わっているか確認する

ブラウザの印刷機能や開発者ツールの表記は更新で変わることがあります（2026年10月現在）。

まとめ

印刷用スタイルは、既存CSSへの @media print 追記か、別ファイルを wp_enqueue_style() の第5引数 'print' で読み込むかの2通り
記述が少なければ追記、多ければ別ファイルが管理しやすい
親テーマは直接編集せず、子テーマや追加CSSに書く
メニュー・サイドバー・フッター・広告を隠し、本文を紙面いっぱいに広げる
@page の余白、リンクURLの表示、break-after / break-inside による改ページ制御を加える
Chromeの「Emulate CSS media type」で確認し、最後は印刷プレビューで仕上げる