Blogger改字型&圖片說明文字大小&設定字串替換教學

這陣子blogger大改版
現在都改用在notion上編輯好再貼去blogger
markdown編輯真的比blogger的編輯器好用多了
雖然中文輸入還是有些問題 有時候輸入的句子會整串被吃掉
還是滿好用的
這篇就稍微記一下這次blogger改版有用到的一些東西

改字型

英文還好說 在他的主題編輯器裡可以改
中文的話需要從html那邊編輯

先從英文的改起
後台管理→主題→橘色自訂按鈕點下去

然後在進階裡每項看 看得到字型的都改
我是用Arial 想改其他的也行

再來是中文
剛後台管理那邊又上的三個點點下去→編輯html
然後記得先點一下程式碼內再按ctrl+f搜尋你剛設的字型名 我這邊就是Arial
沒點的話會變成用瀏覽器的搜尋 會搜不到程式碼下面的文字內容

找到後在那行最後面”sans-serif”前加上”TW-Kai, BiauKai, Microsoft JhengHei”
這樣預設中文會變微軟正黑體
要改其他的字體需要找一下怎麼改 微軟正黑就不用特別設定就能用
然後繼續ctrl+f找所有有Arial的地方 後面都做一樣的事

改圖片說明文字大小

新模板的說明文字大小預設有點大(下圖紅色箭頭
預設跟內文文字一樣 我是改成80%

一樣剛剛主題→三個點→編輯HTML的地方
一樣方法搜尋”td”
第一個應該就會出現

td.tr-caption {
  font-size: 80%;
}

“font-size: 80%;”這個應該一開始沒有 就把它加上去
覺得太大太小就數字改一下就行了

設定字串替換

這個功能一開始是因為notion貼過去blogger編輯器
進行markdown轉換html後雙空格會被html收成一個空格
我是很習慣用雙空格的人 這個東西會讓我滿不開心的
一開始是我嘗試用css style裡的”white-space: pre”這個property
可是用這個會有滿多格式都會跑掉的
之後我就自己寫了javascript插件做字串替換

找到後台管理→版面配置→側欄(底部)→新增小工具→HTML/Javacript右邊的+點下去

標題隨便取 反正上面那個勾選顯示不要勾
就不會出現在側欄 只會有javascript的功能
內容部分放下面的程式碼

<script language="javascript">
        var input = document.getElementsByTagName("div");
        for(i = 0;i < input.length; i++) {
            input[i].innerHTML = input[i].innerHTML.replace("  ", " ");
        
        }
        input = document.getElementsByTagName("td");
        for(i = 0;i < input.length; i++) {
            input[i].innerHTML = input[i].innerHTML.replace("  ", " ");
        
        }
</script>

在replace後括號裡前面的就是想被替換掉的字 這邊就是雙空白
後面的就是想替換成的字元 這邊是替換成” ”雙空白字元
也可以改成其他的 例如武漢病毒改成**病毒 64改成??之類的

這邊這樣寫法是只有內文跟圖片說明文字會被替換
其他地方的話還要再改一下code

​