【工具箱】自己平時在 blogger 更新文章的方式
》附小工具下載位置（Google 雲端 / 內容為前端網頁 JQuery + CSS）
》活用 CSS 讓你的 blogger 生活更輕鬆 XD
剛搬來 blogger 時滿困擾的一個問題，相信中文寫手時常會遇到，就是 blogger 吃「全形空格」之行徑，對於段落前空兩格的強迫症來說實在相當困擾，尤其修改文章的時候。
（20.05.18 追記：新版的編輯器不會吃空兩格）
由於是從個人 web 網站轉來，最開始解決的方式是直接寫行內式，不過，每次都要寫行內式很麻煩，所以前幾年做了一次調整，去年活用 JQuery 後果斷做了一個這樣的小工具：
（圖 1）小工具介面
主要功能有畫面中下方所看到的 7 個：
中間分了台式和中式標點是因為習慣貼 LFT 會轉成簡體字 + 中國正規標點，算是一種入境隨俗吧。一方面也是因為中國官方字體雅黑比較適合呈現簡體字（台灣用的是正黑體）
STEP-1 Blogger 範本設定
事前準備 PART 1，為了讓＜P＞標籤順利空兩格，我們必須事先設定一些 CSS（文章樣式）。
由於自己比較龜毛，所以設定滿多東西的……不過這邊就不一一介紹，只針對＜P＞標籤空兩格的設定做介紹。
＜P＞標籤一般用於文章段落，一來如果不小心缺失（不小心刪掉頭＜P＞、尾＜/P＞）不太會造成網頁跑版；二來 blogger 整個網誌框架結構上沒有使用這個標籤，設定樣式時比較方便。
（圖 2-1）＜P＞標籤預設段落間距
（圖 2-2）想要段落間距小一點自己另外做的設定
一、修改範本內的 CSS
進入後台管理後，點選「範本」＞「編輯 XML」
（圖 3-1）編輯路徑
（圖 3-2）語法中放 CSS 的地方，找個空位把下面那段 CSS 放進去就可了。如果不知道要放哪裡，可以搜尋「.post-body（文章區塊的 CSS）」，在他附近騰一個空位出來放
二、放進去之後儲存，沒有錯誤就 OK 了。
請安心嘗試～如果不小心貼錯，blogger 會不讓你存檔。
STEP-2 Blogger 文章設定
再來，簡單設定 blogger 的文章介面：
請使用 HTML 模式貼文章 / 再次編輯文章
（圖 4）切換模式
STEP-3 小工具功能介紹
以上都設定完了，就可以來使用小工具了~
► 小工具下載位置（點此／23.04.08 更新連結）
由於小工具只是個網頁，所以將它解壓縮後，打開名為「index」的網頁檔就可以開始使用了，可以參考（圖 1）的介面。
下載回去的網頁沒有後面背景圖片是正常的，想說這樣檔案比較小。
（圖 5）將文章貼入小工具內
一、如果要計算字數，請在文章貼進來第一時間算
因為後面加入的＜P＞標籤、全形空白都會算在字數內 XD 先算可以避免灌水。
（圖 6）計算字數，計算出來的字數會顯示在旁邊
二、總之先加入＜P＞標籤
（圖 7）「＜P＞標籤加入」，把每一段文字都用＜P＞標籤包起來
加入＜P＞標籤之後，把文字反貼回去 blogger 文章編輯介面（請注意是「HTML」模式）按儲存或者發佈就完成了。
（圖 8）不需要開頭空兩格 + 段落間距的雜談、Free Talk 等文章，可使用本功能 + ＜BR＞
（20.05.18 追記：給不喜歡文章有廢結構的 HTML 編輯模式愛好者）
三、離開 blogger 去其他地方
（圖 9-1）空行 + 空兩格，轉成台式標點
（圖 9-2）空行 + 空兩格，轉成中式標點
四、離開 blogger 去其他地方 PART 2
（圖 10）去除格式，還原成純文本，方便給 ID 使用
（圖 11）轉換成日式排版，方便給 ID 使用
（小工具 JS 內容有參考網路文章）
以上就是全部的內容~
雖然看起來有些複雜，但其實 STEP-1 / 2 都是一次工，之後就只需要使用 STEP-3 小工具就可以了。
平均更文都花不到 5 分鐘，修錯字也沒什麼問題，不需要重新調版面，如果有點時間可以試試，整段照著做完其實也只需要十分鐘左右 XD
》活用 CSS 讓你的 blogger 生活更輕鬆 XD
（20.05.18 追記：新版的編輯器不會吃空兩格）
由於是從個人 web 網站轉來，最開始解決的方式是直接寫行內式，不過，每次都要寫行內式很麻煩，所以前幾年做了一次調整，去年活用 JQuery 後果斷做了一個這樣的小工具：
（圖 1）小工具介面
主要功能有畫面中下方所看到的 7 個：
- + ＜P＞標籤：給 blogger 用的，可以用 css 空兩格＆更新了現在 blogger HTML 模式需要自己 + ＜BR＞的需求
- 空行 + 空兩格（台／中）：所有段落前空兩格 + 段落中間空行；選擇（台）（中）會來回切換台式＆中式標點。
- 去格式 + ID 排版：加了＜P＞標籤的文章氧化還原，從 blogger 複製文章進 ID 排版用
- ID 排版（日）：之前為了排無料，所以做了加了＜P＞標籤的文章一鍵轉換日式排版的功能。
- blogger 雜談用：如果有像我一樣，無法忍受廢 code，都開 HTML 模式編輯的朋友（有嗎？），這是個自動每行 + ＜BR＞的功能
- 計算字數：計算所有字元字數，所以請在文章貼進來的第一時間使用。
中間分了台式和中式標點是因為習慣貼 LFT 會轉成簡體字 + 中國正規標點，算是一種入境隨俗吧。一方面也是因為中國官方字體雅黑比較適合呈現簡體字（台灣用的是正黑體）
STEP-1 Blogger 範本設定
事前準備 PART 1，為了讓＜P＞標籤順利空兩格，我們必須事先設定一些 CSS（文章樣式）。
由於自己比較龜毛，所以設定滿多東西的……不過這邊就不一一介紹，只針對＜P＞標籤空兩格的設定做介紹。
＜P＞標籤一般用於文章段落，一來如果不小心缺失（不小心刪掉頭＜P＞、尾＜/P＞）不太會造成網頁跑版；二來 blogger 整個網誌框架結構上沒有使用這個標籤，設定樣式時比較方便。
（圖 2-1）＜P＞標籤預設段落間距
（圖 2-2）想要段落間距小一點自己另外做的設定
一、修改範本內的 CSS
進入後台管理後，點選「範本」＞「編輯 XML」
（圖 3-1）編輯路徑
（圖 3-2）語法中放 CSS 的地方，找個空位把下面那段 CSS 放進去就可了。如果不知道要放哪裡，可以搜尋「.post-body（文章區塊的 CSS）」，在他附近騰一個空位出來放
.post-body p{ /*指定文章區塊裡所有＜P＞標籤*/
line-height: 200%; /*兩倍行距，可自行調整*/
text-indent: 2em; /*首行縮排=空兩格*/
margin:8px 0 0; /*段落前後間距，數值依序是上、左右、下，可自行調整*/
}
line-height: 200%; /*兩倍行距，可自行調整*/
text-indent: 2em; /*首行縮排=空兩格*/
margin:8px 0 0; /*段落前後間距，數值依序是上、左右、下，可自行調整*/
}
二、放進去之後儲存，沒有錯誤就 OK 了。
請安心嘗試～如果不小心貼錯，blogger 會不讓你存檔。
STEP-2 Blogger 文章設定
再來，簡單設定 blogger 的文章介面：
請使用 HTML 模式貼文章 / 再次編輯文章
（圖 4）切換模式
STEP-3 小工具功能介紹
以上都設定完了，就可以來使用小工具了~
► 小工具下載位置（點此／23.04.08 更新連結）
由於小工具只是個網頁，所以將它解壓縮後，打開名為「index」的網頁檔就可以開始使用了，可以參考（圖 1）的介面。
下載回去的網頁沒有後面背景圖片是正常的，想說這樣檔案比較小。
（圖 5）將文章貼入小工具內
一、如果要計算字數，請在文章貼進來第一時間算
因為後面加入的＜P＞標籤、全形空白都會算在字數內 XD 先算可以避免灌水。
（圖 6）計算字數，計算出來的字數會顯示在旁邊
二、總之先加入＜P＞標籤
- 會有這種設計主要是因為本家 blogger 通常會優先更新 XD
- 也因為這個設計，寫文時段落前不需要自行空兩格
- 如果原先已經空兩格怎麼辦？請使用水裡的小工具「全格式清除」
（圖 7）「＜P＞標籤加入」，把每一段文字都用＜P＞標籤包起來
加入＜P＞標籤之後，把文字反貼回去 blogger 文章編輯介面（請注意是「HTML」模式）按儲存或者發佈就完成了。
（圖 8）不需要開頭空兩格 + 段落間距的雜談、Free Talk 等文章，可使用本功能 + ＜BR＞
（20.05.18 追記：給不喜歡文章有廢結構的 HTML 編輯模式愛好者）
三、離開 blogger 去其他地方
- 接下來的功能必須在「+ ＜P＞標籤」之後使用，會自動空行 + 空兩格
- 除了個人部落格，能夠自由撰寫 CSS 的地方相當少~比如說 LFT 只要是不支援的 CSS 例如「置中」「字級」「顏色」都會被吃掉
- 所以出門在外沒有段距行距和首行縮排時，通常又會需要自行空兩格 + 空行
- 依照需求選擇台式或中式標點／這兩個功能是可逆的，所以要是看網路文章時不習慣看中式標點，也可以把文章貼進來做轉換
（圖 9-1）空行 + 空兩格，轉成台式標點
（圖 9-2）空行 + 空兩格，轉成中式標點
四、離開 blogger 去其他地方 PART 2
（圖 10）去除格式，還原成純文本，方便給 ID 使用
（圖 11）轉換成日式排版，方便給 ID 使用
（小工具 JS 內容有參考網路文章）
以上就是全部的內容~
雖然看起來有些複雜，但其實 STEP-1 / 2 都是一次工，之後就只需要使用 STEP-3 小工具就可以了。
平均更文都花不到 5 分鐘，修錯字也沒什麼問題，不需要重新調版面，如果有點時間可以試試，整段照著做完其實也只需要十分鐘左右 XD
第一次在這裡留言有點不好意思，這個小工具實在太神啦！雖然還沒在本家放上文章什麼的，但喜歡折騰如我，還是想去研究研究。謝謝店長的分享！（等來下研究）
回覆刪除歡迎，請儘管拿去用~如果有什麼不懂或不清楚的地方可以盡量問，畢竟這個小工具原本是for個人用可能功能限制比較多XD
刪除剛搬到blogger，一直苦惱於段落與段落之間實在親密過頭了，有這個小工具可以用真的感激涕零！謝謝分享！
回覆刪除能提供幫助就好！blogger原生語言是英文，系統預設行距在中文語系上有些太小，用小工具調整完清爽很多XD 如果有其他問題可以在這邊發問沒有關係：Ｄ
刪除