[unboxing][hrads]

熱門標籤

☆重要訊息:Blogger 官方近期推出的「RWD 自適應範本主題」沒有『行動服務』的設定選項,如果您是觀察「技研可樂」裡的文章做自己網站的設計,使用「自適應範本主題」的使用者可以直接依「技研可樂」文章裡的『電腦版』方式做設定即可完成佈置,不需要開啟『行動服務』。☆

  Blogger 自訂網址應用 CloudFlare HTTPS 系列文章:「CloudFlare

  Blogger HTTPS 相關文章列表:「HTTPS

  Blogger AdSense 廣告放置與相關自適應廣告佈屬文章列表:「AdSense

  Blogger 常用頁面判斷式用法一列表:「Blogger 常用頁面判斷式用法一覽表

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 資源



分享

加入代碼加入代碼

若您在閱覽文章時,於文章頁面找不到相關的應用主題,歡迎移駕到『站內留言』一起研究討論,謝謝!

使用超連結:<a href="https://www.techcoke.com/">技研可樂</a> =『技研可樂

加入圖片 ( https ):支援 HTTPS 網址型式的 .jpg .png 格式圖檔,直接貼入 HTTPS 圖片網址即可在留言時顯示!

支援非嵌入 Youtube 視頻:https://www.youtube.com/watch?v=hdfSISI24Xk (* 瀏覽器網址列中的 Youtube 網址 )

&&amp;'&#039;"&quot;<&lt;>&gt;
技研可樂 © 2013 - 2017

Contact Form

Name

Email *

Message *