印刷用CSS(スタイルシート)・weblog(ブログ)の印刷  このエントリーを含むはてなブックマーク

【はてなブックマーク】:  【カテゴリ】:[ MT ]

IEによる印刷プレビューイメージ
サーバ移転に伴う更新第1弾として、以前から声があがっていた、「このサイトを印刷したい」

という課題に挑戦してみました。ここを印刷までして読んで頂いている方が結構いるらしいのです(泣
会社でしかPCを見ることが出来ない方にはWEBサイトを印刷するという事は日常茶飯事な事なのかもしれませんね。

IE、NNなどで、「印刷プレビュー」なるものがあるので、実行してみて下さい。

サイドバーなど、余計なものが印刷時には含まれていません。これはCSSを調整するだけで割と簡単に導入できるのです。例を挙げて解説してみます。

スポンサードリンク

このようになっているCSSの記述を


このように変更し、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()

というメソッドを使用しているんですが、プレビューのメソッドがどうしても見つかりませんでした。どなたかご存知の方はいらっしゃいませんか?
ブラウザ独自の機能だからなさそうだなあ。

【ネタ元】
印刷用スタイルシートのススメ(コビット)

スポンサードリンク

※このサイトはさくらインターネットのサーバを利用しています。

■gi(ギィー)福岡浄水通りの絣(かすり)と手作り雑貨のセレクトショップ
↑サイト内紹介記事
【PR】BTOパソコンの先駆者 FRONTIER
投稿者 ayu : 2004年06月07日 18:16 | コメントを読む | このサイトを印刷
このカテゴリの最新記事
他サイトよりの参照関連記事(トラックバック)
この記事のトラックバック用URL:
 
※当該記事にリンクのないトラックバックは削除することがあります。トラックバックについてを参考にして下さい。
記事タイトル : blogの印刷( [g ] さんの記事より)

概要 : 印刷には、スタイルシートが適用されませんが、印刷用のスタイルシートを用意してリンクするだけで、印刷時のデザインもコントロールできます。
日付 : 2005.03.04
記事タイトル : Movable typeテンプレートいじりました( [pooneilの脳科学論文コメント ] さんの記事より)

概要 : カテゴリ名が長すぎてエントリのタイトルが読みにくくなってきたので、各エントリの右...
日付 : 2006.02.03
記事タイトル : 印刷+PHP( [青海波 PukiWiki Plus 実験中! (PukiWiki/TrackBack 0.3) ] さんの記事より)

概要 : 帳票印刷+WEB 帳票からポスターにいたる複雑なレイアウトの動的な印刷をWeb上で高速かつ正確に行うソフト Webで帳票印刷PXDoc ▲ ▼郵...
日付 : 2006.04.24
この記事へのコメント

 こんにちは。
 いつも貴重な情報を有り難うございます。

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

Posted by: モカ at 2005年12月01日 16:05

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

Posted by: 管理人ayu at 2005年12月05日 22:05
是非この記事に対するコメントを下さい









名前、アドレスを次回から入力不要にする? 
(チェックを入れると次回書き込みに便利です)

コメントに返信があった場合メールで知らせる?(現在機能停止中)

※重複トラックバックの削除依頼のコメントは不必要です。こちらで消しますので。

BLOGPEOPLE
アンテナ(リスペクト巡回先)
現在アンテナ表示停止中
はてなアンテナに追加
姉妹サイト
オススメ(ハジメテの方)
BBS / ゲストブック
BBS
Links
powered
このブログのXML


powerd by sakura web

PR
◆住宅ローンでお悩みの皆様、まずは相談!
住宅金融公庫提携の、全期間固定金利で金利変動リスクに影響されない安心な住宅ローンです。

◆不動産を有効活用し、複数の借り入れを低金利で一本化
不動産担保ローンで32年の実績。法人・個人を問わず資金使途も自由なローンとなります。

◆女性に人気急上昇!安心の結婚情報
医師や弁護士との結婚例が急上昇。早いもの勝ち?! ◆「価格.com自動車保険」あなたは払いすぎている!
保険料を払いすぎていませんか?安い保険を一括見積もり!

◆価格.com 外為
リアルタイムで外国為替のトレードが行えるサービスです。株式投資の初心者も安心。低コストで外貨受渡しが可能です。
◆不動産担保ローンで31年の信頼と実績
即日クレジットカードにてローンを契約。不動産を担保に融資をするならここで。キャッシングも可能な安心の投資会社です

安い自動車保険。不動産を担保に利用してクレジットカードで即日ローンを契約。シティバンクに投資、減税対策、医者と結婚。オンラインカジノの情報。






サイト内で迷ったらこちら

■よりぬきクロスブリード
※オススメ記事はコチラから。初めて来た方も是非。

■ランダムピックアップ
※サイト内でランダムに記事を表示します。(ランダムピックアップ設置方法はコチラ