零基础博客园皮肤美化攻略

哈哈，想改很久，终于动手了\愉快

没有css基础，直接乱来\墨镜

1. 获取皮肤的 CSS

注：此处使用的是 Edge 浏览器

在“我的博客”页面，F12 打开“源代码”，如下：

右键，另存 css 文件 bundle-imetro.min.css：

用 IDE 打开文件，它是这样的，只有一行，没有排版：

我用的 VS，全选，然后快捷键 Ctrl + K + F 一键格式化：

用同样的方式，保存blog-common.min.css

2. 审查网页上的元素

注1：查找元素这块不想看的可以直接跳过，跳到 3. 更改元素，里面直接写了对应代码如何修改

注2：想边查边改的可以看2.1，再看3.1，接着看2.2、3.2，这样……

2.1 找到背景图片元素

在“我的博客”页面，F12 打开控制台，查看“元素”，如下：

注：鼠标悬浮的时候还会有预览图

就是这里，要做的事情，是把它替换成你想要的图片的 URL：

2.2 找到H1指示条

标题旁边的那个绿色的小条，一改代码就丢了，稍微看了看，发现它也是张图片，由于源代码里是相对路径，所以显示不出来：

2.3 找到合集目录元素

3. 修改代码中的元素

3.1 修改背景图片

注1：我是把图片上传到了图床

注2：要是不知道怎么搭建图床，看这篇文章Typora图床搭建 - LI,Yi-han - 博客园，做到第三步3. 配置PicGo

打开文件 bundle-imetro.min.css

Ctrl + F 关键词搜索“background-image”，找到对应位置：

​ a. 替换背景图片的 URL

​ b. 添加一行代码，作用是实现图片等比例缩放，覆盖整个容器（可能裁剪边缘）

background-size: cover

​ c. 别忘了在第三行末尾添加分号

​ d. 保存修改

看看替换完效果如何？

在博客园的设置页面，页面定制CSS代码 这里，勾选选项，然后将 bundle-imetro.min.css 文件的所有内容直接复制粘贴到代码框中：

拉到页面最末尾，保存配置：

刷新博客主页，可以看到当前效果：

3.2 修改H1指示条

打开画图，选择你想要的颜色：

油漆桶填充画布：

保存成图片，然后裁剪尺寸，宽20px，高117px：

将结果图logo.png上传到图床：

Ctrl + F 关键词搜索“.postTitle”，找到对应位置，改图片的URL：

现在的效果：

注：从这里开始，复制粘贴代码的过程就不赘述了，和3.1中一样，所以直接给出结果

3.3 修改其他的颜色

这里我偷懒取了个巧，没有再查找元素

可以看到，CSS代码框中是有颜色预览的，如下图：

可想而知，一键把所有的颜色编号对应替换掉就完事了

用记事本打开 bundle-imetro.min.css

将颜色编码全部替换，保存：

现在的效果：

3.4 修改合集目录颜色

注：这块是AI混出来的，原理我不清楚，源代码在blog-common.min.css里面。

在文件 bundle-imetro.min.css的最末尾加了这样一段代码：

/* 直接设置hover背景色为#2A52BE，确保生效 */
.clickable:hover {
    background: #2A52BE !important;
    /* 可选：如果背景变深，把文字改成白色更清晰 */
    color: #fff !important;
}

    /* 同步修改hover时链接的文字颜色（如果有链接） */
    .clickable:hover a {
        color: #fff !important;
    }

同样，把最终的结果代码全部粘贴到页面定制CSS代码中，效果如下：

——end——

编辑于2026-02-01 22:32:22