這篇 "Blogger 論壇貼文"詢問要怎麼樣才能「觀看文章時,內文不會顯示側邊欄」?意思就是希望調整部落格的版面,將側邊欄隱藏起來,那麼文章區塊就能延伸到最大的寬度。
的確很多站長都喜歡這種清爽的版面設計,友站「小說界的李洛克」就是這樣的風格,而 WFU BLOG 的分站「三國志 11」也是如此,能夠提供讀者最佳的友善閱讀版面。
關閉側邊欄後,也失去不少面積擺放廣告,不過相信喜歡這種風格的站長,並不在意這件事。而 Blogger 要做到這樣的版面配置其實很簡單,本文就來看看可以怎麼進行。
(圖片出處: pickupimage.com)
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 範本設計工具」使用這個功能。
「一、Blogger 範本設計工具」的修改方式,會讓整個網站的所有頁面,都沒有側邊欄。而文章開頭的提問,是希望 "在文章頁面時,才隱藏側邊欄"。
這樣的話,只能使用 Blogger 判斷式來處理,讓文章頁面的側邊欄消失,而其他頁面(如首頁、搜尋頁面、靜態頁面等等),側邊欄仍然存在,請按照以下的步驟進行。
在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。
請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋</head> 這個字串,找到後在此字串的前一行,插入以下程式碼:
存檔後即可看到效果,首頁仍然看得到側邊欄,進入文章頁面才會關閉側邊欄。
不過需要注意的是,非官方範本不一定能套用以上的 CSS,這並非萬用的程式碼,如果熟悉 CSS 的話可自行調整。
過去曾寫了一篇「讓 Blogger 有快速載入的展示頁面」,用途跟本篇主題有些相關。
這個工具的構想在於,只有特定的文章頁面,才需要將文章區塊的寬度延伸到最大,可能是 "DEMO 頁面" (例如「快速回到頂端(Go Top)按鈕」)、或是 "公告頁面" (例如「本站服務項目」)。
如果只有特定文章才想隱藏側邊欄的話,那麼就可使用這個小工具,讓這篇文章的版面看起來特別不一樣。
的確很多站長都喜歡這種清爽的版面設計,友站「小說界的李洛克」就是這樣的風格,而 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 搜尋
<!--文章頁面隱藏側邊欄-->
<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 相關技巧: