在MovableType使用列印專用CSS樣式

MovableType這套網誌工具提供了相當具有彈性的模板(template)功能,使用者可以根據自己的需要設置各種模板。在MT預設的模板當中,只提供一組CSS的樣式設計,大多使用者在視覺方面的設計與調整,也是透過修改這個CSS模板完成,不過僅有一組CSS模板的情況下,會遇到這樣的困擾︰使用者可能會想要將您在weblog當中的文章列印後閱讀,或是使用如PDA等其他不同於一般在電腦瀏覽器的使用界面下閱讀文章,如果是將網頁列印閱讀,那麼您會覺得在版面上有許多用以導覽,或與使用者線上互動的內容如近期文章、近期迴響等部份,並沒有列印出來的必要,反而似乎有些浪費紙張與墨水,您會想要在列印的時候,只要列印文章本文的部份,要使用者將內文複製後再貼到文書軟體再列印,雖然也是一種方案,但是其實可以不需要這麼麻煩。

在CSS2當中,規範了CSS的媒體定義,您可以針對不同的顯示媒體,定義不同的CSS樣式表,您可以參見CSS2規格書第七章部份,裡頭便定義了許多不同的媒體類型,不過最常使用的是screen,就是一般在瀏覽器閱讀網頁的狀況,而只將媒體定義設為print,就是供作為列印時使用的樣式表。

在movableType裡頭,請您在各個不同的網頁模板上,在<head>與</head>之間的部份,找到適合的地方,插入下面這一行︰

<link rel=”stylesheet” type=”text/css” media=”print” href=”<$MTBlogURL$>/print.css” />

然後,您可以建立一個索引模板,輸出時的檔名叫做print.css即可。在這個模板當中的內容,就是您用以列印的CSS樣式表。通常來說,您可能會想做的,是不管原本網頁背景與文字是什麼顏色,在列印時,都將文字設為白底黑字,另外您會想要將content或container放大到整個版面的寬度,將width改為100%,另外,就是旁邊的選單以及使用者發表迴響的界面不要印出來,那麼請將#menu改為display:none,在使用者迴響介面加上一個DIV,然後也設定為display:none即可。

修改之後,您只要用瀏覽器的預覽列印,便可以看到列印時會使用不同的樣式表,目前常用的瀏覽器如Internet Explorer以及Mozilla等,都支援顯示與列印時,使用不同的樣式。您也可以把這個CSS樣式表當作是一個螢幕顯示樣式使用,只要在適當的地方加上︰

<link rel=”alternate stylesheet” type=”text/css” media=”screen” href=”<$MTBlogURL$>/print.css” title=”print”/>

這樣,支援多重樣式表的瀏覽器如Mozilla、Firebird等等,就可以將您的網頁,切換成清爽的列印樣式。

Be Sociable, Share!

7 thoughts on “在MovableType使用列印專用CSS樣式

  1. 我倒是覺得為列印做一個CSS,應該是很基本的事情。如果只是這樣就要提名什麼最佳設計還什麼的,實在沒有意義,只少WordPress本身就已經內建了print.css。亮票什麼的,我覺得沒差,我跟Jedi說過了我不想參賽。

  2. 我雖然對比賽結果沒有興趣,不過我還是對提名這件事覺得很有趣。至少我認識一些之前沒有注意過的blog,或者例如讓別人知道有print style這種呈現方式(我雖然一直用mozilla,但也是很晚才注意到你提供兩個css style),至少在這方面我還覺得滿有趣。

  3. 不好意思,ping的時候發現系統出現error字樣,又多按了幾次,ping得這篇文章到處都是我的字。對不起啦,就煩請你刪之。

  4. Pingback: CAD 部落格站台

  5. Pingback: 酋長的部落格 Chieftain's BLOG

Comments are closed.