鑫部落 心經營!

調整痞客邦Pixnet文章版面寬度懶人包 看了就會! (2018版適用) [真.教學]

    有些痞客邦部落客會自訂超寬版面，能一次呈現比一般更大張的內文照片，整份文章氣勢很強，他們是如何辦到的? 先看看標準版面，以下是 PIXNET 兩欄式，廣告在左文章靠右之呈現樣貌。

 

兩欄式標準版面下，搭配的照片以 600 點(像素)的中圖最適合。若使用 1024 點大圖，雖然系統能讓它自動縮放，由中圖變大圖，但大圖之右邊有一塊會看不到，因為已經超過版面。如果想一次將 1024 點大圖完整顯示出來，就需要放大版面寬度。

請進入管理後台的「自訂樣式」，點擊「CSS 原始碼編輯」之「前往」。

 

2022/4/15 更新

Pixnet 新版後台之操作方式如下:

(1)進「主選單」(管理首頁左邊三條線)

(2)點擊「樣式管理」

(3)選「部落格 CSS 原始碼」分頁

(4)其他改碼動作都一樣
 

 

接下來會看到「編輯CSS 原始碼視窗」，畫面中間由許多符號夾雜英數字組成的，就是 CSS 程式碼。CSS 程式碼中，藏著用來控制版面的指令，只要找出它們再更改設定值便能放大寬度，這就是本文的教學重點。

底下不會用到艱深的 CSS 語法，任何會用痞客邦寫文章的使用者，一定都能依樣畫葫蘆將之設定成功。Let's go!

為避免錯誤動作，所以把現行的 CSS 碼複製一份起來，萬一有狀況可以輕鬆自行復原。

在 CSS 碼的框框內隨便點一下，框會變成淡藍色，然後按下 CTRL+A (選擇全部)，之後再按 CTRL+C (複製)，這動作的目的是把 CSS 碼全部複製一份到剪貼簿。

  

 

開啟記事本程式，按下 CTRL+V (貼上)，你馬上能看到 CSS 碼被複製進來，填滿了原本空白的記事本。接著，執行一下另存新檔，取一個好記的名字把檔案儲存起來。有了保險，就不怕意外狀況。

萬一需要復原，將保存的檔案內容複製並貼回 CSS 原始碼視窗，儲存後就立即回復原狀，好像什麼都沒發生過。

 

 

我使用中的兩欄式標準規格，版面寬度 950 點，內容寬度 670 點，文章寬度 650 點。以現行版面寬度為基礎，加上想增加的點數就等於新的寬度，而新的內容寬度與文章寬度跟著連動就可以了。舉例說，當我想把版面由 950 點放大成 1366 點時，差異值為 416 (=1366-950) 。新內容寬度就要跟著變動為 1086 (=670 + 416)，同樣的，新文章寬度為 1066 (=650 + 416)。

1366 點寬是什麼概念?  現今常見的筆電螢幕之解析度為 1366 * 768，調整後就是讓版面佔滿全部螢幕，有足夠寬度能一次顯示 1024 大圖 (痞客邦允許之最大尺寸)。當然版面寬度值，你可以隨意增減再試看看實際效果。別忘了，這個版面主要是給讀者看的，不是自己看的。若你的讀者用較小的視窗模式瀏覽，他調整範圍以得到較佳的圖文瀏覽經驗，但側欄可能看不到，這將影響廣告收益。

用 XLS 或電子計算器都可以簡單計算出新的設定值，下面是 XLS 的範例，我已經在試算表內定義好公式，只要輸入新的版面寬度，其他兩項均會自動加上差異值。  

 

 

回到瀏覽器的「編輯 CSS 原始碼視窗」，按下 CTRL+F (內文搜尋)，輸入以下關鍵字:

#container3 {

找到後，它下面的第三行會有一個「 width:950px;」，它定義了現在的版面寬度 950 點，將 950 改成 1366，以上是第一個動作。

#container3 {
overflow:hidden;
position:relative;
width:950px;

實際操作如以下圖片。

 

 

第二個動作，按下 CTRL+F (內文搜尋)，輸入以下關鍵字

#content {

找到後，它下面的第二行會有一個「 width:670px;」，它定義了現在的內容寬度 670 點，將 670 改成 1086。

#content {
float:right;
width:670px;
}

實際操作如以下圖片。

 

 

第三個動作，按下 CTRL+F (內文搜尋)，輸入以下關鍵字:

.article-content {

找到後，它下面的第一行會有一個「 width:650px;」，它定義了現在的文章寬度 650 點，將 650 改成 1066。

.article-content {
width:650px;

實際操作如以下圖片。最後請記得存檔，讓設定值生效。

 

 

測試一下的新版面，在瀏覽器下按 F5 鍵，讓畫面重新載入。剛剛調整的設定值已經發生作用，超寬版面出現了! 兩個黃箭頭標示的區間，由原來的 950 點變成 1366 點，這個尺寸下，照片可以用 1024 寬度一次全部完整呈現。

另一個現象是部落格上面的 banner 圖 (小熊公仔  + 兩部車子的那張照片)，原來是標準尺寸的 950 點 * 300 點照片。現在因為版面加寬了，所以系統自動幫我們重複貼圖，如黃圈圈處的拼接現象。這裡稍後也可以做調整，延續前面的寬度值，重新裁切一張 1366 點  * 300 點的照片檔當新 banner，換上去就 OK 了!

 

更換 1366 封面圖的方法，請參考這一篇: [真.教學]看了就會! 讓你的部落格耳目一新 (更換封面圖懶人包，痞客邦 Pixnet 適用))。

以上設定部份已經完成，不難吧!

 

 

順便介紹一個小技巧，萬一瀏覽到別人家的超寬版面，不太容易閱讀該怎麼辦? 此時可以活用瀏覽器的縮放比例功能，如 Chrome、  IE或其他都有支援，縮成 75%，讓頁面之全貌一次出現。

 

 

謝謝收看，趕快享受你的新版面吧!    

 

7/26 補充

有網友反應，版面變寬後，不論是部落格首頁或進入文章頁面，所有文章標題的前面都會出現一段空格。我檢查了本篇的修改後截圖，即倒數第 1 或第 2 張，文章標題也有類似留空現象。但因為我文章裡習慣會用藍字多寫了一次標題，所以當時加寬後，影響看起來比較不明顯。

CSS 碼中有對齊的指令需要跟著調整, 所以需要第四個動作，按下 CTRL+F (內文搜尋)，輸入以下關鍵字:

.title {

找到後，它下面的第二行會有一個「width:535px;」，它定義了現行的文章標題寬度為 535 點。比照上面的操作，將 535 改成 951，即「width:951px;」，存檔後便可以解決。(註: 535 + 差異值 416 = 951)

.date {
font-size:13px;
}

.title {
float:right;
width:535px;
font-size:15px;
}

 

7/26 15:16 補充

剛剛再切回 1366px 超寬版面(本文示範的)，有注意到另一個現象，1366px 版面的載入速度比 950px 版面明顯變慢，大約降低效率 30% - 40%，文章這塊先出現後，才會接著顯示側欄廣告與插件與其他。

 

我以前瀏覽其他網友的超寬版面也有同樣感受，不過這是正常現象，因為要處理的版面與圖素變多了 (註: 1366 * 768 vs. 1024 * 768, 約為 133%)。

 

你的讀者也許會覺得照片變大是好事，但相對載入或換頁的體驗卻變差了，這是需要注意的地方。

 

 

2018/10/19 補充

在此統一回覆多位網友的共同疑問。 

 

我的基本版型，是套用了 Pixnet 內建的一個藍天白雲樣式(名稱雲空)為基礎，才慢慢改起來的。改完後，它搭配 1024 的圖片是沒問題的，我網站就是實際效果。 

 

如果看過我兩篇教學文，改完後你的顯示仍不正確，通常就是樣式不相容。因為版面不一樣，CSS 碼會因位置等產生些微差異，不能直接通用。 (Sorry, 這點沒空幫各位解析，只能各位自己再研究)

 

比較簡單可行的方法，讓版型回到原點，就可以 1:1 做調整。換言之，換用成我原始的藍天白雲樣式，就一定可以解決。底下請參考:

 

部落格»樣式管理»樣式選擇

生活/攝影 --> 雲空 (by W08232003)
預覽: http://newguest88.pixnet.net/blog/preview/8287?sig=63cd42f456d164447374607b81a9885e

 

 

延伸閱讀 (Pixnet 超寬版面與大封面圖)

#1 超寬版面 DIY: [真.教學]看了就會! 調整痞客邦 Pixnet 文章版面寬度之懶人包 (2016版)

#2 更換封面圖:  [真.教學]看了就會! 讓你的部落格耳目一新 (更換封面圖懶人包，痞客邦 Pixnet 適用)

 

謝謝閱讀，Thank you! 敬請持續關注 鑫部落。 鑫部落。 心經營! (http://newguest88.pixnet.net/blog)

如果您喜歡這篇文章，歡迎到鑫部落粉絲團幫我們按讚(下面連結 or 左側欄)，Thank you!

合作信箱: mandy.sun@msa.hinet.net 

******************************** 

Title:調整痞客邦Pixnet文章版面寬度懶人包 看了就會! (2018版適用) [真.教學]

[真.教學]看了就會! 調整痞客邦 Pixnet 文章版面寬度之懶人包 (2018版)

(Pixnet-0316)