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"」標記。

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

由於 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;"」。如下圖:

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


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」的資料都刪除再儲存範本 (* 記得,得是每一次 )。如下圖:

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

此法有一缺點,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 資源


留言

繼續閱讀:

這個網誌中的熱門文章

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

[教學] Blogger 自訂網址綁定自有域名