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

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

1 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');
  

2 汎用CSS

/* -----------------------------
 * 汎用 印刷スタイル
 * ----------------------------- */

@media print {

    /* 不要な要素を非表示 */
    header,                /* HTML標準のヘッダー */
    footer,                /* HTML標準のフッター */
    nav,                   /* HTML標準のナビゲーション */
    .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;  /* 横幅を100%に */
        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) ")"; /* リンクの後にURLを表示 */
        font-size: 12pt;              /* 少し小さめの文字 */
    }

    /* ボタンやフォームは非表示 */
    button,               /* ボタン */
    input,                /* 入力欄 */
    textarea,             /* テキストエリア */
    select {              /* セレクトボックス */
        display: none !important; /* 印刷時に不要なので非表示 */
    }

    /* 画像は印刷可だが幅調整 */
    img {
        max-width: 100% !important; /* 横幅を本文に合わせる */
        height: auto !important;    /* アスペクト比を維持 */
    }
}
  

3 テーマ別サンプルCSS

3.1 Lightning用

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

/* -----------------------------
 * Lightning用 印刷スタイル
 * ----------------------------- */

@media print {
    /* ヘッダー内の不要要素を非表示 */
    .site-header .global-nav,   /* グローバルナビメニュー */
    .site-header .breadcrumbs { /* パンくずリスト */
        display: none !important; /* 印刷時は非表示 */
    }

    /* フッターやサイドバー、広告エリアを非表示 */
    footer,                     /* HTML標準のフッター */
    .site-footer,               /* テーマ共通のフッター */
    .sidebar,                   /* サイドバー */
    .ad-area {                  /* 広告エリア */
        display: none !important; /* 印刷時は非表示 */
    }

    /* 記事本文は全幅に表示 */
    .site-content {             /* メインコンテンツ領域 */
        width: 100% !important; /* 横幅を100%に */
    }
}
  

3.2 Cocoon用

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

/* -----------------------------
 * Cocoon用 印刷スタイル
 * ----------------------------- */

@media print {
    /* ヘッダー、フッター、サイドバー、広告エリア、目次を非表示 */
    header,       /* HTML標準のヘッダー */
    footer,       /* HTML標準のフッター */
    .sidebar,     /* サイドバー */
    .ad-area,     /* 広告エリア */
    .toc {        /* 目次 */
        display: none !important; /* 印刷時は非表示 */
    }

    /* 記事本文のフォントサイズと行間を調整 */
    .entry-content {       /* 記事本文領域 */
        font-size: 14pt;   /* フォントサイズを印刷向けに */
        line-height: 1.6;  /* 行間を少し広く */
    }
}
  

4 まとめ

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