Blogger 使用 HTML5 Validator 解決 xmlns 與 border 錯誤的方式

使用 Validator.nu (X)HTML5 幫自己的 Blogger 網站做 HTML5 Validator 修正與除錯時，解決到最後一定會遇到無法處理的 Google「xmlns」與 img 圖片「border="0"」的問題。

Google「xmlns」是 Blogger 範本中與「b:template-skin ( 版面配置頁 CSS )」對應的資料。xmlns 在範本中共有三筆，分別為「xmlns:b、xmlns:data、xmlns:expr」。

img 圖片「border="0"」的問題，則是文章圖片。Blogger 系統在我們寫文章貼入圖片時，會自動幫圖片加上「border="0"」標記。

由於 Google「xmlns」在 HTML5 Validator 上是屬於不允許的屬性，所以會顯示錯誤。img 圖片「border="0"」則是 HTML 舊的語法標記，無法符合 HTML 5 標準。

以下就是解決 Google「xmlns」與 img 圖片「border="0"」的方式。

設置流程

1. 解決 img 圖片「border="0"」錯誤的方法
2. 解決  Google「xmlns」錯誤的方法

設定教學

Step 1

解決 img 圖片「border="0"」錯誤的方法

解決 img 圖片「border="0"」錯誤的方法有兩種。建議使用方法一，因為如果有一天換 Blogger 模板的話，就不用再更動到範本中的 CSS。

Step1-1 方法一：

第一種是，在每一次寫文章時，切換到 HTML 模式，將圖片「border="0"」修改為「style="border:none;"」。如下圖：

Step1-2 方法二：

第二種解決方式，則是在 Blogger 範本的 CSS 區塊或在「<b:skin><![CDATA[ ~ ]]></b:skin>」之內，加入「.post-body img {border: 0;}」。再將每篇文章中圖片的「border="0"」做刪除。

(* 如果範本中「.post-body img { }」裡面已經有「border」的樣式資料，則可不用添加「.post-body img {border: 0;}」。)

Step 2

解決 Google「xmlns」錯誤的方法

解決 Google「xmlns」錯誤的方法也有兩種。

Step2-1 方法一：

第一種是，在每一次儲存範本時，將「xmlns」的資料都刪除再儲存範本 (* 記得，得是每一次 )。如下圖：

此法有一缺點，F5 重整 Blogger 後台之後「xmlns」資料還是會出現。不過，只要儲存過範本，那麼在「網頁原始碼」中，就不會再出現「xmlns」資料。使用 Validator.nu (X)HTML5 檢測網頁時，就不會出現錯誤了。

檢查是否正確不再顯示「xmlns」資料，可以前往自己的 Blogger 網站前台，按下鍵盤上的「Ctrl＋u」，就能觀察「網頁原始碼」的即時顯示情形。「網頁原始碼」頁面中，如果沒有出現 Google「xmlns」資料，就代表修正完成了。

Step2-2 方法二：

第二種解決 Google「xmlns」錯誤的方式，則是刪除範本中的「b:template-skin」。此方法可以完全刪除「xmlns」。不過缺點就是後台「版面配置」頁面的 CSS 會全部不見，變成一片式的頁面。

具體做法可參考『Blogger 如何完全刪除「版面配置」範本 CSS b:template-skin』。

相關文章

Blogger 如何完全刪除「版面配置」範本 CSS b:template-skin

Blogger 如何移除 PageSpeed Insights 禁止轉譯 JavaScript、CSS 資源