前言

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

清除字体遮挡

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

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

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

但显然我们不是这个问题，于是看到style.css中类.post-list-thumb .post-title h3这里，其中有一个成员是overflow: hidden;CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

此时我发现，这里应该是默认修剪了，把我的字的上半部分修去了，于是根据这个规则，把overflow的值改为visible或者是去除这一项就可以解决了。

故最后，在style.css.post-list-thumb .post-title h3类中把overflow: hidden;改为了overflow: visible;就没有被遮挡了。

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

添加黑幕

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

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

span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited {
    color: #252525;
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
    background-color: #252525;
    color: #252525;
    text-shadow: none;
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
    transition: color .13s linear;
    color: white;
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
    transition: color .13s linear;
    color: lightblue;
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off {
    transition: color .13s linear;
    color: #BA0000;
}

使用方法也是非常简单，只需要输入如下代码即可：

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

我们可以把它添加为编辑器的快捷按钮，在function.php中添加这些代码即可：

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

效果：嘿嘿嘿