【Blogger｜筆記】特殊文字區塊也可以很可愛

最近弄了一些變更 Blog 版面的東西，這篇想特別說說「特殊文字區塊」的變更歷程。原本這部份是不打算變動，畢竟筆者不是什麼語法達人，也不常寫 code 分享教學，但是～卻瞄到了這一篇「部落格文章＋特殊文字區塊（一）安裝與使用的完整解決方案」，頓時才驚覺好像可以搞點花樣，讓原本有點嚴肅的「特殊文字區塊」也能 relax 一下。

先看看下圖灰色的「特殊文字區塊」長老，應該算是比較常見/傳統的樣貌，經過 WFU 的巧思後變出好多種樣式（更新/重要公告/參考）。可能有人老早看過類似的變化，那您就多多包含在下的後知後覺吧！

語法怎麼弄？請看下面的語法，大致上都有說明了，如果想知道完整詳細的圖文說明，還請移步到「WFU BLOG - 特殊文字區塊系列文章」查看。筆者就直接在底下放上整塊語法給需要的人參考囉！

複製原始碼

假設要製作「內文更新」的特殊文字區塊，而呼叫的 HTML 標籤則自訂為 <update>
首先點選「範本」（記得備份範本）→「編輯 HTML」→ 勾選「展開小裝置範本」
接著把下面的程式碼插入 </head> 之前

<!-- 特殊文字區塊語法 複製開始 -->
<style type='text/css'>
update{
<!-- CSS內容 -->
display: block;           //區塊呈現
overflow: auto;           //固定區塊大小
word-wrap: break-word;    //自動斷字
margin: auto;             //區塊可置中
width: 90%;               //區塊寬度 也可使用 px 值
font-family: Courier New; //★字型
font-size: 12pt;           //字體大小
color: #990000;           //字體顏色(紅色)
border: 1px solid #ccc;   //邊框寬度、形態、顏色，型態可換成虛線樣式「dotted lavender」
padding: 65px 10px 10px 10px; //邊框與區塊內文字的像素值距離（上、右、下、左）
max-height:1200px;        //設定區塊最高的長度，當超過時會出現捲軸
line-height: 1.2em;       //行高
box-shadow: 2px 2px 2px #d6d6d6; //★設定邊框的陰影樣式、顏色(IE8無效)
background: #F00000 url(自訂圖片網址) right top no-repeat; //☆設定區塊背景色並填入自己的圖片網址
<!-- -->

}
</style>

<script type='text/javascript'>
document.createElement("update")
</script>
<!-- 特殊文字區塊 複製結束 -->

補充說明：
0.CSS 內容必須刪除雙斜線 // 及其後的註解內容
1.黑色字為自訂的 HTML 標籤名稱，請替換為自己方便記憶的標籤名稱
2.橘色字部分請依照自己的需求設定
3.★行若沒有需求可刪除不用
4.☆行說明 - 「right top no-repeat」為圖片擺在區塊的右上方，而且圖片不重複出現。「left top repeat-y」則表示圖片擺在區塊的左上方，而且需要時圖片會在 y 軸重複顯示。【background-repeat】 屬性是用來指定背景圖片是否重複。預設值是「repeat」，表示圖片將在 x 軸和 y 軸重覆顯示，除了上面提到的三種外，還有「repeat-x」表示圖片在 x 軸重複顯示。
5.完成後就能在編輯文章時，於想要放置內文更新的地方插入「<update>更新的內容</update>」來呼叫該標籤功能
6.使用特殊文字區塊時若需要將特殊符號轉碼，請到「HtmlEscape.net」將部分特殊符號（ex:<or>）重新編碼過，如此才能正常顯示


接下來繼續分享個人在處理圖片時略微耗時又艱辛的製作過程。
勉強來說這裡大概還需要用到「更新/參考」這兩種樣式。先從網路上 Google 搜尋關鍵字為「Update」的圖片，看到了辛普森跟黑板！

圖片來源：JACOB MORGAN

於是筆者靈機一動～妙鼠一滑（原：妙筆一揮）～龜速的開啟繪圖軟體，先簡單畫了黑板跟板擦（圓角矩型難度不高），跟著弄上一中一英的「更新」文字方塊，擺上自己的ㄤ仔頭...，然後難題來了！我既不是語法達人同時也不是美工高手，那身體怎麼辦呢？只好再次請示 Google 大神～找來了下圖這個身體（楓之谷的海豹）。

最後合體變成下圖 XD，成了詭異阿飄了啦～哈哈！像阿飄倒也還好，不過不怎麼搭。

就算筆者沒有美工天份，但怎麼也不能隨便妥協（五月天的「倔強」：我～如果對自己妥協～如果對自己說謊，即使別人原諒，我也不能原諒～）。一定得找一個正常的身體才行，正當苦惱之際，筆者先是想到了「花爸」 - 短短的軀體應該很搭。可是話說回來，很多卡通人物的軀體都很短吧？又何必拘泥於「花爸」呢！千挑萬選終於找到了「蠟筆小新」。

圖片來源：ifublog

拿掉「海豹體」換上「小新體」的圖（如下），是不是順眼多了？而且手的位置也剛剛好！真是太棒了！

完成了圖片後，開始想像把語法擺到範本文件後應該呈現的樣子，但天不從人願，很快便在設定區塊底色處又碰到難題，若設成透明背景，那麼整個圖片也將消失；而有色的背景要搭配整個樣板色調，又很容易顯得格格不入。

就在為難之時又突然乍現 Good idea，特殊文字區塊的語法能夠設定底色及外框顏色，何不乾脆將其設定成黑板？Yes！於是趕緊把黑板的圖層拿掉，最後就衍生出如下所示近乎完美的「更新文字區塊」囉！


2013/04/07

很揪咪的吧？很揪咪的吧？很揪咪的吧？很揪咪的吧？很揪咪的吧？

對筆者而言，真的很揪咪又很完美！（標準也不高就是）

PS.文字越多框架也會拉長，只好把板擦拿在手上（誰跟你注意這個）。


WFU BLOG - 特殊文字區塊系列文章