既に組み込まれた印刷用cssを外し、画面通りに印刷する方法

1. style.cssの印刷用のスタイルシートを以下の通りコメントアウト

/* @media print {
* {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}

a, a:visited {
text-decoration: underline;
}

a[href]:after {
content: ” (” attr(href) “)”;
}

abbr[title]:after {
content: ” (” attr(title) “)”;
}

.ir a:after, a[href^=”javascript:”]:after, a[href^=”#”]:after {
content: “”;
}

pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}

thead {
display: table-header-group;
}

tr, img {
page-break-inside: avoid;
}

img {
max-width: 100% !important;
}

@page {
margin: 0.5cm;
}

p, h2, h3 {
orphans: 3;
widows: 3;
}

h2, h3 {
page-break-after: avoid;
}

.hide-on-print {
display: none !important;
}

.print-only {
display: block !important;
}

.hide-for-print {
display: none !important;
}

.show-for-print {
display: inherit !important;
}
}
button, .button {
border-style: solid;
border-width: 1px;
cursor: pointer;
font-family: inherit;
font-weight: bold;
line-height: 1;
margin: 0 0 1.25em;
position: relative;
text-decoration: none;
text-align: center;
display: inline-block;
padding-top: 0.75em;
padding-right: 1.5em;
padding-bottom: 0.8125em;
padding-left: 1.5em;
font-size: 1em;
background-color: #2ba6cb;
border-color: #2284a1;
color: #fff;
} */

2. このテーマはasset/css/style.cssを上記のstyle.cssで上書きしているため、

元になるこのstyle.cssも同じようにコメントアウト。

→ これでやっと組み込まれた印刷用のcssが外れる。

3. 1.のstyle.cssをコピーして、print.cssと名前をつける。

4. print.cssを読み込むために、header.phpに

<!– 画面表示通りに印刷できるようにprint.cssにリンクさせる 2014/4/15 –>
<link rel=”stylesheet” type=”text/css” media=”print” href=”<?php bloginfo(‘template_directory’); ?>/styles/print.css” / >

と記述。

はい、目出たくできました!!

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

■おまけ

ついでに以下もコメントアウト

<!– <link rel=”profile” href=”http://gmpg.org/xfn/11″ /> –>

「XFN」を利用する際に記述しなければならないものだが、2012年の1/20にGoogleが終了を発表。

なんだかわからないリンクなので消す。

WordPressのhead内のいらない記述を消す方法。