2013年4月7日

【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 - 特殊文字區塊系列文章
⇩ 分 享 本 文 ⇩ 

2 則留言:

  1. 正在研究文字底色的變換就看到你這邊延伸版了! 我喜歡那個黑板更新圖樣還有你的公仔圖 哈哈

    回覆刪除
    回覆
    1. 哈哈,純粹亂玩,本身使用率不算高(沒怎麼在更新文章的意思)XD

      刪除

【回覆須知】
✔ 請注意網路禮儀,禁止口出惡言、廣告張貼。
✔ 可用語法請參考這篇
✔ 與本文無關的留言請利用右側的「留言板」,反之請盡量留言在相關主題。
✔ OpenID留言,填入自己的網站、部落格網址即可。
✔ 圖片消失、檔案連結錯誤 / 更新,歡迎留言告知。
✔ 其他問題、想法,也歡迎留言說說....☺。