• 管理人へのメール

  • crossbreed tumblr.  ※画像をクリックして拡大できます tumblr-タンブラーって何?tumblrの始め方
    最新記事ヘッドライン (※画像をクリックして拡大できます)
    はてなブログ始めました この記事を読む → はてなブログ始めました http://crossbreed.tv/archives/201709011610.php お前らってどうやって嫌な事乗り越えてるの? この記事を読む → お前らってどうやって嫌な事乗り越えてるの? http://crossbreed.tv/archives/201501150028.php キモ美しい街並みを集めてみたよ(Googleマップ付) この記事を読む → キモ美しい街並みを集めてみたよ(Googleマップ付) http://crossbreed.tv/archives/201501101258.php みんなのビヤホールCMがリア充過ぎる件 この記事を読む → みんなのビヤホールCMがリア充過ぎる件 http://crossbreed.tv/archives/201501101122.php 【DJMIX】Bar KNAT FINAL MIX この記事を読む → 【DJMIX】Bar KNAT FINAL MIX http://crossbreed.tv/archives/201411300014.php
    同カテゴリ内最新記事ヘッドライン (※画像をクリックして拡大できます)
    「姪っ子が嫁に行った」スレ この記事を読む → 「姪っ子が嫁に行った」スレ http://crossbreed.tv/archives/201104042221.php Ajaxを使ったクールなメールフォームを設置する方法 この記事を読む → Ajaxを使ったクールなメールフォームを設置する方法 http://crossbreed.tv/archives/200901122305.php ネタ投稿掲示板を始める事にしたよ! この記事を読む → ネタ投稿掲示板を始める事にしたよ! http://crossbreed.tv/archives/200711291245.php web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1 この記事を読む → web2.0時代のhtmlタグ作成方法(amazonリンクタグ作成方法)その1 http://crossbreed.tv/archives/200607190117.php トラックバックスパムフィルター「BanNoReferTb」は凄いです この記事を読む → トラックバックスパムフィルター「BanNoReferTb」は凄いです http://crossbreed.tv/archives/200603261315.php

    6月
    07
    2004

    印刷用CSS(スタイルシート)・weblog(ブログ)の印刷

    カテゴリ:blogカスタマイズ |

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (1票, 平均: 4.00)
    Loading...


    新ブログ始めました!
    http://crossbreed.hatenablog.com

    IEによる印刷プレビューイメージ サーバ移転に伴う更新第1弾として、以前から声があがっていた、「このサイトを印刷したい」
    という課題に挑戦してみました。ここを印刷までして読んで頂いている方が結構いるらしいのです(泣
    会社でしかPCを見ることが出来ない方にはWEBサイトを印刷するという事は日常茶飯事な事なのかもしれませんね。
    IE、NNなどで、「印刷プレビュー」なるものがあるので、実行してみて下さい。
    サイドバーなど、余計なものが印刷時には含まれていません。これはCSSを調整するだけで割と簡単に導入できるのです。例を挙げて解説してみます。


    <link rel="stylesheet" href="styles-site.css" type="text/css">
    このようになっているCSSの記述を
    <link rel="stylesheet" href="styles-site.css" type="text/css"
    media="screen,tv" />
    <link rel="stylesheet" href="styles-print.css" type="text/css" media="print" />
    このように変更し、styles-print.cssを新たに作ります。
    通常用スタイルシートは
    @media screen{
    }
    印刷用は
    @media print{
    }
    と記述し、カッコ内にそれぞれの記述をするように変更すると、印刷時にはこのCSSファイルを読み込んで印刷してくれます。
    これだけ!
    えっと、ここはMovabletype(以下MT)で作成されているので、もうちょっと簡単に作成できる方法を解説します。他のweblogツールの方でも参考になるかと思います。
    MTの管理画面 → テンプレートの編集 → 新しいインデックステンプレートを作る
    で、新しいテンプレートを作成します。
    テンプレートの名前:Styleprint
    出力ファイル名:print-site.css
    自動的に再構築:OFF
    リンクするファイル:空白
    テンプレートの中身はウチで使っているものをサンプルとして。
    こちらからDLできます。
    自作する方は印刷したくないクラスを
    .side{ DISPLAY:none }
    のように指定するだけで余計なサイドバー等を印刷しない事ができます。逆に印刷時だけに出力する項目は、スクリーン用CSSを「none」にすれば良いのですね。
    とりあえず、暫定UPなので表示が上手くいってない個所は後ほど修正します。
    それに合わせて、個別記事の下に「このサイトを印刷」ボタンを加えました。これでそのページを印刷できるという便利な代物です。いかがでしょうか?
    この印刷ボタン(リンク?)は、
    windows.print()
    というメソッドを使用しているんですが、プレビューのメソッドがどうしても見つかりませんでした。どなたかご存知の方はいらっしゃいませんか?
    ブラウザ独自の機能だからなさそうだなあ。
    【ネタ元】
    印刷用スタイルシートのススメ(コビット)


    日々の生活にhappyをプラスする|ハピタスサイフもココロもハッピーに!ちょびリッチ

    この記事を読んで頂きありがとうございます。
    コメント欄も設けておりますが、
    よかったらtwitterやfacebookなどでつぶやいたりシェアして頂けると嬉しいです。

    STARを押してこの記事を評価お願いします→
    つまんないイマイチ普通まあまあよかった! (1票, 平均: 4.00)
    Loading...

    Written by ayu in: blogカスタマイズ |

    5 Comments »

    • g より:

      blogの印刷

      印刷には、スタイルシートが適用されませんが、印刷用のスタイルシートを用意してリンクするだけで、印刷時のデザインもコントロールできます。

    • モカ より:

       こんにちは。
       いつも貴重な情報を有り難うございます。
       仕事でも会社のブログを管理しているのですが、長文掲載が多いため、印刷用のスタイルシートを作りました。
       とっても印刷物が見やすくなりました。
       有り難うございます。
       とっても感謝しています(^*^)

    • 管理人ayu より:

      >モカさん
      お役に立てたようで。こちらも嬉しい限りです。また遊びに来てくださいね。

    • Movable typeテンプレートいじりました

      カテゴリ名が長すぎてエントリのタイトルが読みにくくなってきたので、各エントリの右…

    • 印刷+PHP

      帳票印刷+WEB 帳票からポスターにいたる複雑なレイアウトの動的な印刷をWeb上で高速かつ正確に行うソフト Webで帳票印刷PXDoc ▲ ▼郵…

    RSS feed for comments on this post. TrackBack URL


    コメントして下さい

    同一カテゴリ内記事

    最近買ったモノ


    Template: TheBuckmaker.com Blog Themes | Website Hosting, Gesundheitspapst