| 讓網誌文章列印時擁有獨特樣式!! |
 很多時候，讀者經常會把一些文章內容給列印下來，不管當作參考資料或給朋友看，這時候~如果自訂一個給列印時的樣式版本，那列印的人除了驚喜外，還更加深對您網誌的印象呢!! 而且，還能加上只有在列印才會出現的文字喔!!(如圖所示)甚至將 sidemenu,comments等都隱藏不被列印出來....快快自訂一個列印專用的獨特樣式吧! 首先，這邏輯與自訂引用或照片排列時的樣式一樣，先行新增一個自訂專用的樣式表，在這個樣式表中在加入列印專門的樣式，可以參照先前的文章-新增一個常用的樣式給網誌...!! 建議是直接在此份樣式表文件中再加入，如此一來就不需要在另外做連結樣式表的動作... For MovableType and nicetypo or more... 以這裡為例，新增的樣式語法為: /* ----------------------------------- For Print Style -----------------------------------*/ p.forPrinted {display:none} @media print { p.forPrinted { display:block; font:9pt/140% verdana; letter-spacing:2px; border:1px solid #999999; padding:9pt; margin:9pt 4px; width:100%; } #siderMenu, #comments,#commentEditor, #toolsbar,#copyright,#navlinktop,#navlinkbottom {display:none} } 接下來我們在文章編輯的下方接著，寫下只有列印時才要出現的文字訊息: <p class="forPrinted"> 如果你對本文有興趣，請連上我的網站：Royboy weblog... 網址：http://roy.nicetypo.com 如果你對本文有任何評論，別忘了來『康面』喔^^b </p> 接下來說明一下: 新增的列印樣式中，第一行 p.forPrinted{display:none} 指的是讓 p.forPrinted 標籤內的文字 display:none ，也就是不顯示於網頁上!! 接著 @media print 內的 p.forPrinted 則是唯有被列印時要顯示的樣式.. 另外~##siderMenu, #comments 等ID...也可以看到是 display:none，也是說...列印時，將這些 ID 下的內容統統隱藏不顯示.. 另在 MovableType 中,旁邊預設的Sidemenu ID 是 #Links，可選擇要隱藏那些區塊在加入該區塊的 Div ID !! 其他系統皆同此邏輯即可!! p.forPrinted 是可自訂的，但 @media print 是不可以自訂的!! |
| 謝謝ROYBOY,真的很多教學文呢!辛苦了,把你po的東西慢慢偷學起來....^0^ |
| http://www.wretch.cc/blog/b198717 birgit ,2006/10/18 17:27:14 |
| 獲益良多~不過我想請教依各困擾我很久的問題~用CSS如何控制藺印出來紙張的邊界~ 因為要套表的話~有些是無邊界的~印出來會跑位~懇請賜教~謝謝囉~^______^* |
| ay ,2006/02/25 23:53:12 |
| 對嘛! 這才是我們所知道的 Cassidy 精神!! b^_^d |
| http://roy.nicetypo.com Royboy ,2004/02/24 12:07:44 |
| 哈哈，不好意思，竟然是因為我太無聊的快速留言聞名 因為最近三天兩頭請假 吃藥又頭昏昏就沒有給大家留言 可是我每個人的每篇文章都有很仔細看喔！！ |
| http://cassidy.nicetypo.com Cassidy ,2004/02/24 11:24:01 |
| 嗯! 夠激烈, 也夠捧場喔! Melon, 說教學是還稱不上啦.... 就只是單純分享一下我知道的而已說... |
| http://roy.nicetypo.com Royboy ,2004/02/24 10:15:19 |
| 我會印哦！尤其是roy介紹blog的教學，我就粉想印下來好好研究哩！（長期看螢幕真的很傷眼睛，我都把遺傳的遠視看成近視了說！）可惜我們在德國沒有印表機，等八月後回台灣，厚，我印完再寄去給你簽名，你說怎樣？共鳴的有激烈吧？ |
| http://www.upsaid.com/melonsu Melon ,2004/02/24 04:07:05 |
| Dear Cassidy, 首先能在看到妳恢復往日雌風,真是萬分高興!! 自從妳生病後,我在也沒遇到超高效率 Comment 的人了! ^++++++^ 害的我們還挺期待的....每天都問呢! (ㄚCassidy 是出現了沒!!) 還有喔!! 真是感謝誇獎 vivi 啦!... 代 vivi 道聲 感恩啦! 我告訴她: 有ㄚ姨說妳真的好可愛ㄝ!! 害她又面向牆角...歹勢啦!! |
| http://roy.nicetypo.com Royboy ,2004/02/24 03:12:08 |
| Dear ㄚ民, 聽你這麼一說,安慰多了! 嗯! 說的是!! ^_^b 那就當....提供給有共鳴到列印程度的厲害人士吧! ^+++++^ |
| http://roy.nicetypo.com Royboy ,2004/02/24 03:03:12 |
| 是阿！有時候只想說一句VIVI好可愛而已 又覺得好膚淺還是好普通喔:p |
| Cassidy ,2004/02/23 21:22:30 |
| Cassid結婚有文章的啊? 我沒結過我不知道..難道內容是..終於跟另依半愛情長跑幾年後..決定共組家庭....ooxx之類的嗎? Roy別說沒人要印你的文章這麼悲情啦 Blog本來就是有點類似私人的網誌... 很多時候都是看但插不上嘴的機會多...能遇到好文章貨生活體驗能產生共鳴要到列印的程度... 我想不多吧^^b |
| http://leonli.typepad.com 阿民 ,2004/02/23 21:18:41 |
| 哈...僅供有需要的人啦!! 我想我這兒的東西應該也沒人會想印下來吧..^_^|| |
| http://roy.nicetypo.com Royboy ,2004/02/23 15:47:16 |
| 很難想像有人要印我的文章ㄟ 不過我妹曾經把我結婚的文章印給我媽看 那就馬馬虎虎了啦 |
| http://cassidy.nicetypo.com Cassidy ,2004/02/23 15:37:25 |
