萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 多媒體工具

新浪博客去除左側「精彩圖片」模塊:CSS 注入法一鍵淨化閱讀界面

新浪博客左側固定的「精彩圖片」模塊(模組 ID:`module_903`、`module_904`)佔據視覺焦點、干擾閱讀、甚至拖慢頁面加載。無需安裝擴展,一行 CSS 代碼即可永久隱藏。本文提供最小成本解決方案。

核心原理:UserStyle / Stylus 注入 CSS

針對目標模組的 CSS 選擇器設置 `display: none !important`,瀏覽器渲染時直接跳過該 DOM 節點,不佔版面、不請求圖片資源、不執行關聯 JS。

三種實施方式(按推薦度排序)

方案一:Stylus / Tampermonkey 等用戶腳本管理器(推薦 ⭐⭐⭐⭐⭐)

  1. 安裝瀏覽器擴展:Stylus (Chrome/Edge/Firefox) 或 Tampermonkey
  2. 新建樣式,適用網址填:`blog.sina.com.cn`
  3. 粘貼以下 CSS 代碼:
/* 隱藏新浪博客左側精彩圖片模塊 */
#module_903,
#module_904 {
  display: none !important;
}
  1. 保存,重新整理博客頁面,左側模塊消失,正文自動佔滿寬度

方案二:瀏覽器原生 User Stylesheet(無擴展,舊版 Chrome/Firefox 支援)

  1. 找到瀏覽器用戶樣式表文件:
    • Chrome (舊版):`User Data\Default\User StyleSheets\Custom.css`
    • Firefox:`chrome/userContent.css`(需在 `about:config` 啟用 `toolkit.legacyUserProfileCustomizations.stylesheets = true`)
  2. 在文件末尾添加上述 CSS 代碼,保存重啟瀏覽器

方案三:臨時控制台注入(一次性驗證/臨時需求)

  1. 博客頁面按 F12 開啟開發者工具 → Console 標籤
  2. 執行:
(function(){
  var style = document.createElement('style');
  style.textContent = '#module_903,#module_904{display:none !important}';
  document.head.appendChild(style);
})();
  1. 即時生效,關閉標籤頁失效

💡 進階:同理可隱藏其他干擾模塊

右鍵目標元素 → 「檢查」→ 獲取 ID/Class → 加入 CSS 隱藏列表。常見新浪博客干擾模塊:

  • `#module_901`(博主推薦)
  • `#module_902`(最新評論)
  • `.sidebar_ad`(側邊欄廣告)

⚠️ 注意事項

  • 新浪博客若改版更換模組 ID,需更新選擇器
  • 若使用博客「管理後台」,請在 Stylus 中排除 `control.blog.sina.com.cn` 域名,避免誤隱後台功能模塊
  • 此法僅隱藏前端顯示,不影響後台數據、不違反用戶協議

一行 CSS,還你純淨閱讀空間。把精力花在寫作與思考上,而不是與佔據側邊欄的「精彩圖片」搏鬥。

copyright © 萬盛學電腦網 all rights reserved