<p class="thumb"><img src="http://web-marketing.zako.org/wp-content/uploads/2009/05/printfriendly.jpg" alt="印刷用ページをクールにその場表示する「Print Friendly」" title="印刷用ページをクールにその場表示する「printfriendly」" width="514" height="204" class="alignnone size-full wp-image-5432" /></p><p>印刷用ページをCSSで制御するのも良いのですが、個人的にはLightboxのように、その場に開いても良いのではないかと感じます。</p><p>今回は、設置が簡単な上に見た目もクールな印刷ボタンをご紹介。ただし印刷は問題ないものの、PDF生成ボタンからは日本語が文字化けします。これは残念。</p><!--more--><h3 class="header-label">印刷用ページをクールにその場表示する「Print Friendly」</h3><p>「<a class="web-site-link" href="http://www.printfriendly.com/" onclick="window.open('http://www.printfriendly.com/'); return false;">printfriendly</a>」は、<strong>ブログやサイトの印刷用ページをLightbox調にその場ポップアップさせてくれる</strong>サービス。</p><p>ポップアップ画面には印刷ボタンを備え、画像を表示しない設定もできるので非常に便利です。</p><p><strong>※PDFボタンからPDFを生成すると日本語が文字化けします。</strong></p><h4 class="header-label">早速使ってみました</h4><p><a href="http://lh5.ggpht.com/_fRSz8mJZTZY/SgZoMUg11MI/AAAAAAAAXHg/zqvtZa-WNH4/s800/printfriendly1.jpg"><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SgZoMUg11MI/AAAAAAAAXHg/zqvtZa-WNH4/s400/printfriendly1.jpg" /></a></p><p>↑このようにその場に印刷用ページを表示。左上に印刷用ボタンがあります。<strong>不要な部分をマウスオーバー＆クリックで削除できる</strong>のも便利。</p><h4 class="header-label">画像を消すのもカンタン</h4><p><a href="http://lh3.ggpht.com/_fRSz8mJZTZY/SgZoM7oFX5I/AAAAAAAAXHk/XrifjkYH6Mk/s800/printfriendly2.jpg"><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SgZoM7oFX5I/AAAAAAAAXHk/XrifjkYH6Mk/s400/printfriendly2.jpg" /></a></p><p>↑右上にある 「remove images」にチェックを入れると画像がすべてなくなります。これもボタンを設置するだけでできるのがうれしい。</p><h4 class="header-label">サンプル印刷ボタン</h4><p><script src="http://www.printfriendly.com/javascripts/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="printfriendly" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img style="border:none;" src="http://www.printfriendly.com/images/printfriendly.gif" alt="Print"/></a></p><p>↑試しにボタンを押して、このページの印刷用ページをご覧ください。</p><h4 class="header-label">ボタン設置の手順</h4><p><a href="http://lh5.ggpht.com/_fRSz8mJZTZY/SgZpcH0iP9I/AAAAAAAAXIA/TEBlDDVmQMY/s800/printfriendly3.jpg"><img src="http://lh5.ggpht.com/_fRSz8mJZTZY/SgZpcH0iP9I/AAAAAAAAXIA/TEBlDDVmQMY/s400/printfriendly3.jpg" /></a></p><p>↑登録なども不要で、<a class="web-site-link" href="http://www.printfriendly.com/button" onclick="window.open('http://www.printfriendly.com/button'); return false;">Get the PrintFriendly Widget</a>のページで生成されるコードを貼り付けるだけ。ボタンも選べます。</p><h4 class="header-label">Wordpressプラグインの場合</h4><p><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SgZrFDcIzHI/AAAAAAAAXIE/Pj9VhOO_dpM/s800/printfriendly4.jpg" /></p><p>↑Wordpressプラグインでは、記事の最後（関連記事の直前あたり）にボタンが表示されるようになります。それ以外の部分に表示させたいときは、プラグインではなく、サイト用のコードを表示させたい場所に貼ることをおすすめします。<a class="web-site-link" href="http://wordpress.org/extend/plugins/printfriendly/" onclick="window.open('http://wordpress.org/extend/plugins/printfriendly/'); return false;">WordPressプラグインはこちら。</a></p><h4 class="header-label">どこでも使えるブックマークレット</h4><p><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SgZr69g50UI/AAAAAAAAXII/4fxlyvlvL1Q/s400/printfriendly5.jpg" /></p><p>↑<a class="web-site-link" href="http://www.printfriendly.com/" onclick="window.open('http://www.printfriendly.com/'); return false;">printfriendly</a>のページを開き、画像にある「Print Friendly」ボタンをブックマークバーに追加すれば、どんなサイトでも利用することができます。</p><h4 class="header-label">印刷してみました</h4><div style="width:477px;text-align:left" id="__ss_1411926"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/sigeos15/about-blank?type=document" title="About Blank">About Blank</a><object style="margin:0px" width="477" height="510"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayerd.swf?doc=aboutblank-090510011759-phpapp01&stripped_title=about-blank" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayerd.swf?doc=aboutblank-090510011759-phpapp01&stripped_title=about-blank" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="477" height="510"></embed></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">documents</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/sigeos15">Web Marketing</a>.</div></div><p>↑メニュー上からPDF化すると日本語が文字化けしてしまうので印刷からPDF化してみました。</p><p>興味のある方は<a class="web-site-link" href="http://www.printfriendly.com/" onclick="window.open('http://www.printfriendly.com/'); return false;">printfriendly</a>へどうぞ。</p><p>なんとかPDF生成が文字化けしないようにして欲しいところ。設置がカンタンで便利なだけに非常に惜しいです。</p><h4 class="header-label">デモ動画</h4><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/SOYKL7KYeSQ" height="326" width="522"><param name="movie" value="http://www.youtube.com/v/SOYKL7KYeSQ"/><param name="wmode" value="transparent"/></object><p>Via：<a class="website-link" href="http://delicious.com/url/8165f589d1d2e4cdb784668f4d633659" onclick="window.open('http://delicious.com/url/8165f589d1d2e4cdb784668f4d633659'); return false;">delicious</a></p>