March 30, 2007

新增「特殊文字註記區塊」之 CSS code

先前在寫文章的時候,往往在最後喜歡加上一些「相關閱讀」或是「教學文章」的連結,希望對文章主題有興趣的朋友能有更多參考資料。為了讓這些文字與本文有所區隔,我都會塗上一些顯眼的顏色作為記號。

如果你跟我一樣,常常希望文章中的某些文字能夠凸顯出來,與其他文字做出區隔,或許你也會對這個 CSS code 感到興趣。

感謝 Benjamin 與 Kaie 的教學與分享(依英文字母排序 XD),讓我們開始吧。

1. 登入 Blogger 後選擇 Edit Template(不需展開 widget)

2. 找到下列 code
]]></b:skin>
3. 在其「上方」加入以下 CSS code 進行基礎設定
/* 方框樣式設定 Begin
----------------------------------------------- */
code {
 display: block;
 overflow: hidden;
 background: #000000 url(http://圖標連結位置) left top repeat-y;
 margin: 5px 5px 5px 5px;
 border: 1px solid $bordercolor;
 padding: 5px 5px 5px 5px;
 max-height: none;
 font: $bodyfont;
 font-size: 12px;
 color: $textcolor;
 line-height: 1.5em;
}

/* 方框樣式設定 End
----------------------------------------------- */
如果不需要圖標的話,就將 background: #000000 後面的 url(http://圖標連結位置) left top repeat-y 移除即可,注意最後要有 ; 結尾喔!
各項數值請依您 blog 版型進行調整,才會有較美觀、較適合的呈現喔。

4. 接著進行各區塊的個別設定(以 block 為例),請在「方框樣式設定 End」上一行,加入以下之 CSS code
code.block {
 overflow: hidden;
 border: 1px solid #8a0505;
 color: #ffffff;
}
此處僅需針對個別區塊與基礎設定不同處進行設定即可,如果希望 blog 區塊中的文字顏色與本文相同,則可將 color: #ffffff; 刪除(因基礎設定文字顏色即為本文 text 的顏色)。個別區塊與基礎設定相同者,便不需在此進行設定。

5. 若有需要,可以同樣方法繼續設定其他區塊,只需將 code.block 後方之 block 改名即可。例如可再增加 code.info 或是 code.note 等等。

6. 文字註記區塊的格式設定完成, save template。

7. 為了方便起見,請至 Settings > Formatting 最下方的 Post Template,輸入以下 code 然後 save settings
<code class ="block">文字註記</code>
<code class ="info">文字註記</code>
以後只需將欲凸顯的文字置於 <code> 與 </code> 之間即可,用不到的其他區塊要記得刪掉喔。


教學文章
CSS Style @ OECSPACE(CSS 語法介紹)
讓你的文章有個方便註記的格式吧! @ Ben's 部落不及格
讓你的文章有個方便註記的格式吧!趴兔 @ Ben's 部落不及格
[CSS] A Cool blockquote for "Code style" and some blogging tips @ Kaie's Blog

1 comment: