2026年5月28日

WordPressのCSSで印刷プレビューを最適化する方法

テーマ・デザイン

はじめに

ウェブサイトを印刷する際、デジタル表示とは異なるレイアウトや文字サイズの調整が必要になります。特に、ニュース記事やレシピサイトなどでよく見かける印刷プレビューは読者にとって非常に便利です。しかし、デフォルトではWordPressサイトの印刷プレビューが必ずしも最適化されているわけではありません。

この記事では、より良いユーザーエクスペリエンスを提供するために、WordPressテーマに独自の印刷用CSSスタイルシートを追加する方法や既存のCSSを調整するためのテクニックについて説明します。これにより、ユーザーがウェブサイトを効果的に印刷でき、コンテンツが読みやすく保たれます。

症状・背景

このテーマが必要になる主な場面:

ニュース記事やレシピページなどの長い文章を印刷する際、不要なCSSスタイルによって文字が見づらくなる。
ウェブサイト全体のデザイン要素（画像やバナーなど）が印刷時に邪魔になり、読みにくいレイアウトになる。
記事のコメントセクションやシェアボタンなどが印刷プレビューに含まれ、不要な情報を含む。
デバイスの種類やブラウザによって異なる印刷結果を避けたい。

手順・設定方法

ステップ1: プリント用CSSスタイルシートの作成とインクルード

まず、プリント用のCSSスタイルシートファイルを作成します。このスタイルシートには、印刷時に表示したい要素のみを指定するためのCSSプロパティが含まれます。

# サイトのテーマディレクトリに新規CSSファイルを作成または編集
nano style-print.css

# ファイル内で以下のCSSルールを追加
@media print {
    body { font-size: 12px; line-height: 1.5; }
    .post img, .gallery-item img { width: auto; height: auto; max-width: none; }
    .site-header, .site-footer, #sidebar { display: none !important; }
}

ステップ2: プリント用CSSの読み込みをテーマヘッダーに追加

作成したプリント用スタイルシートを、テーマのヘッダーファイル（header.php）や関数ファイル（functions.php）からサイト全体で利用可能にする必要があります。

# テーマのヘッダーファイル内で以下のPHPコードを追加または編集
<?php
function wp_print_style() {
    if (wp_is_mobile()) return;
    $handle = 'print-styles';
    $src = get_template_directory_uri() . '/style-print.css';
    $deps = array('wp-block-library');
    $ver = wp_get_theme()->get('Version');
    $media = 'print';
    wp_enqueue_style($handle, $src, $deps, $ver, $media);
}
add_action('wp_print_styles', 'wp_print_style');

ステップ3: プリント用CSSの応用と組み合わせ

印刷プレビューをさらに最適化するためには、既存のCSSスタイルやJavaScriptを使用して追加のカスタマイズを行うことができます。例えば、特定のクラスを持つ要素だけを非表示にするなどの細かい調整が可能になります。

# テーマディレクトリ内のstyle.cssファイル内にプリント用メディアクエリーを追加または編集
@media print {
    .no-print, .no-print * { display: none !important; }
    .print-only, .print-only * { display: inline-block !important; }
}

# テーマディレクトリ内のfunctions.phpファイル内にJavaScriptの読み込みを追加または編集
function wp_print_script() {
    if (wp_is_mobile()) return;
    $handle = 'print-script';
    $src = get_template_directory_uri() . '/js/print.js';
    $deps = array('jquery');
    $ver = wp_get_theme()->get('Version');
    wp_enqueue_script($handle, $src, $deps, $ver, true);
}
add_action('wp_print_scripts', 'wp_print_script');

ステップ4: プリント用CSSのトラブルシュートと監視

プリント用CSSが正しく機能しているかを確認し、必要に応じて調整を行います。ブラウザの開発者ツールを使用して印刷プレビューをテストすると良いでしょう。

# ブラウザの開発者ツールを開き、プリントプレビューを表示する
Ctrl+Shift+P (Firefox)またはCmd+Shift+P (Safari)

注意事項

サイト全体のデザイン要素が印刷時に邪魔にならないように、不要なセクションや画像を非表示にするCSSプロパティを使用します。
ユーザーインターフェースの重要な部分（コメントフォームなど）が印刷プレビューに含まれないように注意してください。
印刷用スタイルシートは、デバイスやブラウザの種類によって異なる動作をする可能性があるため、さまざまな環境でテストすることが重要です。

まとめ

1. プリント用CSSファイルを作成: テーマディレクトリに新規または既存のCSSファイルを編集して、印刷時に表示したい要素のみを指定します。

2. プリント用スタイルシートを読み込む: テーマヘッダーや関数ファイルからプリント用スタイルシートをインクルードすることで、サイト全体で利用可能にします。

3. プリント用CSSの応用と組み合わせ: 既存のCSSやJavaScriptを利用して、さらに細かい調整を行います。これにより印刷プレビューがより読みやすくなります。

4. トラブルシューティングと監視: ブラウザの開発者ツールを使用して印刷プレビューをテストし、必要に応じて調整します。

Post Views: 6