WordPressを見たままプリントする方法

WordPress LOGO

WordPressのページをデフォルトのままプリントしようとすると、CSSが適用されていない状態で印刷される。その回避方法をメモ。下記はWordPressテーマデザイナー向けだが、そうじゃない人でプリントしたい人は、ブラウザの開発者画面(HTMLビュー)で下記の通り編集すれば印刷できると思います。(未確認)

スポンサードリンク

方法1(CSS type medhiaにprintを追記)

CSSがプリントでも有効になっていない、ので有効とする方法

WPの外観>テーマ編集の「header.php」内のmeta情報にある

link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" /

, printを追加し

link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection, print" /

とする。多くはこれで解決できる。(要確認)

方法2(プリント用CSSをごっそり追記)

もうひとつの方法は、印刷用のスタイルシートをstyle.cssからまるごとコピーしてリンクさせてあげるだけ。
style.cssをコピーしprint.cssにリネーム

header.php
link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" /
の下に
link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_directory'); ?>/styles/print.css" /
を追加

あとは、サイドバーなど印刷に邪魔なものをdisplay: none;で非表示にするなどprint.cssをカスタマイズ。

これで解決

WordPressを見たままプリントする方法は、「方法1」のmediaへのprintでほとんど解決できるでしょう。

スポンサードリンク

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
専門は企画・出版・編集・印刷、Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。