老郭更换博客主题之后,就陆陆续续的对博客主题的细节进行了一些调整。调整基本上就是修改代码,鉴于deepseek现在的情况,老郭只能借助于grok。
首先老郭觉得博客正文的字体有些小了,看上去颇为吃力,就想把字体调大一些。由于主题没有直接定义 正文的font-size,因此正文字体大小继承自更高层的设置。那么就好办了,打开style.css文件,在900多行的位置找到以下代码:
.entry-content, .entry-summary, .mu_register { line-height: 2.4; margin: 0 0 1.714285714rem; line-height: 1.714285714; }
在后面添加正文font-size:
.entry-content { font-size: 18px; /* 调整为 18px,你可以根据需要修改 */ font-size: 1.8rem; }
这样,正文的字体就变大了,看着也舒服了不少。不过,正文字体大了,正文的标题又显得有些小了,有点不太协调。修改正文标题大小的方式和上面类似,在刚才添加的字体大小代码的下面继续添加:
.single-post .entry-header .entry-title { font-size: 26px; font-size: 2.6rem; }
刷新一下页面,标题也变大了,看着就不吃力了。
老郭还发现,博客正文存在段落首行没有缩进的问题,这估计是因为wordpress是外国人编写的,没有考虑到中文需要首行缩进,那咱们就得自己解决。方法也不难,找到刚才修改正文字体大小的地方,把代码修改为:
.entry-content { font-size: 18px; font-size: 1.8rem; text-indent: 2em; }
其中的2em就是首行缩进2个单位。
首行缩进实现了,但新的问题又出现了,文章里的图片也跟着一起缩进了,影响了整体的美观。没办法,继续修改,在修改正文字体大小和标题大小的两段代码之间插入以下代码:
.entry-content img { display: block; margin-left: auto; margin-right: auto; }
图片终于居中展示了。这样,老郭对于Twenty Twelve 木头人修改精简版的二次开发版本正文部分的修改基本上算是完成了,全部修改的代码如下:
.entry-content, .entry-summary, .mu_register { line-height: 2.4; margin: 0 0 1.714285714rem; line-height: 1.714285714; } .entry-content { font-size: 18px; font-size: 1.8rem; text-indent: 2em; } .entry-content img { display: block; margin-left: auto; margin-right: auto; } .single-post .entry-header .entry-title { font-size: 26px; font-size: 2.6rem; }
《调整博客正文字体大小》留言数:0