プリント(印刷)用CSSを作る
- 2008年12月12日 22時56分
- WordPress MU | tips
このサイトのプリント用CSSを考えてみる。
- このサイトのデザイン(Webブラウザに表示された見た目の部分限定)を印刷する人はいないだろう(
「それはわからない」
「あなたの思いこみです」
と誰かが指摘する)。 - このサイトのコンテンツを見に来る人はWordPressについて知りたい人だ(
「デザインを見たい人かもしれないし」
と誰かが指摘する)。 - このサイトのソースコードなどを印刷して手元で見たい人がいるかもしれない(
「そもそも印刷する人は画面に映ったモノそのままを見たいと思うもんだよ。他の誰かに見せる場合もあるしね」
と誰かが指摘する)。
ご指摘は有り難いのですが、このサイトの場合は見送りいたします(^^)
コンテンツを印刷できれば十分。それが見やすい読みやすい。それ以外を求める場合はスクリーンショットを撮って印刷すればよろしい(「見た目そのままを印刷したいと思う人はそんなスキルないし、そんなことしたら文字読めないよ」
と誰かが指摘する)。
じゃあ、印刷ボタンを押すと、スクリーンショットを撮ってPDFにして印刷するプログラム書けばいいかも。買ってくれる人いるかもしれんし、流行るかもしれんです。
さて、参考までにprint.cssのソースコードを。
@media print
{
*
{
font-style: normal;
}
body
{
font-family: serif;
font-size: 12pt;
}
#hd
{
border: dashed 2pt #000;
border-left: none;
border-right: none;
text-align: center;
}
#hd-link
{
display: none;
}
#bd .entry-hd
{
border: dashed 1pt #000;
border-left: none;
border-right: none;
margin-top: 1em;
}
#bd .entry-hd h2 span
{
display: none;
}
#bd .entry-nv
{
display: none;
}
#sd
{
display: none;
}
#ft
{
border-top: dashed 2pt #000;
margin-top: 2em;
padding-top: 1em;
}
#ft address
{
font-family: sans-serif;
text-align: center;
}
#ft #link
{
display: none;
}
code
{
font-family: "Courier New", "Ludica Console", monospace;
}
a
{
color: #000;
text-decoration: none;
}
a:after
{
content: "[URI: "attr(href)"]";
color: #000;
font-family: sans-serif;
font-size: 80%;
}
ins
{
text-decoration: none;
border-bottom: dotted .5pt #000;
}
ins:before
{
content: "[PostScript]: ";
}
ins:after
{
content: "("attr(datetime)")";
font-size: 80%;
}
}
ここで問題発見。insのdatetimeが00になってしまっているなあ。
あれれ、sampがエスケープされる。これってどこで設定するのかな?



コメントを残す