2016年5月29日

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

A+
blogger-template-hide-sidebar-讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)這篇 "Blogger 論壇貼文" 詢問要怎麼樣才能「觀看文章時,內文不會顯示側邊欄」?意思就是希望調整部落格的版面,將側邊欄隱藏起來,那麼文章區塊就能延伸到最大的寬度。

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

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

(圖片出處: pickupimage.com)


一、Blogger 範本設計工具


1. 變更版面

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

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

blogger-template-full-screen-width-讓 Blogger 文章頁面以最大寬度呈現(隱藏側邊欄)

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


2. 變更寬度

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

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

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

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

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

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

操作方法如上圖,在「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 相關技巧:

1 則留言:

  1. 實在太感謝了!!!!!
    之前找的教學文都太舊完全不知道該怎麼改好OTZ

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。