前言#

这一期我们继续记录主题美化：清除字体遮挡、添加黑幕。

清除字体遮挡#

这个问题主要是当自己换了字体以后，切换到手机版发现标题部分被遮挡了，例如这样：

title-overlap-1

就非常不美观。我通过 F12 开发者工具检查发现，把字体调大到 21px 以上就会显示完全，但这样就整体字体非常大，也挺影响美观的。

根据检查可以知道，实际上这里的字体大小不会被 style.css 中设置的 font-size 控制，而是会被 index 里加载的控制（即被后台控制），这个字体的大小在 iro 主题设置 → 主页设置 → 文章区域设置这里可以调整标题字体大小。

title-overlap-2

但显然我们不是这个问题。继续看 style.css 中类 .post-list-thumb .post-title h3，其中有一个属性是 overflow: hidden;。CSS overflow 属性用于内容溢出元素框时的处理方式。

overflow 可选值一览（简表）：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，其余内容不可见。
scroll	内容被修剪，但显示滚动条以查看其余内容。
auto	如被修剪则显示滚动条。
inherit	从父元素继承 overflow 的值。

此时可以发现，这里默认修剪了，把文字的上半部分裁掉了。根据这个规则，把 overflow 的值改为 visible 或者删除该属性即可解决。

因此最后在 style.css 中 .post-list-thumb .post-title h3 把 overflow: hidden; 改为 overflow: visible;，就不会被遮挡了：

1
/* 原 */
2
.post-list-thumb .post-title h3 {
3
  /* ...其他样式... */
4
  overflow: hidden;
5
}
6

7
/* 修复 */
8
.post-list-thumb .post-title h3 {
9
  /* ...其他样式... */
10
  overflow: visible;
11
}

当然这只是我的博客的情况，也许这种情况并不会发生在别的博客上，具体情况具体分析。

fixed-1 fixed-2

添加黑幕#

我们经常看到在发布一些……的内容时，部分文字需要把鼠标放在黑幕上或点击黑幕才会显示，这种效果适合发布一些重要内容或者是……你懂的 (ΦωΦ)。

添加这个功能也比较简单：打开 WordPress 的外观 → 自定义 → 额外 CSS，添加下面的 CSS：

1
span.heimu a.external,
2
span.heimu a.external:visited,
3
span.heimu a.extiw,
4
span.heimu a.extiw:visited {
5
  color: #252525;
6
}
7

8
.heimu,
9
.heimu a,
10
a .heimu,
11
.heimu a.new {
12
  background-color: #252525;
13
  color: #252525;
14
  text-shadow: none;
15
}
16

17
body:not(.heimu_toggle_on) .heimu:hover,
18
body:not(.heimu_toggle_on) .heimu:active,
19
body:not(.heimu_toggle_on) .heimu.off {
20
  transition: color .13s linear;
21
  color: white;
22
}
23

24
body:not(.heimu_toggle_on) .heimu:hover a,
25
body:not(.heimu_toggle_on) a:hover .heimu,
26
body:not(.heimu_toggle_on) .heimu.off a,
27
body:not(.heimu_toggle_on) a:hover .heimu.off {
28
  transition: color .13s linear;
29
  color: lightblue;
30
}
31

32
body:not(.heimu_toggle_on) .heimu.off .new,
33
body:not(.heimu_toggle_on) .heimu.off .new:hover,
34
body:not(.heimu_toggle_on) .new:hover .heimu.off,
35
body:not(.heimu_toggle_on) .heimu.off .new,
36
body:not(.heimu_toggle_on) .heimu.off .new:hover,
37
body:not(.heimu_toggle_on) .new:hover .heimu.off {
38
  transition: color .13s linear;
39
  color: #BA0000;
40
}

使用方法也很简单，只需要在文章中插入如下 HTML 即可：

1
<span class="heimu" title="光标显示内容">黑幕内容</span>

我们还可以把它添加为编辑器的快捷按钮，在主题的 function.php 中添加以下代码（Classic 编辑器 QuickTags）：

1
add_action('after_wp_tiny_mce', 'heimu_add');
2
function heimu_add($mce_settings) {
3
?>
4
<script type="text/javascript">
5
QTags.addButton('heimu_show', '黑幕', '<span class="heimu" title="你知道的太多了">', '</span>');
6
function heimu_add() {}
7
</script>
8
<?php
9
}