クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> > ブログをきれいに印刷してもらうために - Blogger ブログに印刷用 CSS を導入する方法

ブログをきれいに印刷してもらうために - Blogger ブログに印刷用 CSS を導入する方法

Posted at: 2013-02-13 Label: 0

先日まで、このブログをブラウザから印刷してみると、このような情報が書き出されるようになっていました。

「クリボウの Blogger Tips」旧印刷例

それが、テンプレート内に 1 行コードを追加しただけで、こんな風になりました。

「クリボウの Blogger Tips」新印刷例

余分なヘッダやフッタ、サイドバーの情報がなくなって、記事の内容だけになりました。シンプルでとてもいい感じです。これは、印刷のときにだけ適用されるスタイルシートを利用したカスタマイズで、次の記事を参考にしています。


導入方法

Blogger の管理画面「テンプレート > HTML の編集」を開き、

<style media='print' type='text/css'> #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #lower-wrapper, #footer-wrapper, #footer, #credit, .comment-form, .post-footer, #blog-pager, .post-feeds, #backlinks-container, #navbar-section, #navbar, .footer {display: none;} #content-wrapper, #main-wrapper, #main { width: auto !important; overflow: visible !important; float: none !important; color: black; font-size: 12pt; background: white; border: none; } #main a { text-decoration: underline; color: blue; } </style>

というコードを <head> のすぐ後の行に貼り付けます。これだけ。「うちのブログごちゃごちゃしていて印刷向きじゃないんだよなぁ」という人は、ぜひ一度お試しください。


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Leave a Reply

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.