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

クリボウの Blogger Tips

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

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

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

Posted at: 2013-02-13 Label: 2

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

「クリボウの 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> のすぐ後の行に貼り付けます。これだけ。「うちのブログごちゃごちゃしていて印刷向きじゃないんだよなぁ」という人は、ぜひ一度お試しください。


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

Comments:2

  1. Freechip melalui Bandar Judi Capsa Yakutsk Region Capital Situs www.rusiapoker.top Melalui BPD Sumsel Babel Kode Bank 120.

    ReplyDelete

  2. ان الرائد تقدم افضل الخدمات النزلية في المدينة المنورة بارخص الاسعار يمكنك زيارة التالي للمزيد من المعلومات :
    شركة تنظيف بمكة
    شركة نقل عفش من جدة الى الاردن شركة شحن عفش من جدة الى الاردن
    شركة تنظيف منازل بالخبر

    افضل شركة تنظيف منازل بالمدينة المنورة شركة تنظيف منازل بالمدينة المنورة
    شركة مكافحة حشرات بالمدينة المنورة شركة رش حشرات بالمدينة المنورة

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.