ブログ記事の印刷用スタイルを作る方法

WordPressで記事を印刷するとき、画面表示用のCSSがそのまま適用されてしまい、不要な要素（サイドバーやフッターなど）が印刷されてしまうことがあります。そこで、印刷用スタイル（print.css） を設定して、記事本文だけを綺麗に印刷できるようにする方法を解説します。

functions.php に印刷用CSSを読み込む

まずは印刷用CSSファイルを読み込むコードを functions.php に追加します。さらに便利にするため、記事ページに「印刷ボタン」を追加して、ワンクリックで印刷できるようにします。

// 印刷用CSSの読み込み
function my_print_styles() {
    wp_enqueue_style(
        'print-style',
        get_stylesheet_directory_uri() . '/print.css',
        array(),
        '1.0',
        'print'
    );
}
add_action('wp_enqueue_scripts', 'my_print_styles');

// 印刷ボタンを記事の最後に追加
function add_print_button($content) {
    if (is_single()) {
        $content .= '<div class="print-button">
            <button onclick="window.print()">印刷する</button>
        </div>';
    }
    return $content;
}
add_filter('the_content', 'add_print_button');
  

汎用CSS

/* 汎用 印刷スタイル */
@media print {
    /* 不要な要素を非表示 */
    header,
    footer,
    nav,
    .site-header,
    .site-footer,
    .sidebar,
    .widget,
    .global-nav,
    .navigation,
    .breadcrumbs,
    .ad,
    .ads,
    .ad-area,
    .toc,
    .comments-area,
    .comment-form,
    .related-posts,
    .author-box,
    .pagination {
        display: none !important;
    }

    /* 記事本文を全幅に */
    .site-content,
    .entry-content,
    .post-content,
    .content-area {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 10px !important;
    }

    /* フォント調整 */
    body {
        font-size: 14pt !important;
        line-height: 1.6 !important;
        color: #000 !important;
        background: #fff !important;
    }

    /* リンクはURLを表示 */
    a::after {
        content: " (" attr(href) ")";
        font-size: 12pt;
    }

    /* ボタンやフォームは非表示 */
    button,
    input,
    textarea,
    select {
        display: none !important;
    }

    /* 画像は印刷可だが幅調整 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}
  

テーマ別サンプルCSS

Lightning用

Lightning テーマではサイドバーやフッターを非表示にして、記事本文だけを印刷します。

/* Lightning用 印刷スタイル */
@media print {
    /* header は消さず、header 内の不要要素だけ非表示 */
    .site-header .global-nav,
    .site-header .breadcrumbs {
        display: none !important;
    }

    footer, .site-footer, .sidebar, .ad-area {
        display: none !important;
    }

    .site-content {
        width: 100% !important;
    }
}
  

Cocoon用

Cocoon テーマでは「目次」や「広告」なども非表示にすると見やすくなります。

/* Cocoon用 印刷スタイル */
@media print {
    header, footer, .sidebar, .ad-area, .toc {
        display: none !important;
    }
    .entry-content {
        font-size: 14pt;
        line-height: 1.6;
    }
}
  

まとめ

印刷用スタイルを設定することで、記事だけを綺麗に印刷できるようになります。