【部落格實戰】10 | 痞客邦部落格的版型CSS樣式表修改 (2025年6月更新)

72 則留言

1. 感謝歐大撥空回覆~我有尋找想隱藏的欄位名字，但並不是「你可能會有興趣的文章」，這個我之前有搜尋到，而是「你可能感興趣的話題」

   這東西最近我才注意到，以前好像沒有。是在我首頁點進去文章、觀看單篇文章內文的時候，他會直接遮住我的文章標題，然後下面跑出一行: 「會員福利 – 輕鬆創業當老闆：資深品牌顧問免費預約，線上洽談，省時又省力！」之類的廣告。

   然後我在CSS語法裡面，雖然能夠調整首頁每篇文章標題、空白、字高等，但從部落格首頁進入「單篇文章」以後，一直找不到怎麼去調整標題跟字高，我會再試看看要怎麼去處理這問題，可能只有我找不到~先謝謝歐大

   • 我知道你的意思，有一位欄位你不想讓它出現
     怎麼辦?
     答：找到那個欄位的名稱(在瀏覽器按F12)，然後設定隱藏即可，我就是這樣設定的

     請參考：https://ofeyhong.com/12224528388/

2. 您好，我想請問一下，最近內文點進去發現在標題下方會有”你可能感興趣的話題”這種廣告出現，請問有什麼語法可以移除嗎? 謝謝

   • 簡單講就是要到後台的CSS中，把你不想要看到的欄位隱藏
     語法是：display : none;
     但你先找到你想隱藏的欄位是什麼#名字

     以上如果還是搞不懂，請搜：痞客邦 「你可能會有興趣的文章」隱藏 ，就有教學了

     多說一句，你的部落格的字，太小了，改大一點，一樣是到CSS中改

     搜一下，教學很多

3. 請問如果是用版面欄位快速設定，他的簡介只能顯示短短的一行，應該怎麼處理呢?

   • 「版面欄位快速設定」只是一個簡單初步的設定
     如果您希望能「自由設定」，那就是要直接修改部落格版型的「CSS原始碼」才行
     我也是都直接修改CSS原始碼的

4. 謝謝分享

   • 不客氣~~~~~

5. 你好，我就是用基本款下去小改的，字大一點，置中或靠左，，，謝謝~

   • OK，總之要花點時間 慢慢試

6. 感謝教學。我做好我的版型了，但是我”內文寬度要加寬”那裏還是找不到怎麼修改。我在後台輸入.article-content之後找不到width，我就自己輸入再加上:1000px;(先放大確定有變化後再調整)但是寬度一直都沒有變動，我再找時間查CSS語法教學看是哪裡出錯了。謝謝!

   • 建議用痞客邦的新版型
     https://ofeyhong.com/12225242647/
     這樣會比較快一點

     您要自己改版型也行，但就是要花點時間慢慢試

7. 謝謝分享

   • 歡迎光臨~~~

8. 您好，部落格橫幅圖片靠左，請問要怎麼將圖片變成置中?

   • 從後台的css中調整

     說明：https://ofeyhong.com/12224691945/

9. 謝 歐飛大，使用後讓一般的版型已改進些
   看來順眼了不少

   • 歡迎光臨~~加油

10. 請問一下，你部落格的部落格大標題下方有
    關於我、開箱&選購、電腦組裝、電腦維修、教學文章….等等
    這些按鈕，我該要怎麼樣Google關鍵字才能找到這些語法?

    • https://ofeyhong.com/12222959223/

11. 我知道歐大不太看FB私訊，以電子郵件為主，但我還真不知道歐大已經3年沒開FB私訊了~XD
    謝謝歐大的回答，我了解了~

    • Fb私訊，我看了也沒用，因為不能回
      一回沒完沒了，而且我也回不完~

      所以我目前都是只回部落格留言及EMAIL。

12. 歐大您好，我說的側欄圖片就像你的部落格右上「社群金點賞」那樣，我已經用FB把我的截圖傳給您看了~

    • 你跟我不熟喔
      我已經三年沒有打開FB私訊了，我不敢開，排山倒海的訊息，我看不完。

      但我聽懂你的意思了。
      如果只是問「社群金點賞」，這個沒辦法用語法，只能用空格去「純手工」調整一下
      https://shunnien.github.io/2017/06/03/html-nbsp-emsp-emsp-difference/

13. 歐大，請教一下，側欄那些由痞客邦提供的圖片，要加入什麼參數才能讓它置中呢？謝謝~

    • 可以截個圖嗎？ 這樣比較清楚

      請直接Google 「css 圖片置中」這樣就有語法了

      但我猜你可能是需要底圖的置中，或是圖片的精準定位
      底圖的話，請捜底圖的語法

      精準定位，關鍵字就是「 css 絕對位置」

14. 歐飛大大，請問一下，
    請不要在寫文章時「直接在編輯區調整文字大小」，
    文字大小請統一在後台調整CSS。
    如果已經在編輯區調整過文字大小呢？
    有些之前的文章文字比較小，
    這樣子要怎麼統一調整？謝謝！
    目前在試著調整版型中。

    • 沒辦法，我的建議是這樣，重新編輯。

      也就是整個複製，然後貼上「純文字」 重來。

15. 謝謝歐飛老師，受益良多，但我想請問一下怎麼做出像您一樣的文章標籤？我甚至找不到我的tag要怎麼修改字型，可以請歐飛老師幫忙確認標籤嗎？謝謝你

    • 【網友詢問】歐飛你的部落格版型是怎麼做的？ (CSS樣式表)
      https://ofeyhong.com/12224528388/

16. 因為沒時間修改CSS，所以一直以來都是直接套用痞客邦提供的模板，這幾年螢幕真的越來越大，看著自己的部落格的文章欄位越來越小、字也越來越小，看到快鬥雞眼了，無意間看到歐飛大大你的文章，讓我打起了精神，修改了自己的部落格版型，非常感謝你文章的加持，我現在對我的版型很滿意XD

    • 感謝捧場~~~

17. 請問要怎麼改才能讓側欄像您的這樣寬？我改了之後欄側字體回復成原來的大小了，無論數值是改大改小都一樣，謝謝。

    • 請參考：https://ofeyhong.com/12224528388/

18. 請教歐飛老師：

    #container3 {
    overflow:hidden;
    position:relative;
    width:1040px;
    background:#fff;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    -moz-box-shadow:1px 1px 2px #aaa;
    -webkit-box-shadow:1px 1px 2px #aaa;
    box-shadow:1px 1px 2px #aaa;
    margin:15px auto 30px;
    padding:25px 0 10px;
    }

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

    #links {
    float:left;
    width:200px;
    overflow:hidden;
    }

    這是版面加寬之後的數值，左側欄位與內文之間的距離太寬，左側欄位的文字不夠寬，找不到語法，求破解，非常感恩您。

    • 如果你有提供你的部落格，我直接幫你看一下會快一點

      只是一連串的CSS要我看，我看不出個所以然。

      請參考：https://ofeyhong.com/12224528388/

19. 非常感謝歐飛先生清楚細心的教學，解決了 ohyeah！我會再爬您其它的文，自己慢慢改，超級感恩 ：) 祝福您撿到錢啦 XD

    • 感謝捧場~~~

20. 請問歐飛大:
    把文字加入連結網址後，文字就會變成向右對齊，在語法哪裡可以做修改?

    • css語法在後台可以修改。

      因為你說文字加入連結網址會變成向右對齊，可以在連結的地方被設成 向右對齊了，請改成靠左對齊。

      如果你真的搞不定，有一招，就是復原，復原回原來的css，因為沒道理設定連結就變成向右對齊，肯定是有哪裡被改到了

21. 請問一下，因為痞客邦預設讓文章的前面幾行顯示在首頁上，那有沒有辦法讓文章的第一行的圖片顯示在首頁上，然後點進去文章之後就看不到第一行的圖片呢？

    • 痞客邦沒有這個功能。
      其實就算自架站我也很少看到您說的這種功能~~

22. 想學習css 感謝您的分享

    • 不客氣~~~~~

23. 請問我將版型變寬後，該調的都調好了，只剩文章標題底圖，重複出現，請問要去哪裡修改？謝謝

    • 一樣是透過css控制 (請插尋關鍵字 css 背景圖)
      不過以您的情況來說，我會覺得應該直接做一張大一點的底圖給標題用，這樣比較簡單

24. 痞客系統微調，點進文章看下面的tag標籤格式都跑掉了＝ ＝

    多了「全站熱搜」的標籤到底什麼鬼啦！真的是擾民。

    • 確實擾民，不過我可以理解痞客邦為何要這樣做。

      他們現在是把部落格往「社群」的方向推，期望建立一個痞客邦的大社群。

25. 感謝!非常實用的文章!!受益良多!
    從0開始摸索關於部落格版面的修改,
    多少也有了一些頭續。

    一口氣就弄了大半天
    原本是用基本款三攔式來改
    不過一直用不好
    我最後還是使用了歐大的樣式自己微調
    感謝分享

    • 不客氣~~~~

26. 求解 側欄如何讓他靠右呢? 他一直卡在中間…. CSS該用什麼解決呢~? 謝謝!!!!

27. 受用的很，謝謝歐飛大

    • 不客氣~~~~

28. 老實說，我今天是第九天研讀歐飛大的部落格，絕版的<活用XHTML/HTML+CSS>並不難已經從露天拍賣買到，另外幾本推薦書正在寄送路程中，再加上歐飛大的<部落格實戰系列>，我好像已經編排出來了三欄位版型，當然有不少未知細節尚未發現，歐飛大說：先求有，再求好。謝謝歐飛大。

    • ok，加油，真的是先求有，再求好，邊寫邊改

29. 能不能教一下如何將二欄位修改為三欄位？

    • 我建議您直接選一個三欄式的版型，再來改，這樣會比較快一點。

30. 感謝你的回覆 ^^

    • 不客氣~~~~~

31. 感謝你的分享~
    想問一下”搜尋關鍵字–搜尋 #container” 這搜尋欄位去哪找呢??

    • 在瀏覽器按 Ctrl+ F

32. 謝謝分享 🙂

    • 歡迎光臨~~~

33. 請問如果使用的版型不同，是不是就不適用本集教學了呢？

    • 版型那麼多，當然不可能都一模一樣，本文只是一個範例，可以讓您參考用。

34. 好實用!!! 這兩天總算調整好一些細節了(ﾉ>ω<)ﾉ

    • 加油~~~~~~~~~~~~~~~~

35. 不好意思 方便問一下 怎麽換底圖和加大内文寬度？

    您的文章：我們把寬度從980px改成1230px之後，你會發現最上面的底圖不夠大，怎麼辦？ 要換底圖。
    再來是內文右邊多了空白，怎麼辦？ 就是把內文的寬度加大即可。

36. 請問一下，“內文的寬度加大”，是要找什麼關鍵字呢？ 還是怎麼做，謝謝教學。

    • .article-content ←內文寬度的css

      例如：
      .article-content{
      width:680px;
      }

37. 感恩分享 謝謝您 功德無量

38. 謝謝教學♥