[教學] 自訂 Blogger 行動版範本與自適應設計原理

本篇會就 Blogger ( Blogspot ) 網誌的行動版 ( 手機版 ) 網頁，自訂 Blogger 行動版範本的開啟與設置 RWD 自適應設計做教學與原理說明。

當中包含行動版網站與電腦版網站網址 ( Url ) 對應之間的關係，與 RWD 自適應網站設定應用 CSS3 @media Query 初始化的方式。

如果想在行動版網站，安裝廣告、分享按鈕或是個別出現 Blogger 小工具，又或是個別調整電腦版網站與行動版網站的 CSS，可以參考本篇的介紹。

由於混合了 Blogger 電腦版、行動版、RWD 自適應版型調整，各類型網址的變化，所以大部份章節會以「使用方式」加上「一個例子」來做說明。創意的用法很多，你如果有遇到無法解決的問題，也可以留言一起研究討論。

章節流程

使用自訂 Blogger 行動版範本
行動版網站 HTML 範本：標頭
行動版網站 HTML 範本：文章內容
行動版網站 HTML 範本：CSS
行動版網站 HTML 範本：小工具 widget
電腦版與行動版網站的網址類型
RWD 自適應版型原理
網站是否適合透過行動裝置瀏覽

設置前準備

若對編譯 Blogger 的 HTML 模板還不太熟悉，建議先執行『備份 Blogger 模板 (範本)』的動作，以防原始模板資料遺失。

設定教學

Blogger 預設的情形下，即會開啟網站的行動版網站，也可以從手機瀏覽。由於預設的行動版範本，是被綁死的，如果想在行動版網站中添加額外的小工具、CSS、廣告或是分享按鈕，就得開啟 Blogger 行動版範本的「自訂」功能。

Step 1

使用自訂 Blogger 行動版範本

登入 Blogger 後，前往 Blogger 後台，【範本 \ 行動服務】點擊【齒輪】

在跳出來的畫面中圈選，【是，在行動裝置上顯示行動範本】->【選擇行動範本 \ 自訂】->【儲存】

到此，即開啟 Blogger 行動版範本的自訂功能。

Step 2

行動版網站 HTML 範本：標頭

行動版網頁標頭的部份，是與電腦版網頁一起寫在 HTML 範本中的。回到 Blogger 後台點擊【範本 \ 編輯 HTML】，可以開始觀察標頭的結構。詳細電腦版與行動版標頭說明可以參閱：「Blogger 標頭判斷標記資料整理」。

Blogger 標頭包含了網誌名稱、圖片、描述等資料。如果需要調整行動版網頁的文章「h1、h2」，可以搜尋範本中的「id='mobile-index-post'、id='mobile-post'」，在「mobile-index-post 與 mobile-post」中就包含了文章標題的代碼設定。

要調整行動版網頁整體網站的「h1、h2」，就需調整標頭區塊與「id='mobile-index-post'、id='mobile-post'」裡面的代碼，三者需要互相搭配。

電腦版與行動版網頁的「h1、h2」優化方式，可以參考『Blogger 範本：網誌標題、文章標題「h1、h2、h3」標籤 SEO 最佳化』。

Step 3

行動版網站 HTML 範本：文章內容

行動版網站的「文章內頁 ( /2017/01/post_page.html )」與「靜態網頁 (/p/static_page.html)」代碼，都是寫在「<b:includable id='mobile-post' var='post'>」裡面的「<data:post.body/> ( 文章內容 )」上方，電腦版與行動版網頁的「文章內容」區塊，資料幾乎雷同，這也是大家比較容易混肴的地方。

下圖為範本搜尋「<data:post.body/> ( 文章內容 )」的技巧。(* 文章內容：相當於 Blogger 後台，「版面配置」頁的『網誌文章』區塊。)

判斷電腦版與行動版網頁的「文章內容」區塊的方式就是，在範本中搜尋「<data:post.body/>」。如果在「<data:post.body/> 」上方，出現的是「<b:includable id='mobile-post' var='post'>」，則這一個「<data:post.body/> ( 文章內容 )」就是屬於行動版網頁的「文章內容」資料。

如果在「<data:post.body/>」上方，出現的是「<b:includable id='post' var='post'>」，則這一個「<data:post.body/> ( 文章內容 )」就是屬於電腦版網頁的「文章內容」資料。(* 一般情形下，大多數模板在電腦版網頁的範本區塊會配置兩筆「文章內容」。

知道了行動版網頁的「<data:post.body/> ( 文章內容 )」位置後，我們就可以在整個文章的上方或是下方加入分享按鈕，或是在文章的繼續閱讀中藏廣告，於文章中顯示。

分享按鈕

一般情形下，大部份網站都會將分享按鈕安裝在整體「文章內容」的下方。這時候，就可將分享按鈕的代碼，放在「<data:post.body/> ( 文章內容 )」的下方。

也就是說從 FB、G+、Twitter 或是 AddThis 取得的分享按鈕程式碼，放在「<data:post.body/>」的下方，在行動版網頁的文章內頁最下方就會顯示分享按鈕。

如果要更改 Blogger 官方的行動版網頁分享按鈕，可以在範本中搜尋「data:top.showMobileShare」以做變更。具體做法可參考『Blogger 行動版安裝社群分享按鈕』。

繼續閱讀隱藏廣告

有需求在行動版網頁的文章中自動安插廣告，則可以參考『Blogger 繼續閱讀隱藏廣告和物件』及『Blogger 文章中任意位置加入Google AdSense 廣告』這兩篇文章。

Step 4

行動版網站 HTML 範本：CSS

在行動版網頁中佈置 CSS 有兩種做法：
第一種做法是在範本的「<body>」中加入以下代碼


<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

接著在範本的 CSS 區塊加入「.mobile」資料，例如：


.mobile .posts-title {
/* 想放入的 CSS 內容 */
}

第二種做法則是使用「<b:if cond='data:blog.isMobile'>」，將 CSS 歸屬在行動版網頁中，也就是說，只在行動版網頁中顯示。(* 有時候，只想要某個小工具中的 CSS 圖示或代碼，顯示在行動版網頁中，這個方式相當好用。)例如：


<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.posts-title {
/* 想放入的 CSS 內容 */
}
</style>
</b:if>

如果，某些 JavaScript 只想在行動版網頁出現，也可以這樣使用：


<b:if cond='data:blog.isMobile'>
<script type='text/javascript'>
//<![CDATA[
// 想放入的 JavaScript 內容
//]]>
</script>
</b:if>

下面這種方式，則是上段 CSS 代碼的相反用法。目的是不受行動版網頁影響，下段 CSS 資料「不在行動版網頁」顯示。


<b:if cond='data:blog.isMobile != &quot;true&quot;'>
<style type='text/css'>
.posts-title {
/* 想放入的 CSS 內容 */
}
</style>
</b:if>

又或是可以混合使用：


<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.posts-title {
/* 此段 CSS 內容只在行動版網頁顯示 */
}
</style>
  <b:else/><!-- 如果不是的話 -->
<style type='text/css'>
.posts-title {
/* 此段 CSS 內容會在電腦版網頁顯示 */
}
</style>
</b:if>

如果你的網站是「自適應設計」的版型 (* 沒有混合行動版網頁，從行動裝置上瀏覽網頁網址後方不會顯示「?m=1」。)，直接使用「<style type="text/css"> ~ </style>」包 CSS 資料即可。

Step 5

行動版網站 HTML 範本：小工具 widget

如果要讓電腦版網頁的小工具，出現在行動版網頁中。可以在範本的任一個「<b:widget>」當中加入『mobile='yes'』。例如：


<b:widget id='HTML1' locked='false' mobile='yes' title='小工具' type='HTML' version='1' visible='true'>

只在行動範本顯示
mobile='only'

不在行動範本顯示
mobile='no'

行動範本與電腦版網頁皆顯示
mobile='yes'

上例的具體做法，可參考『Google 自訂搜尋嵌入 Blogger 行動版網頁』。

另一種「小工具 widget」的設定方式，是在小工具的「<b:includable id='main'>」下方加入「<b:if cond='data:blog.isMobile'>」，讓小工具只在行動範本顯示。具體做法類似於『Blogger 標籤頁面加入分類小標籤』。例如：


    <b:widget id='HTML1' locked='false' title='小工具' type='HTML' version='1' visible='true'>
      <b:includable id='main'>
<b:if cond='data:blog.isMobile'><!-- 只在行動範本顯示 -->
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h4 class='title'><data:title/></h4>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if><!-- 只在行動範本顯示 -->
</b:includable>
    </b:widget>

如果想要自訂一個 div class 在範本中使用，我們也可以這樣使用。例如：


<div class='customize-class'>
  <b:if cond='data:blog.isMobile'>
<!-- 此段內容只在行動版網頁顯示 -->
  <b:else/><!-- 如果不是的話 -->
<!-- 會在電腦版網頁中顯示 -->
  </b:if>
</div>

Step 6

電腦版與行動版網頁的網址類型

以下各類型的網址，於 Blogger 後台「範本→行動服務」開啟使用『Ⓞ 是，在行動裝置上顯示行動版範本。』之後，就會開始運作在電腦版與行動版網頁中。(* 如果單獨使用「自適應版型」而不是混合使用，也可以關閉這個功能，讓網頁的網址統一為「電腦版網頁的網址」。)

( 2017 /01 / 21 ) 文章更新：

目前 Blogger 系統，即使在路徑「範本〉行動服務〉選擇行動服務」中選擇使用『Ⓞ 否，在行動裝置上顯示電腦版範本』，只要從行動裝置上連網到自己的網誌，都會將網址自動切換到「?m=1」的行動版網址格式。

電腦版網頁的網址：
https://www.techcoke.com/

行動版網頁的網址：
https://www.techcoke.com/?m=1

從行動版網頁切換回電腦版網頁的網址：
https://www.techcoke.com/?m=0

Step 7

RWD 自適應版型原理

宣告與裝置視野初始化

在部署自適應網頁時，首先可以在範本的「<head>」加入元資料標記，宣告目前瀏覽的網頁，螢幕視野的寬度等於設備的寬度，初始化的比例為 1。


<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

設定視野寬度為裝置的寬度
width=device-width

設定縮放大小為1倍
initial-scale=1

設定縮放大小，最大為1倍
maximum-scale=1
(* 使用此設定，使用者會無法藉由放大或縮小，觀看網頁頁面的內容。)

CSS3 Media Queries 媒體查詢

由於我們限制了網頁在裝置上的螢幕視野寬度，在應用 Media Queries 時，我們則可使用「em 與 %」做佈局，以百分比來做設定是較為方便的。以下是使用「@media Query」初始化的示例：


/* 設置最大寬度  */
@media screen and (max-width:1366 px){
/* 最大寬度，使用此段 CSS */
}

/* 筆電、桌機寬度 */
@media only screen and (max-width:1280px) {
/* 如果設備寬度小於 1280 px，使用此段 CSS */
}

/* 平板（橫向） */
@media only screen and (max-width:1024px) {
/* 如果設備寬度小於 1024 px，使用此段 CSS */
}

/* 平板（縱向） */
@media only screen and (max-width:768px) {
/* 如果設備寬度小於 768 px，使用此段 CSS */
}

/* 手機（橫向） */
@media only screen and (max-width:640px) {
/* 如果設備寬度小於 640 px，使用此段 CSS */
}

/* 手機（縱向） */
@media only screen and (max-width:480px) {
/* 如果設備寬度小於 480 px，使用此段 CSS */
}

/* 傳統行動裝置 */
@media only screen and (max-width:320px) {
/* 如果設備寬度小於 320 px，使用此段 CSS */
}

類似的具體用法，可參考『Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告』。

如果你的網站使用自適應版型與行動版網頁混合使用，我們還可以讓混合了自適應設計的行動版網頁，只在特定螢幕大小的裝置上顯示，加快頁面載入速度。例如：


<!-- 行動版網頁 ?m=1，在螢幕寬度小於 640 px 時使用 -->
<link expr:href='data:blog.url + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate' />

外連 css 的用法


<!-- 載入 theme-body-content.css -->
<link href='https://cdn.techcoke.com/css/theme-body-content.css' media='all' rel='stylesheet' type='text/css'/>

<!-- 螢幕寬度在大於 400px 小於 700px 的範圍時，載入 theme-body-content.css -->
<link href='https://cdn.techcoke.com/css/theme-body-content.css' media='screen and (min-width: 400px) and (max-width: 700px)' rel='stylesheet' type='text/css'/>

外連 css @import 用法


<style type='text/css'>
/* 載入外連 theme-body-content.css 資料 */
@import url('//cdn.techcoke.com/css/theme-body-content.css');
</style>

<style type='text/css'>
/* 螢幕寬度在大於 400px 小於 700px 的範圍時，載入 theme-body-content.css 資料 */
@import url('//cdn.techcoke.com/css/theme-body-content.css') screen and (min-width: 400px) and (max-width: 700px);
</style>

更詳細的 Media Queries 應用教學，可參閱『MUKI space*』。

Step 8

測試網站是否適合透過行動裝置瀏覽

在 Google 的 WebMasters 部落格中，於 2015 年 4 月 21 日有說明『如果網站的網頁不適合移動裝置瀏覽，那麼來自 Google 搜尋的移動流量可能會大幅減少。』。

如果要測試自己的網站，是否符合行動裝置瀏覽。我們可以透過 Google 的「行動裝置相容性測試 Mobile-Friendly Test」觀察網站的行動裝置測試情形。

留言

Wang Henry娛樂數位3/18/2017 1:09 下午
嗨coke~好久不見:)

目前主要的網站 www.wanghenry.com 也受益於你之下功能上都還算穩定，至於之前提過的某篇文章手動插入廣告產生出來的問題，個人覺得是不知名原因卡死了那幾篇特定的文章XD

因為...我有償試過把該篇文章的HTML複製在新開的站顯示是正常的、甚至把既有的文章全部清空(無任何HTML)隨便打幾段測試的內容，該網址的文章廣告還是異常XD(預覽可顯示、送出後卻消失)，但由於新開的文章三個廣告的部分都沒問題，所以就打算先靜置這個問題了。

同時之前也察看/詢問過把網址體換成https的文章，但目前想先以新的網站開始測試才不會被主站中已經雜亂不堪的語法給混淆XD

而這次留言主要的問題點如下：(先行諮詢)

1.目前不論是COKE或WFU等網路上常見的BLOGGER教學，是不是在【版型(現在官方以正名為"主題")】的部分都建議選用【簡單】的類別?

因為目前我的主站是企業版為底，常在在查看一些教學時會有找不到語法的狀況，而回頭一看你們的教學版型基礎都是選【簡單】，所以救我目前想要重新做版型(新站)來說，是不是選【簡單】的底子比較好呢?

2.主目前功能還算齊全，但有部分功能其實算是"硬上"的狀態，也就是跟網路教學的步驟有落差，雖然表面看起來沒事、但對後續要除錯或調整功能時就會出現找不到相關語法的問題。

所以，我就在想說在製作新版的過程中，COKE有沒有一些打造部落格所需加入的功能中在順序上的一些建議?

像是：目前我的新版還沒變動語法，如果想要加入【頭、延伸閱讀、尾】的廣告語法，是不是在範本內最乾淨的時候設計會比較容易?等等的~

3.COKE站內有無新手架站順序的文章指引(先後順序、注意事項之類的)?

謝謝^^
回覆刪除
回覆
娜回事3/09/2018 1:07 上午
請問我在網路版 HTML 小工具如標籤如上述步驟加入 mobile='yes' ，也順利儲存。但手機上標籤仍沒有出現？哪邊步驟有錯誤嗎？感謝！
回覆刪除
回覆
maizi3/12/2020 9:06 下午
你好，我加了顯示語法的工具這樣我才能把語法貼出來給大家看！
不過，我不知是不是我主題的關係，我這語法框後面的文字全無法置中！？
而且，我看英文版型明明文字就不是置中，我套上去就置中...置中就算了，好不容易找到可以改的
改了左邊，圖片也整個往左邊跑！
不知怎麼解決研究好幾天了...

文字也沒有套用到css，也有試過在.post上加入，但完全沒反應！？

https://maizi-nonsense.blogspot.com/2020/03/bloggerlikebutton.html
回覆刪除
回覆

新增留言

◎ 留言板中提問「代碼」問題，可至『留言代碼轉換器』轉換代碼。

搜尋此網誌

技研可樂