在Blog中自訂CSS標籤

如果在寫blog的時候需要換文字的顏色
又不希望每次還要切換成撰寫模式去填顏色
或是怕每次填的顏色可能會不一樣
那就自訂一個標籤吧

在css中設定標籤的地方加入

n1 {
color: rgb(51, 204, 0);
}

之後再需要的內容使用這個標籤夾住

<n1>/// notes 1<n1>

就可以將該內容改成你希望的格式

/// notes 1


在Blog中加入表格

在blog中如果將表格從別的軟體貼過來
常常格式會亂掉
如果變成圖片再貼過來又覺得解析度不太好
這時候就直接用html來製作表格吧

在設定css的地方，以Blogger為例
自訂->版面配置->修改HTML 找到

body {
...
}

然後加入

table {
border-collapse: separate;
border: 1px solid #999999;
width: 100%;
margin: 10px 0px 10px 0px;
}

th {
border: 1px solid #999999;
background-color: #eeeeee;
text-align: center;
}

td {
border: 1px solid #999999;
}

然後新增文章裡面直接修改html，加入

<table><th>標題1</th><th>標題2</th></tr><tr><td>內容1-1</td><td>內容2-1</td></tr><tr><td>內容1-2</td><td>內容2-2</td></tr></table>
就會變成

標題1	標題2
內容1-1	內容2-1
內容1-2	內容2-2

注意，這裡不能換行，因為blogger會自動將換行符號
轉換成<br>，讓表格上方多出一堆空白

語法遵照CSS的標準

標籤	參數	說明
table	border-collapse	內框線與外框線分離
	border	框線的型態，設成細灰線
	width	寬度，設成填滿所在框架的寬度
	margin	外邊界，分別是上左下右邊界的寬度
th	border	框線的型態，設成細灰線
	background-color	填滿色彩，設成淺灰色
	text-align	文字對齊方式，置中
td	border	框線的型態，設成細灰線

在Blog中加入程式碼方塊(code block)

在網頁或是blog中加入程式碼方塊
除非一開始選的範本裡面就有定義好
否則只能自己修改範本裡的css

以Blogger為例，在自訂->版面配置->修改HTML找到

code {
...
}

把整個換成

code {
white-space: pre;
display: block;
background: #eeeeee;
padding: 5px 5px 20px 5px;
margin: 5px;
}

這樣在發表文章的時候，直接點選修改html
將想要放在程式碼方塊中的內容，用code這個標籤夾住，像是

<code>
...
</code>

發佈之後就會看到

...

裡面的用法都是css的標準用法

參數	說明
white-space	縮排方式，可參考CSS white-space 屬性
display	將標籤夾起的部分圍成一個區塊
background	設定背景顏色，淺灰色
padding	內邊界(上左下右)，預設上方會多一行，所以下方設多一點
margin	外邊界，讓區塊跟文字稍為隔開