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

一般呼叫特殊區塊的方式都是使用class，例如

，但我不喜歡這種方式，因為要打太多字了。

我比較喜歡用HTML 標籤的方式 ... 服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2012年8月20日 [教學]讓網頁使用各種特殊文字區塊__(1)安裝與使用(CSS技巧) WayneFu 電腦-網頁設計-CSS,電腦-Blogger-Blogger相關 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} (Picfrom:youtoart.com)在我的「Blogger文章相關工具及技巧(筆記)」→「美化文章內容」區塊記錄了一些"標示特殊文字區塊"的文章，例如標示"程式碼"、"重點筆記"、"引文"區塊等，由於本部落格目前主要是提供Blogger的相關工具及技巧，所以使用最多的是"標示程式碼區塊"。

其實各種不同的標示區塊原理相同，而一路使用下來也遇過不少問題，因此本篇來分享自己的心得與解決方案。

一、標示特定文字區塊的原理 要讓特定的文字區塊，與文章其他區塊的文字有所區別，主要的方法便是設定這個區塊的CSS，讓該區塊的版面配置不同，在視覺上造成區隔性。

通常該區塊會設定的CSS主要項目如下： display:block;/*不必變動*/ overflow:auto;/*不必變動*/ font-family:CourierNew;/*字型*/ font-size:8pt;/*字體大小*/ background:#f0f0f0url(http://lh3.ggpht.com/-kDF-vz6AC4U/Tj_0OOSr5FI/AAAAAAAABpM/1v9lkGI-pZo/s1600/code.gif)lefttoprepeat-y;/*#f0f0f0可改為自訂區塊底色；url的括號裡面可改為自訂的圖片，而這個code.gif是張寬11px高1200px的圖片，只要自製一個長條圖案，此行的參數會讓這個長條圖案，貼在區塊最左側，由上往下重複顯示。

*/ border:1pxsolid#ccc;/*邊框的寬度、形態、顏色*/ padding:10px10px10px21px;/*區塊文字分別距離邊框上、右、下、左的像素值*/ max-height:1200px;/*設定區塊最高的長度，當超過時會出現捲軸。

*/ line-height:1.2em;/*行高*/ 每一行的說明請看"//"後面的敘述。

除了以上的項目之外，也可自行增減CSS項目，發揮自己的創意讓區塊更有特色。

二、簡易的使用方式 一般呼叫特殊區塊的方式都是使用class，例如顯示的文字，但我不喜歡這種方式，因為要打太多字了。

我比較喜歡用HTML標籤的方式呼叫，例如「在文章裡顯示優質的程式碼區」這篇的方式，要呼叫程式碼區塊只要打程式碼，是不是少打了很多字啊？ 問題是標籤只有一個，且主要是拿來顯示程式碼的，如果我有別的特殊區塊，例如「"公告"區塊(位於文章開頭)」、「"修訂"區塊(請參考7.30增補及文末的增補)」、「"參考資料"區塊(請參考文末)」、「"系列文"區塊(請參考文末)」等，不就沒標籤可以使用了？ 還好這個問題在「部落格文字加上各種底線圖案的完整解決方案」已經獲得解決，請參考該文的「二、改進呼叫方式」→「四、安裝方式」→「五、呼叫底線圖案方式」可製作出各式自訂HTML標籤。

若不懂這篇文章的原理，直接按以下步驟可達到跨瀏覽器支援、呼叫自訂標籤來顯示「特殊文字區塊」的目的── 1.假設要製作一塊「公告」的區域，呼叫的HTML標籤簡單命名為。

2.到Blogger後台打開範本文件→修改HTML。

接著把下面的程式碼插入的前面： 若想增加其他的自訂HTML標籤，依樣畫葫蘆增加以上的內容，置換兩個藍字po為自訂HTML標籤即可。

3.存檔後，呼叫的方法為在文章內插入以下── 公告的內容 這樣就能用很簡便的呼叫方法，讓公告內容醒目、與其他文字有所區隔。

雖然前置作業需要稍費功夫，不過以後呼叫的方式輕鬆又好記多了。

三、區塊文字斷行問題 中文不會有斷行的問題，但英文只要CSS設定有問題，當字串過長，便會出現無法斷行的問題。

常見情形有以下兩種： 1.超出邊界 2.出現捲軸 以上兩種情況不限定出現於哪個瀏覽器，而要避免以上兩種狀況，來達到跨瀏覽器相容，必須檢查CSS中是否有以下三項： display:block;//以區塊呈現 overflow:auto;//固定區塊大小 word-wrap:break-word;//自動斷字 說明請看"//"後面的敘述。

確定以上三項都有了之後，英文長字串就能自動斷行，如下圖所示── 四、Blogger系統問題 如果非Blogger的部落格平台，到第三大點結束應該就已經解決所有問題，而Blogger平台的問題還很大，請繼續往下看。

在編輯文章時，經常於「HTML」模式與「撰寫」模式切換的使用者一定很困惑，Blogger是否聰明過了頭，經常自作聰明幫我們"多空幾行"、或是自動轉換、增補程式碼。

本文的特殊文字區塊，若是添加了其他標籤也有可能遭到同樣對待，舉例來說，我常常使用的程式碼區塊，在「HTML」模式下是這個樣子── 如上圖，我準備利用標籤來顯示程式碼區塊，共有三行程式碼，並使用

標籤來編號。

結果切換到「撰寫」模式來預覽一下畫面，再切回「HTML」模式竟成了這付模樣── 以上的字串對於熟悉HTML碼的讀者來說，應該非常無言吧？簡直一團亂，這讓我當初對「撰寫」模式有非常大的恐懼症。

而且對於Blogger，我幾乎找不到他如何轉換文字、程式碼的完整規則，這個問題該怎麼解決呢？ 順待一提，如果想在程式碼區塊"顯示程式碼"，一些特殊符號、&等等得先編碼過，否則這些程式碼就會被"執行"，而不是被"顯示"了。

我推薦的編碼網站是「HtmlEscape.net」，此網站比其他HTML編碼工具強的地方在於，提供了一些編碼的選項，讓我們決定某些字元是否編碼。

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

而HTML轉換為Javascript在網路上可以google到不少工具，我常用的是「這個網頁」，舉例來說，把剛剛的程式碼貼到這個網站── 按下「開始編碼」後── 瞬間就完成轉換，把全部內容複製到文章內即可，這些javascript絕不會被Blogger再動手腳，我們的特殊文字區塊也終於可以正常呈現。

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

本篇的解決方案動作其實不少，不過如果想讓自己的部落格跟別人不一樣，花點心思及程序，成果會讓人滿意的。

有了本篇的基礎知識，下篇將示範一些實作範例：「讓網頁使用各種特殊文字區塊__公告+修訂區塊」 CSS技巧相關文章： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-網頁設計-CSS 電腦-Blogger-Blogger相關 WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 4則留言: 髮客2014年8月28日中午12:23感謝wfu大分享，想請問一下，第一步內得圖片可以放上面橫幅嗎？該如何修改呢？又或者可以有左邊直得跟上面恆得並存？謝謝你回覆刪除回覆回覆WayneFu2014年8月28日晚上7:30<6432446512672658863>(以上內容請勿刪除,從括號之後開始留言)圖片怎麼放都行，主要就是根據你的圖片大小，來調整padding值，你可以注意到這篇的padding距離左邊21px，就是因為這張底圖佔用了左邊的空間，所以左邊的padding要設比較多，你動手設定一次padding就能舉一反三了～回覆刪除回覆回覆匿名2015年1月25日下午3:39我有個疑問想請教，那就是我用po的指令來做文字底色之後要怎樣修改才不會看到左邊出現直行的code字樣?我想要單純的一個底色框包住我想顯示的文字這樣就好這樣可以達成嗎?@@回覆刪除回覆回覆WayneFu2015年1月25日晚上9:27<4140833568596756330>(以上內容請勿刪除,從括號之後開始留言)沒問題呀！把background那一整行刪除，然後修改padding左邊的距離就好了~回覆刪除回覆回覆新增留言載入更多… 張貼留言注意事項： ◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (18) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (6) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (6) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (6) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (8) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (7) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP