讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)

這篇 "Blogger 論壇貼文" 詢問要怎麼樣才能「觀看文章時，內文不會顯示側邊欄」？意思就是希望調整部落格的版面，將側邊欄隱藏起來，那麼文章區塊就能延伸到最大的寬度。

的確很多站長都喜歡這種清爽的版面設計，友站「小說界的李洛克」就是這樣的風格，而 WFU BLOG 的分站「三國志 11」也是如此，能夠提供讀者最佳的友善閱讀版面。

關閉側邊欄後，也失去不少面積擺放廣告，不過相信喜歡這種風格的站長，並不在意這件事。而 Blogger 要做到這樣的版面配置其實很簡單，本文就來看看可以怎麼進行。

(圖片出處: pickupimage.com)

一、Blogger 範本設計工具

1. 變更版面

最簡單的方法為，使用官方提供的工具就能調整版面，不必動到任何程式碼。

在後台 → 範本 → 自訂 → 進入「Blogger 範本設計工具」 → 版面配置



如上圖紅框的選項，這個配置完全沒有側邊欄，選擇這個版面就行了，其他配置都是有側邊欄的。


2. 變更寬度

選擇沒有側邊欄的版面後，設定部落格寬度也是很重要的一件事。

Blogger 預設的版面寬度，大致是 960px 左右，因為在以前的年代，螢幕主流尺寸是 17"，解析度以 1024 x 768 為大宗，網頁寬度使用 960px 在可視範圍內是安全的選擇。

但現在寬螢幕早已是主流，使用者多的是用 1920 x 1080 這種解析度，幾乎可以無視 1024 x 768 這個尺寸的訪客(這種螢幕殘存的比例應該低於 1%)，合理的考量是往上一個等級、照顧到使用 1280 這個螢幕寬度的訪客就好。

過去有不少讀者詢問到 "網頁寬度應該設定為多少" 這樣的問題，因為很想加大寬度、在網頁擺放更高解析度的大圖，但又怕超出使用者的螢幕範圍。

藉這個機會一起回答，在以上說明的前提下，也就是在 1280 這個寬度的螢幕還沒被淘汰之前，目前建議我們網站的寬度可以最多使用到 1260px 寬 (20px 留邊)。



操作方法如上圖，在「Blogger 範本設計工具」選擇「調整寬度」，即可調整網頁的寬度配置。

如果有使用側邊欄的話，記得調整為 330px 以上，這樣放 Adsense 廣告 300x600 這個尺寸的效果會比較好。

提醒一下，非官方範本、或範本有修改過的話，不一定能在「Blogger 範本設計工具」使用這個功能。

二、修改文章頁面 CSS

「一、Blogger 範本設計工具」的修改方式，會讓整個網站的所有頁面，都沒有側邊欄。而文章開頭的提問，是希望 "在文章頁面時，才隱藏側邊欄"。

這樣的話，只能使用 Blogger 判斷式來處理，讓文章頁面的側邊欄消失，而其他頁面(如首頁、搜尋頁面、靜態頁面等等)，側邊欄仍然存在，請按照以下的步驟進行。

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<!--文章頁面隱藏側邊欄-->
<b:if cond='data:blog.pageType == "item"'>
<style>
.columns, .fauxcolumn-center-outer {
padding-left: 0 !important;
padding-right: 0 !important;
}
.fauxcolumn-left-outer, .fauxcolumn-right-outer, .column-left-outer, .column-right-outer {
display:none !important;
}
</style>
</b:if>
存檔後即可看到效果，首頁仍然看得到側邊欄，進入文章頁面才會關閉側邊欄。

不過需要注意的是，非官方範本不一定能套用以上的 CSS，這並非萬用的程式碼，如果熟悉 CSS 的話可自行調整。

三、特定文章頁面才隱藏側邊欄

過去曾寫了一篇「讓 Blogger 有快速載入的展示頁面」，用途跟本篇主題有些相關。

這個工具的構想在於，只有特定的文章頁面，才需要將文章區塊的寬度延伸到最大，可能是 "DEMO 頁面" (例如「快速回到頂端(Go Top)按鈕」)、或是 "公告頁面" (例如「本站服務項目」)。

如果只有特定文章才想隱藏側邊欄的話，那麼就可使用這個小工具，讓這篇文章的版面看起來特別不一樣。

更多 Blogger 相關技巧：