我發現痞客邦裡資訊豐富，但是閱讀經驗十分痛苦，所以想幫個忙：如果你也在痞客邦寫文章，但是也苦惱於不能提供比較舒適的版免面，這篇文章提供一些要點。
在台灣以中文在 Google 搜尋許多比較生活類別的關鍵字的時候，會找到很多來自痞客邦的網頁，多到令人驚訝，不容忽視。痞客邦裡各部落格的文章，最多的是每張圖夾一兩行字一路往下排開的遊記或食記。通常是手機隨手拍攝的畫質，臨時或憑記憶給每張圖補上簡短的說明。版面沒有特色可言，使用者體驗（UX）則是：一路滑下去，到沒耐心為止。加上免費痞客邦帳號的頁面廣告超級多，有全頁蓋版的，佔據四面八方角落的，突然跳出來嚇人的，自己播放說唱起來的，不勝枚舉，每一個都比該帖的本文搶戲，喧賓奪主。
使用痞客邦第三天，就好像突然搬進去一間員工宿舍，有很多不習慣，非得打掃裝修一下，雖然已經住在裡面了。這三天來我最在意的是
- 廣告好多
- 字型很醜
- 版面好窄
- 這些是啥
- 版型受限
我真的就像大掃除一樣，用趴在地上刮陳年口香糖的精神，把他們一個一個清除了。原則上這不是一篇教學文，因為我在痞客邦還非常新手，說不定前輩們早就有很多討論，而且問題都解決了（果真如此的話，請善心人士提點我一下喔，不要讓我一味的獻醜才好）。然而，負責起見，我還是說明一下：網頁的版面問題，當然都是從修改 HTML / CSS 做起啊，到哪裡改呢？
HTML
在編輯文章的介面，有一個「原始碼」選項，按進去，就可以編輯 HTML 原始碼。例如，你可能會想要用一個 <div> ... </div> 打包兩個圖並排，可以直接在這裡改。其實可以用其他編輯器寫好了之後，再剪貼過來。
CSS
在痞客邦部落格後台「管理樣式」的能裡面，你可以套用現成的樣式，設定基本元件以客製，或直接編輯 CSS，等三個選項。我前面說的大掃除苦力，都是直接去改 CSS 原始碼。
如果你從來沒有直接編輯過 HTML 或 CSS，請不要氣餒，人生還有太多美好的事物等待你去體驗，不一定要拿你美好的週末時光和 HTML/CSS 搏鬥，要改善網頁品味，也不是每個細節都非得親自修改，還有很多好用的工具。只是，現下，我看哪裡有問題，我就自己去處理，剛好都還搞得定，所以才在這裡分享的。
以下我們逐項來看前面所說的問題：
1. 廣告好多：
大部分的廣告都是一塊一塊的 HTML 元件，所以哪裡跳出來，就從哪裡找出該元件的類別（Class），然後在 CSS 給它設一個
display: none;
就可以了。比較麻煩的是有一些沒有預先定義類別也沒有指定 ID 的，只能用一些 CSS Selectors 相對位置的方法，把他們找出來，並且刪掉。例如我用：
#counter + div {
display: none!important;
}
把放在「人氣計數器」後面的「某個廣告欄位」藏起來了。在處理它的時候，它正好在輪播一套韓式熟女化妝法、一碗什錦麵、和一個喪禮的畫面。這樣的廣告，我真的不需要，我想我的朋友們也不需要，可以放心關掉。我在別人的網頁還看到更狠的方法：列舉了好幾種類別名稱之後，加了好幾個 CSS 語法，像這樣：
.ghost, ... (some other six lines listing all the elements to be blocked) { position: absolute !important; left: -999999px !important; display: none !important; visibility: hidden !important; opacity: 0.0 !important;}還給這類別取個名字叫做鬼（.ghost），非得消滅他們殆盡就是了，看著有一種說不上來的快感，哈哈。其實，每年花 699 元台幣，可以把廣告清理得更乾淨，但是，這是一個奇怪的處境：因為受不了所以花錢清理垃圾，和因為很喜歡所以花錢採買好物，是兩種截然不同的心情，小本經營，只能選擇後者正面採購。在痞客邦之外，我是租了一隻每個月 5 美金的虛擬主機，自己架 LAMP Server 掛多站點 Wordpress，沒有任何免費部落格限制之外，還隨時可以用這部遠端的 Linux 做很多事，比花699台幣只為了關掉廣告值得很多。
2. 字型很醜
覺得字型很醜可能是我個人的偏見：我對微軟新細明體有生理厭惡，它是一種瘦弱、不勻稱、不平滑的字型。新細明體在 Windows 裡沒有反鋸齒（anti-aliasing）優化，使得它看起來像是用點陣印表機印出來的草稿，夾雜英文字的時候，更是可以讓整篇文字瞬間失去任何專業質感。我去到哪裡，用什麼機器，第一件事就是把新細明體換掉。我對微軟正黑體沒有意見，而且它也算是普及，所以，我在 CSS 裡的字型設定是這樣的
font-family: "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans", Arial, Times New;
Google 的 Noto 字型算是很常見的，而且免費，所以把它加進來。雖然我的電腦平板和手機都不會缺這些字，如果用戶端既沒有微軟正黑也沒有 Noto 黑，很可能還是會只看到新細明體：表示該用戶可能還沒有體驗過其他字型的網頁，可能用的是比較老的 Windows 系統。可以想見，除了字型不美，我的網頁和他的 IE（是的！預期那是沒有 Edge 瀏覽器的版本）可能還有很多不相容，會排版得很恐怖。無所謂，眼不見為淨。
3. 版面好窄
可能是基於要支援較老舊設備的相容性考量，幾乎所有的現成的版型樣式版面都很窄，不超過 960px，還要擠三欄進去，中間可以寫內文的地方，所剩有限，單圖夾短句可以，但是要稍微做點排版，就很為難了。這個，我也是去改 CSS。改動的部份是：
#container3 { overflow: hidden; position: relative; width: calc(100%-40px); max-width: 1280px;}#content { float: left; width: calc(100% - 240px);}#links { float: right; width: 200px; overflow: hidden;}我原先沒有做 1280px 的上限設定，這樣在 1920x1080 Full HD 的螢幕上，頁面會寬得很嚇人，從最左邊到最右邊讀完一行換一行，你會發現自己根本一直在搖頭：左右左右左右，跑15吋，好累。所以後來加了 max-width: 1280px; 來限制。
- 側欄（
#links），我只留一個，固定寬度浮動靠右； - 本文（
#content）則是扣掉側欄寬與邊界後，浮動靠左。另外， - 當螢幕寬不到 768px 的時候，直接把側欄藏起來。
@media screen and (max-width: 767px) {
#content { width:100%; } #links { display: none; } } 現在，拉動視窗有寬度變化的時候，頁面會跟著變動，保持一個比較有效運用的空間。
4. 這些是啥
這一個部份，不是宿舍地板上的陳年口香糖那麼難清除，只需要把不要的雜物都收好就好了。痞客邦的部落格後台有「側欄管理」選項，進去裡面，把不必要的都收掉就好了。其中幾個我很驚訝的元件，預設是顯示在側欄裡的，包括「站方公告」（好長喔！有十幾二十條，好多過季的就資訊欸！）、「Powered By」、「我去誰家」，都是：這些擺在客廳（首頁）是要給誰看給誰用的啊？還好，只要按住這些不要的項目，拖著往最右邊欄放下就收掉了喔！
對啊！這些完全不必動到 CSS 費力整理卻「一直就在那裡」的東西佔滿頁面，就像一個被拿來當作儲物間的會客室，客人來了，會不好意思坐在你的雜物上面，手足無措直接想離開的啦！我知道痞客邦為了有獲利的營運模式傷透了腦筋，但是這種想錢想瘋了的完全失去品味的設計，實際上還是幫不了忙賺不到錢錢。
基本的待客之道：對讀者沒有幫助的資訊，都拖到右邊丟掉，不要拿出來亂。
5. 版型受限
相較於 Facebook 和 Instgram，部落格軟體/服務最大的不同就是：並不是手機上隨時上稿，就可以有整齊美觀的畫面。如同前面說過的，痞客邦裡各部落格的文章，最多的就是每張圖夾一兩行字一路往下排開的遊記或食記。通常是手機隨手拍攝的畫質，臨時或憑記憶給每張圖補上簡短的說明。版面沒有特色可言，使用者體驗（UX）則是：一路滑下去，到沒耐心為止。其實這不能怪痞客邦，部落格的頁面，通常被期待能接受 HTML 語法，而 HTML 並不是隨手拖放就可以排版得好看的。所以大部分的人都是：放一張圖，打幾個字，再放一張圖，再打己個字，這樣編寫旅行/美食流水帳，說起來很可惜：比如，以這樣的模式處理自己的婚禮的貼文，好像會覺得很過不去，總是不要做得比婚宴上那份投影片遜色太多吧？不過就標準的 HTML/文字編輯器，真的也變不出什麼花樣來的，很多地方就得靠自己多看多學了。
我自己用 CSS 做了兩個排版元件, 一個是分欄排版，一個是直書文字框。語法分別如下，懂 HTML/CSS 的人看了就知道怎麼用。如果你看不懂，但是覺得效果很好，也很想要試試看，那麼請不要客氣留個話，如果想知道的人多，我在扎扎實實的寫一篇教學文出來。
寬螢幕自動兩欄的排版
原則上在你的文字外面包上一層 <div class="two-columns"> 你的內容 </div> 在大於 1024px 寬的銀幕就會自動以左右兩欄排版。
@media screen and (min-width: 1024px) {
.two-columns {
column-count: 2;
column-gap: 40px;
column-rule: 1px double #0000ff;
}
.two-columns img {
width: 96%;
text-align: center;
margin: 0 auto;
display: block;
}
}中文直式排版專用格式
如果文字裡面沒有太多英文或數字，使用 <div class="vt"> 你的內容 </div> 的語法，這個範圍內的文字，會是由上到下由左到右的直式排版。拿來做文字創作，特好看，請務必試試看！
.vt {
writing-mode: vertical-rl;
float:right;
height:100%;
width: 100%;
box-sizing: border-box;
font-size:18px;
line-height: 1.7em;
overflow-x: scroll;
padding: 1em;
}我必須承認，在寫作這篇文章時候，有點懷疑自己在做啥，好像對自己並沒有幫助。但是卻很想多幫助一些人，如果痞客邦的朋友有人因此改善了自己的頁面，大家互相幫忙，讓台灣最豐富的使用者產出內容族群可以有更告品質的作品，長久來講是有意義的。否則，以往每次我搜到痞客邦文章，都是直接跳掉，真的不想看，那我還在這裡面寫這麼落落長是在幹嘛啦！對了，以上作業，沒有花一毛錢，我相信你也做得到。
留言列表
電腦 (1)