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

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

 

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

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

 

Pixnet-0316-03

 

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

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

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

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

  

Pixnet-0316-04

 

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

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

 

Pixnet-0316-05

 

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

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

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

 

Pixnet-0316-06

 

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

#container3 {

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

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

實際操作如以下圖片。

Pixnet-0316-07

 

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

#content {

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

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

實際操作如以下圖片。

 

Pixnet-0316-08

 

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

.article-content {

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

.article-content {
width:650px;

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

 

Pixnet-0316-09

 

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

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

 

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

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

 

Pixnet-0316-10

 

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

 

Pixnet-0316-11

 

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

 

7/26 補充

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

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

.title {

找到後,它下面的第二行會有一個「width:535px;」,它定義了現行的文章標題寬度為 535 點。比照上面的操作將 535 改成 951width: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%)。

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

 

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

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

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

 

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

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

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

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

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

(Pixnet-0316) 

文章標籤
創作者介紹

鑫部落 心經營!

鑫部落 發表在 痞客邦 PIXNET 留言(24) 人氣()


留言列表 (24)

發表留言
  • 夢想與勇氣
  • 的確!現在營幕的基礎解析度已由1024升高為1366,可考慮順勢調整了。好文章喔!
  • 夢大! 多謝賞文支持! Thank you!

    鑫部落 於 2016/07/24 12:54 回覆

  • 鄉下婦
  • 鑫大~你真是太厲害了,感激不盡,,皇恩浩蕩。我在慢慢研究。唉~我應該會請小朋友代為操作(淚)再次感謝你。。。
  • 李姐, 不客氣!

    鑫部落 於 2016/07/25 10:26 回覆

  • 賴小花
  • 您好鑫大
    我依照您的文章步驟已經完成修改(謝謝您~~灑花~~)
    但是想請問您,為什麼我的標題前面都有一個很大的空格,這個可以改嗎??
    另外想請問可以把旁邊的文字變大嗎?
    呵呵~~~謝謝您喔!!!^_^
  • 賴小花大謝謝賞文

    (1)可能原因: 我的版面基礎是" PIXNET 兩欄式,廣告(側欄)在左文章靠右", 妳的是"廣告(側欄)在右文章靠左", 有對齊的 CSS 參數需要調整.

    (2)"旁邊的文字變大", 是指那部份, 側欄區?

    關於(1), 我看了這篇的修改後截圖, 我的文章標題也有留空現象, 因為我文章裡習慣會用藍字寫了一次自己標題, 所以看起來比較沒影響. 不好意思, 以上問題, 有空再來檢查 (現在全力趕稿中). Thank you!

    標題整個往後移問題解決了, 請參文章下面 7/26 補充(粉紅色):

    (1366 超寬版面標題圖變兩個以上, 我知道怎麼弄, 但這有一些步驟, 需要寫另一篇文)

    鑫部落 於 2016/07/26 15:58 回覆

  • 鄉下婦
  • 我用別台電腦登入,更改後的也跟小花一樣(傻)
  • 李姐,

    標題整個往後移問題解決了, 請參文章下面的 "7/26 補充"
    (1366 超寬版面標題圖變兩個以上, 我知道怎麼弄, 但這有一些步驟, 需要寫另一篇文)

    Thank you!

    鑫部落 於 2016/07/26 16:00 回覆

  • 鄉下婦
  • 我用別台電腦登入,更改後的也跟小花一樣(傻)鑫大~我是要像包子爸照片那樣大,不是標題圖變兩個。咋辦哪~~~(拜託)
  • 李姐, 不好意思!

    (1)我看了這篇的修改後截圖, 我的文章標題也有留空現象, 因為我文章裡習慣會用藍字寫了一次自己標題, 所以看起來比較沒影響.

    (2)文章裡有提到, 調寬度後標題圖變兩個連續並排是正常的, 標題圖需要重新裁剪成新尺寸後更新符合的新尺寸

    不好意思, 以上兩個, 有空再來檢查 (現在全力趕稿中)

    鑫部落 於 2016/07/26 13:52 回覆

  • 鄉下婦
  • 還是以後的上傳的照片都用1024?可我最早傳的照片是1024現在也沒變大說
  • 以前或現在都將以 1024 呈現. (我現在也正測試 1366 超寬版面)

    鑫部落 於 2016/07/26 15:12 回覆

  • 賴小花
  • 解決了耶!!!
    鑫大太厲害了!!!!
    (膜拜中.......)
  • 多謝回報問題 & 謝謝 賴小花大賞文, Thank you! ((若覺得文章有用對您有幫助, 歡迎點左側上方 鑫部落 FB 粉絲團 連結, 幫我們 讚 一下 Thank you!)

    鑫部落 於 2016/07/27 10:58 回覆

  • S&N
  • 謝謝你的分享, 想要請問你
    如何設定使標題底部空白?
  • 不好意思, "使標題底部空白", 不懂您的意思, 有 sample 嗎? Thank you!

    鑫部落 於 2016/09/23 16:42 回覆

  • 蔡阿咪
  • 有沒有教學可以改文章標題的語法呢?看有些部落客的標題超長,文字也都沒辦吃掉,不知道怎麼做的?
  • 不太懂您要的. tks

    鑫部落 於 2016/11/05 01:13 回覆

  • 何媽=winnie
  • 謝分享~~好實用!!
  • 歡迎幫我按讚(右邊浮動粉絲團)鼓勵. Thank you!

    鑫部落 於 2016/11/23 14:22 回覆

  • 悄悄話
  • 悄悄話
  • rock3812a
  • 太厲害了!!
    但還有問題想請問一下....
    照您的方法改完之後,文章的標題的確有調整正常了,但文章目前還是有小小問題。
    就一篇文章來看,圖片還是原本大小,沒有因為將版型調整成1366px的版面後跟著變大,而文字也是,然而文章標題也是原本大小,所以看起來怪怪的。
    即是整篇文章看起來還是原本小版型的樣子,沒有因為放大版面寬度後,整篇文章跟著放大。
    想請問這樣的情況還可以修改嗎?
    謝謝~
  • updated:新年快樂, 請問當初您上傳圖片是用那一種尺寸? 小,中,大? 如果是大圖 (1024),取消後台自動縮放功能,就直接相容新版面. 如果您當初是小,中, 那麼就必須重新上傳. (好像您換了一張大桌面,但手機沒有換過,所以顯得小) 文字的部份,建議換大一點的如 12 pt. Thank you!

    新年快樂!
    您好! 請粉絲團按讚留言. Thank you!

    鑫部落 於 2017/01/28 15:04 回覆

  • 身體好健康
  • 今天是母親節,先祝你母親節快樂
  • Thank you!

    鑫部落 於 2017/05/14 22:38 回覆

  • 春霧
  • 我的部落格以 1366X600的方式去做

    可是旁邊的空白看了版主的提醒改了還是去不掉

    難道不能用600嗎?
  • 請1:1 copy, 因為這是用修改方式, 其他沒有動到. 版面不一樣位置會不一樣, 您可參考這組: https://panel.pixnet.cc/theme/blog/8287 雲空 (by W08232003) 我是以它為基礎去改的, 記得粉絲團按一下. XD Thank you!

    鑫部落 於 2017/07/04 22:08 回覆

  • 黛咪小姐
  • 太感謝這篇0基礎都看得懂的樣式改版文章,但有個小問題『取消後台收放功能』目前新版好像找不到了?所以圖片還是以前小小張的,請幫忙解惑,謝謝
  • 謝謝賞文. 『取消後台收放功能』是指"後台自動縮放功能", 我不使用新版, 它對圖片大小支援不優, 問過客服無解, 若新版沒有請回舊版使用. 記得右邊浮動粉絲團 &
    文章都按一下(已按過不用再按). XD Thank you!

    鑫部落 於 2017/07/09 11:23 回覆

  • 黛咪小姐
  • 好呦~謝謝大大回覆!
  • 回舊版 OK 嗎?

    鑫部落 於 2017/07/09 15:41 回覆

  • 悄悄話
  • 悄悄話
  • Gail Wonderland
  • 真感謝您 這就是我想呈現的部落格相片畫面 以前都會被遮掉 現在看起來美觀多了 您詳細的一步步 講解 真清楚 多謝您喔!
  • 謝謝賞文, 很高興幫到你. (歡迎右邊浮動粉絲團B粉絲團讚一下 (已說讚就不用再按)) Tks!)

    鑫部落 於 2017/08/17 22:18 回覆

  • 魚兒燕
  • 您好:
    想詢問修改失敗請教,目前照設定改了,有出現兩個問題點
    1.我的.article-content原本裡面就沒有width:XXXXpx;的選項,然後我自己加入了
    .article-content {_height: 1%;overflow: hidden;_overflow: none;}
    2.全部設定照樣改完後,出現原本文字邊框的線還在原地,其他文字、圖皆行跨了這個邊框的線。

    想請教我該如何調整原本格式的邊框的線,以便能包住圖、文在內?
    順問原本預設的痞客邦粉紅色的那個還能選回來嗎(已經隨便選了其他樣式了)?
  • Hello, (1)自己加東西, 需要熟悉碼的用法 (2)選原來版面就會回原版面. (3)請1:1 copy, 因為這是用修改方式, 其他沒有動到. 版面不一樣位置會不一樣, 您可參考這組: https://panel.pixnet.cc/theme/blog/8287 雲空 (by W08232003) 我是以它為基礎去改的, 記得粉絲團按一下. XD Thank you!

    鑫部落 於 2017/10/01 12:53 回覆

  • 魚兒燕
  • 關於(2)樣板眾多.....沒看到原預設版
    在請假一下,關於CSS是否有可以修改框線的值的屬性可以設定?
  • 請自己搜一下,一定有。Css不熟。Tks

    鑫部落 於 2017/10/01 15:15 回覆

  • 魚兒燕
  • 哈囉,關於原預設樣式,已與官方確認,官方並未提供預設樣式及回復預設功能,感謝。

    想再請教新問題,關於您所選的樣式,樣式中的相簿、部落格、留言 、名片都是英文版(Album 、Blog 、Guestbook 、Profile),請問CSS中是否可以修改成中文相簿、部落格、留言 、名片呢?

  • Hello, (1)指的是你自己當時原來選的樣式. (2)請抓出CSS碼, 分析, 有字串就可以置換.

    鑫部落 於 2017/10/05 12:49 回覆

找更多相關文章與討論