クロスブリード!グッとくるものを残していきます。4.00)Loading...新ブログ始めました!http://crossbreed.hatenablog.comTweetshareサーバ移転に伴う更新第1弾として、以前から声があがっていた、「このサイトを印刷したい」という課題に挑戦してみました。会社でしかPCを見ることが出来ない方にはWEBサイトを印刷するという事は日常茶飯事な事なのかもしれませんね。IE、NNなどで、「印刷プレビュー」なるものがあるので、実行してみて下さい。サイドバーなど、余計なものが印刷時には含まれていません。これはCSSを調整するだけで割と簡単に導入できるのです。例を挙げて解説してみます。/>このように変更し、styles-print.cssを新たに作ります。print{}と記述し、カッコ内にそれぞれの記述をするように変更すると、印刷時にはこのCSSファイルを読み込んで印刷してくれます。これだけ!えっと、ここはMovabletype(以下MT)で作成されているので、もうちょっと簡単に作成できる方法を解説します。他のweblogツールの方でも参考になるかと思います。新しいインデックステンプレートを作るで、新しいテンプレートを作成します。テンプレートの名前:Styleprint出力ファイル名:print-site.css自動的に再構築:OFFリンクするファイル:空白テンプレートの中身はウチで使っているものをサンプルとして。こちらからDLできます。}のように指定するだけで余計なサイドバー等を印刷しない事ができます。逆に印刷時だけに出力する項目は、スクリーン用CSSを「none」にすれば良いのですね。暫定UPなので表示が上手くいってない個所は後ほど修正します。それに合わせて、個別記事の下に「このサイトを印刷」ボタンを加えました。これでそのページを印刷できるという便利な代物です。いかがでしょうか?この印刷ボタン(リンク?)は、windows.print()というメソッドを使用しているんですが、プレビューのメソッドがどうしても見つかりませんでした。どなたかご存知の方はいらっしゃいませんか?ブラウザ独自の機能だからなさそうだなあ。印刷用スタイルシートのススメ(コビット)この記事を読んで頂きありがとうございます。コメント欄も設けておりますが、よかったらtwitterやfacebookなどでつぶやいたりシェアして頂けると嬉しいです。印刷には、スタイルシートが適用されませんが、印刷用のスタイルシートを用意してリンクするだけで、印刷時のデザインもコントロールできます。16:05こんにちは。いつも貴重な情報を有り難うございます。仕事でも会社のブログを管理しているのですが、長文掲載が多いため、印刷用のスタイルシートを作りました。印刷物が見やすくなりました。22:05>モカさんお役に立てたようで。こちらも嬉しい限りです。遊びに来てくださいね。URLコメントして下さい返信をキャンセルする。