プリントアウトを美しく！WordPressを印刷に最適化する方法

WEBページをわざわざ印刷して、読む人はかなりの少数派だと思います。

ましてや、専門性の高いサイトで詳しく解説してあるならまだしも、当ブログのような普通のブログで、わざわざ印刷してまで読む方は、さらに少なくなるんじゃないかと思います。

ただ訪問者が、「これは！」と思い、わざわざ印刷し、手元に置いてまで熱心に読みたいページがあったときに、できれば綺麗に出力して読んでいただきたいのが人情。

ということで今回は、そんな熱心なページ読者のために最適化された印刷用ページを表示させるCSSを作成するカスタマイズ方法を紹介したいと思います。

印刷用CSSがない場合の問題点

通常WEBページは、主にブラウザで見るために作成されています。

ですので、わざわざ印刷用のスタイルを作成までしている方は、少ないのではないかと思います。僕もこれまでそうでした。

ただ、ブラウザ用のスタイル設定しかしていないサイトを印刷させてみようと、印刷プレビューをすると、このようになってしまいます。（ページはこちら）

これは、「Windowsのコマンドプロンプトをタブ化する方法」というページですが、パッと見て印刷して読むには不要なものが結構あります。それに、なんかはみ出してるし。

正直、ページの内容を印刷して読みたいと思った時に、ブログのタイトルとか、メニューとか、パンくずリストとか、サイドバーとか、SNSのシェア数とか、広告とか不要ですよね。

けれど、印刷用のCSSを設定していない場合、そういったものが全て表示されてしまいます。

しかも上の画像は、100％表示じゃ画面に収まりきらないので、70％表示にして本文が全て表示されるよう少し調整をしてようやく本文が表示されています。

これでは、印刷する場合に少し使い勝手が悪いです。

そこで、今回はWordpressに、印刷用のCSS設定をすることで以下のように、印刷して読む人に向けて最適化された出力がされるようにカスタマイズしてみたいと思います。

こちらは、デフォルトの100％表示でも、ページ内に収まるように表示されます。

加えて、余分なタイトルや、サイドバー、パンくずリスト、シェア数他いろいろが全てすっきりと削除され、読み手が文章に集中できるようになっています。

そんなわけで今回は、印刷したときに、気持ちよく読んでもらえるように、Wordpressサイトをカスタマイズする方法を紹介したいと思います。

このページも印刷用スタイルが既に適用されています。

※Simplicityではデフォルトの機能に入っています。

印刷に最適化するカスタマイズ方法の主な手順

まずは、主な手順の紹介です。

今回やることは、以下の3手順です。

1. style.cssの呼び出しチェック
2. 印刷用CSSの呼び出しを記入
3. 印刷用CSSのスタイル設定

印刷用スタイルの作成と言ったら、難しそうに感じますが、手順的にはそんなに多くありません。

style.cssの呼び出しチェック

通常Wordpressテーマの場合、header.phpなどでスタイルシートが以下のように読み込まれています。

WordPressでは、まず通常のスタイルシート（style.css）が以下のように読み込まれます。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="all">

もし「media=”all”」の部分が、「media=”screen”」になっている場合は、allに変更してください。

もしくは、以下のようにメディアタイプを指定しなければ、デフォルトでは「media=”all”」を指定した状態と同じになります。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

なぜ、「media=”screen”」ではだめなのかというと、スクリーンではパソコンのスクリーンにしかCSSのスタイルが反映されないからです。

WordPressの、style.cssも、一応印刷に反映させたいので、メディアタイプの指定はallにしておきます。

参考 メディアタイプ－CSSの基本

参考 link media=” ” で 外部CSSをメディア別に切り替えよう

印刷用CSSの呼び出しを記入

次に、印刷用のスタイルを記入するCSSの呼び出し部分を記入します。

style.css読み込みのあとに以下のように記入します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/print.css" media="print" />

「media=”print”」はプリンタ用（印刷用）のメディアタイプとなります。

「media=”print”」を指定すると、パソコンのスクリーン上では、これらのスタイルシートは呼び出されません。

通常は、これで良くて、以降で「print.css」ファイルでスタイルを編集していくことになります。

ただ、わざわざ印刷・プレビューでスタイルを確認するのは大変なので、ブラウザで確認できるように、とりあえず一旦ここは以下のように、HTMLを記入しておきます。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/print.css" media="all" />

メディアタイプが「media=”print”」→「media=”all”」になっています。

印刷用CSSのスタイル設定

あとは、「print.css」ファイルを作成して、その中に印刷用のスタイルを移入していきます。（今回の例では、テーマフォルダ直下に「print.css」を作成します。）

印刷用スタイルを書くポイント

印刷用スタイルを書くには、以下のようなことに注意して書けば良いかと思います。

1. メインカラム以外の不要なものは、「display: none;」で非表示に
2. メインカラムなどのコンテナは「width: auto;」で印刷用でもレスポンシブに
3. マイナスのmarginなどはリセットしておく
4. メインカラムにfloatなどが指定してある場合は、「float: none;」に
5. 必要な時は!importantで指定（カスタマイザーで設定されたスタイル対策）
6. 文字のサイズをpx→ptに変更

不要なものは、「display: none;」で非表示

とりあえず、通常は、ヘッダーやフッター、サイドバーなどは必要ないので、非表示にしてしまいます。

あと、ブラウザで表示を確認しながら、不要なものは全てCSSセレクタから「display: none;」にしてしまいます。

今回僕が行った例としては以下のようになります。（利用しているテーマのSimplicity用の設定になります。ここで紹介した印刷の設定は、後でSimplicity自体に実装してバージョンアップしようと思います。）

#header,
nav,
#breadcrumb,
#sidebar,
#sharebar,
.article .post-meta,
#sns-group-top,
section#under-entry-body,
.page-link,
#sns-group,
.post-tag,
.edit,
.wlw-edit,
.pager,
.widget-ad,
.widget-over-article,
.widget-under-article,
.widget-over-sns-buttons,
.widget-under-sns-buttons,
#page-top,
#footer{
  display: none !important;
}

メインカラムなどのコンテナは「width: auto;」

メインカラムなどは、何％の大きさで印刷したとしてもはみ出さないように、「width: auto;」などを指定します。

このように指定します。※あくまで例なので使用環境に合わせる必要があります。

#header, #header-in, #navi, #navi-in, #body-in, #footer-in{
  width: auto;
}

#main{
  width: auto;
}

マイナスのmarginなどはリセットしておく

あと、以下のようにマイナスのマージンが設定されている場合は、0などに指定して元に戻します。

左右にマイナスのマージンの例。

.article h2 {
  margin: 40px -29px 20px;
}

それを戻す例。こんなふうに、マージン、パディング、ボーダーなどが不要ならば、まとめて指定しても良いかと思います。

h1,
h2,
h3,
h4,
h5,
h6{
  background-color: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  border-width: 0 !important;
}

メインカラムを「float: none;」に

もしメインカラムなどにフロート（回り込み）が指定されている場合は、表示のずれの原因になるので「float: none;」を使用して、それを解除してやります。

#main{
  float: none;
}

必要な時は!importantで指定

WordPressの場合は、テーマカスタマイザーでスタイルを設定した場合などは、HTMLにスタイルが埋め込まれるので、最も優先されてしまいます。

そういった場合は、!importantを指定して優先度を上げて対応します。

設定例。

blockquote{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

参考 !importantによる優先度の変更 – スタイルシートの優先順位 – スタイルシート入門

文字のサイズをpx→ptに変更

あとは、印刷用の文字サイズをpx→ptに変更してやります。

というのもpx（ピクセル）は、モニターの解像度が変わると、大きさが変わってしまうからです。

反面、ptは印刷での物理的なサイズ単位(72pt ＝ 1インチ ＝ 2.54cm)として使用されます。

それについては、以下に詳しく書かれています。

参考 印刷用CSSの文字サイズ単位はpt？ | アイビーネットblog

例としては、以下のように書きます。

body,
.article {
    font-size: 11pt;
}
.article h1 {
  font-size: 21.5pt;
}

.article h2 {
  font-size: 18.5pt;
}

.article h3 {
  font-size: 16pt;
}

.article h4,
.article h5,
.article h6 {
  font-size: 14pt;
}

通常は、10、11ptあたりが標準だそうなので、通常の文字を少し大きめの11ptにしてあります。

pxをptに変換する目安としては、以下のページなどが参考になります。

参考 フォントサイズ比較表＊あるてぽーべら＊

print.cssを呼び出すメディアタイプをprintに戻す

最後に、先程ブラウザで動作確認できるように変更した部分を元に戻します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/print.css" media="print" />

「media=”all”」の部分を「media=”print”」のようにして、印刷用に戻します。

print.css設定例

今回、設定したCSSは以下のようになります。

テーマが変わると、利用できませんが、どのようなことをしているかの目安にはなると思います。

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

#header,
nav,
#breadcrumb,
#sidebar,
#sharebar,
.article .post-meta,
#sns-group-top,
section#under-entry-body,
.page-link,
#sns-group,
.post-tag,
.edit,
.wlw-edit,
.pager,
.widget-ad,
.widget-over-article,
.widget-under-article,
.widget-over-sns-buttons,
.widget-under-sns-buttons,
#page-top,
#footer{
  display: none !important;
}


#header, #header-in, #navi, #navi-in, #body-in, #footer-in{
  width: auto !important;
}

#main{
  border-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  width: auto;
  float: none;
}


h1,
h2,
h3,
h4,
h5,
h6{
  background-color: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  border-width: 0 !important;
}

body,
.article {
    font-size: 11pt;
}
.article h1 {
  font-size: 21.5pt;
}

.article h2 {
  font-size: 18.5pt;
}

.article h3 {
  font-size: 16pt;
}

.article h4,
.article h5,
.article h6 {
  font-size: 14pt;
}

blockquote{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

印刷用のCSSは、基本的に最後に呼び出して、!importantで優先度を高くしています。importantを多用するのは、作法的にあまり良くないかもしれません。けれどその後、印刷用のCSSをカスタマイズすることもまずないと思うので、そこまで面倒なことにはならないかと思います。

あと、!importantを指定するのは、Wordpress対策でもあります。テーマカスタマイザーや、プラグインなどで、直接HTMLにCSSが埋め込まれている場合に、優先度が負けてしまうのを防ぎます。

このほかにも、行間や、見出しのスタイル、画像の扱いなど、細かな修正点はあるかもしれませんが、利用テーマに合わせて設定してみてください。

動作確認

このように設定することで、個別ページでは以下のように印刷プレビューで表示されます。

ヘッダーやサイドバーなどは、全て非表示にしてあります。

最終ページに行っても、フッターや、広告など、不要なものは表示されません。

ここを印刷する人は、まずいないと思いますが、リストページなどでは、以下のように表示されます。

まとめ

このような感じで、Wordpressページを印刷対応にすることができます。

僕も、プログラムの解説ページなどは、印刷して本立てに置いて読みながら、編集するなんてことも過去にありました。

そういった場合に、印刷用のスタイルが設定されてないと、うまく印刷するのが結構面倒くさかったりします。設定をするのが面倒で一旦エディターに貼り付けて印刷したりすることも。

今回のカスタマイズをしたからといって、影響を受ける対象者は、かなり少ないと思われます。けれど、もし印刷するくらい熱心な読者がいた場合は、そういった方のための、利便性はかなり上がると思います。

最初、「印刷用のスタイル指定なんて面倒くさそう」とも思っていたのですが、基本的にやることは、ブラウザ用のスタイルをカスタマイズすることと変わりません。

もし、「印刷用にもユーザビリティーをあげたい」、「余分なものまで印刷されてインクがもったいない」なんて場合は、おすすめのカスタマイズだと思います。