WordPress maaguu (^^; com 北海道札幌でホームページ制作を楽しむ

WordPress, WordPress MU(μ) についての話題、プラグイン作成、カスタマイズ。

プリント(印刷)用CSSを作る

このサイトのプリント用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がエスケープされる。これってどこで設定するのかな?

ポイントを現金でキャッシュバック

コメントを残す


※入力必須

※入力必須
Email to maaguu:info@mx.maaguu.com Powered by WordPress MU Clicky Web Analytics