2012年8月20日

[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)

A+

(Pic from: youtoart.com)
在我的「Blogger 文章相關工具及技巧(筆記)」 → 「美化文章內容」區塊記錄了一些 "標示特殊文字區塊" 的文章,例如標示 "程式碼"、"重點筆記"、"引文" 區塊等,由於本部落格目前主要是提供 Blogger 的相關工具及技巧,所以使用最多的是 "標示程式碼區塊"。其實各種不同的標示區塊原理相同,而一路使用下來也遇過不少問題,因此本篇來分享自己的心得與解決方案。


一、標示特定文字區塊的原理

要讓特定的文字區塊,與文章其他區塊的文字有所區別,主要的方法便是設定這個區塊的 CSS,讓該區塊的版面配置不同,在視覺上造成區隔性。通常該區塊會設定的 CSS 主要項目如下:

display: block; /*不必變動*/
overflow: auto; /*不必變動*/
font-family: Courier New; /*字型*/
font-size: 8pt; /*字體大小*/
background: #f0f0f0 url(http://lh3.ggpht.com/-kDF-vz6AC4U/Tj_0OOSr5FI/AAAAAAAABpM/1v9lkGI-pZo/s1600/code.gif) left top repeat-y; /*#f0f0f0 可改為自訂區塊底色;url的括號裡面可改為自訂的圖片,而這個 code.gif 是張寬 11px 高 1200px 的圖片,只要自製一個長條圖案,此行的參數會讓這個長條圖案,貼在區塊最左側,由上往下重複顯示。*/
border: 1px solid #ccc; /*邊框的寬度、形態、顏色*/
padding: 10px 10px 10px 21px; /*區塊文字分別距離邊框上、右、下、左的像素值*/
max-height:1200px; /*設定區塊最高的長度,當超過時會出現捲軸。*/
line-height: 1.2em; /*行高*/

每一行的說明請看 "//" 後面的敘述。除了以上的項目之外,也可自行增減 CSS 項目,發揮自己的創意讓區塊更有特色。



二、簡易的使用方式

一般呼叫特殊區塊的方式都是使用 class,例如 <div class="code">顯示的文字</div>,但我不喜歡這種方式,因為要打太多字了。我比較喜歡用 HTML 標籤的方式呼叫,例如「在文章裡顯示優質的程式碼區」這篇的方式,要呼叫程式碼區塊只要打 <code>程式碼</code>,是不是少打了很多字啊?

問題是 <code> 標籤只有一個,且主要是拿來顯示程式碼的,如果我有別的特殊區塊,例如「"公告" 區塊(位於文章開頭)」、「"修訂" 區塊(請參考7.30 增補及文末的增補)」、「"參考資料" 區塊(請參考文末)」、「"系列文" 區塊(請參考文末)」等,不就沒標籤可以使用了?

還好這個問題在「部落格文字加上各種底線圖案的完整解決方案」 已經獲得解決,請參考該文的「二、改進呼叫方式」→「四、安裝方式」→「五、呼叫底線圖案方式」可製作出各式自訂 HTML 標籤。

若不懂這篇文章的原理,直接按以下步驟可達到跨瀏覽器支援、呼叫自訂標籤來顯示「特殊文字區塊」的目的──

1. 假設要製作一塊「公告」的區域,呼叫的 HTML 標籤簡單命名為 <po>。

2. 到 Blogger 後台打開範本文件 → 修改 HTML。接著把下面的程式碼插入 </head> 的前面:

<style type='text/css'>
po {
  填入自訂的 CSS 內容,可把「一、標示特定文字區塊的原理」的 CSS 內容套用過來,圖片改一下、參數改一下即可。
}
</style>

<script type='text/javascript'>
document.createElement("po")
</script>

若想增加其他的自訂 HTML 標籤,依樣畫葫蘆增加以上的內容,置換兩個藍字 po 為自訂 HTML 標籤即可。

3. 存檔後,呼叫的方法為在文章內插入以下──

<po>公告的內容</po>
這樣就能用很簡便的呼叫方法,讓公告內容醒目與其他文字有所區隔。雖然前置作業需要稍費功夫,不過以後呼叫的方式輕鬆又好記多了。


三、區塊文字斷行問題

中文不會有斷行的問題,但英文只要 CSS 設定有問題,當字串過長,便會出現無法斷行的問題。常見情形有以下兩種:

1. 超出邊界



2. 出現捲軸



以上兩種情況不限定出現於哪個瀏覽器,而要避免以上兩種狀況,來達到跨瀏覽器相容,必須檢查 CSS 中是否有以下三項:

display: block; //以區塊呈現
overflow: auto; //固定區塊大小
word-wrap: break-word; //自動斷字

說明請看 "//" 後面的敘述。確定以上三項都有了之後,英文長字串就能自動斷行,如下圖所示──




四、Blogger 系統問題

如果非 Blogger 的部落格平台,到第三大點結束應該就已經解決所有問題,而 Blogger 平台的問題還很大,請繼續往下看。

在編輯文章時,經常於「HTML」模式與「撰寫」模式切換的使用者一定很困惑,Blogger 是否聰明過了頭,經常自作聰明幫我們 "多空幾行"、或是自動轉換、增補程式碼。本文的特殊文字區塊,若是添加了其他標籤也有可能遭到同樣對待,舉例來說,我常常使用的程式碼區塊,在「HTML」模式下是這個樣子──



如上圖,我準備利用 <code> 標籤來顯示程式碼區塊,共有三行程式碼,並使用 <ol> 標籤來編號。結果切換到「撰寫」模式來預覽一下畫面,再切回「HTML」模式竟成了這付模樣──



以上的字串對於熟悉 HTML 碼的讀者來說,應該非常無言吧?簡直一團亂,這讓我當初對「撰寫」模式有非常大的恐懼症。而且對於 Blogger,我幾乎找不到他如何轉換文字、程式碼的完整規則,這個問題該怎麼解決呢?

順待一提,如果想在程式碼區塊 "顯示程式碼",一些特殊符號 <>& 等等得先編碼過,否則這些程式碼就會被 "執行",而不是被 "顯示" 了。我推薦的編碼網站是「HtmlEscape.net」,此網站比其他 HTML 編碼工具強的地方在於,提供了一些編碼的選項,讓我們決定某些字元是否編碼。


五、再次轉碼──HTML 轉換為 Javascript

由於 Blogger 會自作聰明對 HTML 進行轉碼,為了不讓 Blogger 轉碼,我想到的方法是,把 HTML 轉換為 Javascript,讓 Blogger 沒機會下手。

而 HTML 轉換為 Javascript 在網路上可以 google 到不少工具,我常用的是「這個網頁」,舉例來說,把剛剛的程式碼貼到這個網站──



按下「開始編碼」後──



瞬間就完成轉換,把全部內容複製到文章內即可,這些 javascript 絕不會被 Blogger 再動手腳,我們的特殊文字區塊也終於可以正常呈現。

這個線上工具或許不是最佳選擇,因為字元數會膨脹很多,但我圖的是操作方便,且字元數不多;若使用其他工具,操作步驟會比較多一些。

本篇的解決方案動作其實不少,不過如果想讓自己的部落格跟別人不一樣,花點心思及程序,成果會讓人滿意的。有了本篇的基礎知識,下篇將示範一些實作範例:「讓網頁使用各種特殊文字區塊__公告+修訂區塊


CSS 技巧相關文章:

4 則留言:

  1. 感謝wfu大分享,想請問一下,第一步內得圖片可以放上面橫幅嗎?該如何修改呢?又或者可以有左邊直得跟上面恆得並存?謝謝你

    回覆刪除
  2. <6432446512672658863>(以上內容請勿刪除,從括號之後開始留言)圖片怎麼放都行,主要就是根據你的圖片大小,來調整 padding 值,你可以注意到這篇的 padding 距離左邊 21px,就是因為這張底圖佔用了左邊的空間,所以左邊的 padding 要設比較多,你動手設定一次 padding 就能舉一反三了~

    回覆刪除
  3. 我有個疑問想請教,那就是我用po的指令來做文字底色之後要怎樣修改才不會看到左邊出現直行的code字樣? 我想要單純的一個底色框包住我想顯示的文字這樣就好這樣可以達成嗎?@@

    回覆刪除
  4. <4140833568596756330>(以上內容請勿刪除,從括號之後開始留言)沒問題呀!把background那一整行刪除,然後修改padding左邊的距離就好了~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。