此文章节选修改于,作者“ 染川 瞳 ”&关于本主题(Sakura by Mashiro)使用上的建议

喜欢本文章还请去原作者博客里浏览留言,在此再次感谢 染川 瞳 大佬!

1.首页的一句话

修改前
修改后

通过修改,原本与标题并不搭配的暗色调可以和标题搭配,减少视觉上的对立。

修改方法:

打开WordPress的后台,找到

点击它
选择“自定义”
接下来点击额外CSS

然后你就进入了一个可以输入文本的地方

在此输入以下内容 (代码后面备注//文字建议删除,否则可能出错)

.header-info {
 width: 63%;
 margin: auto;
 font-size: 16px;
 color: #EE9CA7;  // 这是修改一句话的颜色  (16进制色值) 
 background: rgba(255,250,250);  //背景色(RGB色值)
 padding: 15px;  //大小
 margin-top: 22px;   //大小
 letter-spacing: 0;
 line-height: 30px;   //大小
 border-radius: 10px;  //大小
 box-sizing: initial;
 white-space: nowrap
 }

你可以通过实时预览更好的更改。

2. 关于社交卡片美化

修改前
修改后

修改方法:

打开WordPress的后台,找到

点击“主题设置”
点击“第一屏”将“社交信息样式”调成“独立成行”
然后重复上面步骤回到“额外CSS”

在此输入以下内容 (代码后面备注//文字建议删除,否则可能出错)

.top-social img {
 height: 40px;  //这是修改社交网络外图标的高
 width: 40px;  //这是修改社交网络外图标的宽 
 padding: 9px;  //这是修改社交网络图标的大小 
 background: rgba(255,250,250)  //这是背景颜色 
 }

关于社交卡片图标的更改

可以很清楚的看到,修改前的图标存在一些视觉上的混乱。Github的图标几乎不可见,微博的图标视觉上也存在的不协和。

通过修改统一风格的图标,虽然一定程度上辨别不如原方案,但视觉上十分协调。

修改图标,需要通过修改PHP文件实现

首先,访问主题目录 /wp-content/themes/Sakura-master/layoutsimgbox.php

你会发现以下内容

代码

通过一些合理的分析,你可以很快的定位到某个社交网络的图标 例:

此段代码多次出现Wechat,因此判定为微信图标

然后将原链接替换为你想要的图标的链接即可。

注意!此代码有两种显示方式,所以该代码有两次重复的内容,推荐全部修改。

最后保存就可以看看你的成果啦~

注意*这是一则由 Google AdSense 自动推荐的广告,不代表本站立场

寒蝉黎明之时,便是重生之日。