新增「特殊文字註記區塊」之 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