WordPressの印刷用スタイルシートを設定する方法

はじめに

印刷用スタイルシートを設定すると、ユーザーがブラウザの印刷機能を使ったときに余計な要素を非表示にし、読みやすいレイアウトで出力できます。WordPressでは @media print をメインCSSに含めるか、専用CSSファイルを media="print" で読み込む方法があります。

症状・原因

• 印刷するとナビゲーションや広告まで出力される
• 印刷時に色が濃すぎてインクを無駄使いしている
• URLリンクを印刷時に表示したい
• 印刷ページの余白・フォントサイズを調整したい

解決手順

ステップ1：@media printをメインCSSに追加する（推奨）

/* style.css の末尾に追加 */
@media print {

    /* 不要な要素を非表示 */
    .site-header,
    .site-nav,
    .site-sidebar,
    .site-footer,
    .comments-area,
    .post-navigation,
    .widget-area,
    .wp-block-button,
    button,
    [class*="ad-"] {
        display: none !important;
    }

    /* 印刷用レイアウト */
    body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000;
        background: #fff;
    }

    .site-main,
    .entry-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }

    /* ページ余白 */
    @page {
        margin: 1.5cm 2cm;
    }
}

ステップ2：専用の印刷CSSファイルを読み込む

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    wp_enqueue_style(
        'my-print',
        get_template_directory_uri() . '/css/print.css',
        [],
        '1.0.0',
        'print' // media属性をprintに設定
    );
});

/* css/print.css */
.site-header,
.site-nav,
.site-sidebar,
.site-footer {
    display: none;
}

body {
    font-size: 12pt;
    color: #000;
}

ステップ3：リンクのURLを印刷時に表示する

@media print {
    /* href属性の値をリンクテキストの後に表示 */
    .entry-content a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
    }

    /* 内部リンク・アンカーリンクは除外 */
    .entry-content a[href^="#"]::after,
    .entry-content a[href^="javascript"]::after {
        content: '';
    }
}

ステップ4：ページ区切りを制御する

@media print {
    /* 要素の途中でページが切れないようにする */
    .card,
    figure,
    blockquote {
        break-inside: avoid;
        page-break-inside: avoid; /* 旧ブラウザ用 */
    }

    /* 見出しの前でページを区切る */
    h2 {
        break-before: page;
        page-break-before: always;
    }

    /* 最初のh2はページ区切りなし */
    .entry-content > h2:first-child {
        break-before: auto;
    }

    /* 見出しの後でページが切れないようにする */
    h2, h3 {
        break-after: avoid;
        page-break-after: avoid;
    }
}

ステップ5：印刷時のフォントと画像最適化

@media print {
    /* システムフォントを使用（Webフォントは読み込まれない場合あり） */
    body {
        font-family: Georgia, 'Times New Roman', serif;
    }

    /* 画像をページ幅に収める */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 背景色・背景画像を削除してインク節約 */
    * {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

注意事項

• @media print はCSSに直接書く方法の方が、別ファイルを media="print" で読み込む方法より優先度が高い場合があります（CSSの読み込み順による）
• break-inside: avoid は最新仕様ですが、旧来の page-break-inside: avoid も併記するとブラウザ互換性が上がります
• 印刷プレビューはChromeの開発者ツール（レンダリング → CSS Media Type を print に変更）で確認できます

まとめ

@media print { .site-header, .site-nav { display: none } } で不要要素を隠し、body { font-size: 12pt; color: #000 } で印刷向けスタイルを設定します。a[href]::after { content: ' (' attr(href) ')' } でリンクURLを印刷でき、break-inside: avoid でカードや引用が途中で切れるのを防げます。