本站博客使用了nisarg主题, 在搭建完成后, 发布文章, 发现文章标题以及正文的字体大小比例很诡异, 段落间距也是, 强迫症表示很不舒服.

所以想要修改字体大小、以及段落间距. 大致思路如下, 其他主题也可按照此思路更改.

1 确定需要修改的内容

1.1 确定样式内容

在浏览器中查看发布的文章, 以Chrome浏览器为例, 右键使用 [检查] 功能, 确定需要修改的内容:

步骤说明:

① 点击抓手工具, 选择页面中需要检查的元素;

② 点击要检查的元素, 这里检查文章标题;

③ 元素窗口中将实时显示文章标题所对应的HTML页面中的内容;

④ 在样式 Styles 中, 可以看到文章标题是二级标题(h2), 其所属的 class="entry-title" 的样式以及对应的文件都有指出, 这里指向的是 style.css 文件.

继续顺藤摸瓜, 可以查看到该二级标题 (h2) 的字体的定义也在 style.css 文件中, 而标题的大小是在 bootstrap.css 文件中.

1.2 测试合适的样式

(1) 直接在Styles中修改样式, 比如这里把 margin-bottom: 14px; 修改成 20px, 查看效果;

(2) 再把h2的 font-size: 24px; , 也就是字体大小修改成20px, 查看效果.

多次尝试, 直到达到你喜欢的样式, 记下相关的值.

2 修改相关文件

在WordPress的控制面板主页, 找到 [外观] –> [编辑], 找到在上面步骤中确定下来的文件.

(1) 修改 style.css 文件: 查找 entry-title, 修改 margin-bottom: 14px; 成 [1.2] 步骤中确定下来的值;

(2) 修改 bootstrap.css 文件: 查找 h2, .h2, 修改 font-size: 24px; 成[1.2] 步骤中确定下来的值.

关于行间距, 可以试着搜索 line-height, 尝试下你喜欢的间距, 再做修改吧.

3 扩展: 通过Sublime Text同时搜索多个文件

在文件繁多、文件内容复杂的情况下, 可以尝试使用编辑工具快速定位想要搜索的内容:

(1) 打开Sublime Text, 把需要修改的文件涉及到的整个文件夹拖入Sublime Text中;

(2) 使用快捷键全局搜索: macOS 系统下, 快捷键是 command + shift + f, 在查找输入框中输入需要搜索的内容, 比如搜索 line-height, 回车就能看到搜索结果:

(3) 浏览搜索结果, 点击可能符合预期的内容, 就会跳转到对应的文件中;

(4) 确定好需要修改的文件后, 到WordPress后台中修改对应的内容, 保存后, 刷新浏览器, 并清除下缓存, 快看看你的修改生效了没?

参考资料

怎么修改WordPress博客的文章字体的大小？

（全文完）

微信关注《瘦风的南墙》 在移动端阅读文章