【Vieu常见问题】320印象博客(wordpress)文章页的排版CSS,图片居中,字间距、行间距、段间距调整,标题排版优化

 

320印象,用的vieu主题。

 

我做过新媒体运营,目前也正在做,对排版还是很看重的。

不得不说,vieu文章页的排版确实不直观。主要问题如下:

  1. 图片不居中
  2. 行间距太小
  3. 字间距太小
  4. 段间距太小
  5. 标题不明确

 

说白了,就是排版没有呼吸感,看文章的时候很不舒服,太挤了。

主要的样式修改

  1. H1 ,H2 ,H3的美化
  2. 字间距、段间距和行间距的优化
  3. 图片居中+阴影
  4. 去掉了独立页面标题丑陋的阴影
  5. 首页焦点图和侧边栏对齐(强迫症的自救)

 

注意事项

本站主色调是绿色,对应的颜色值是0da872,请批量替换0da872为你自己博客的主题

以下是2019年09月27日修改的修改样式

主要更新内容

  1. 字体替换,使用Josefin Sans Ligh 和 mac上的苹方字体,较为圆润。
  2. 加重a标签字重,链接文字会更清楚。
  3. 首页工具箱高度调整,经典模式下,首页工具箱高度不对,所以调整了一下,如果你这边没有问题,记得删掉。
  4. 取消我要注册高亮,高亮登陆。(因为我关闭了注册,只提供QQ登入,所以就把登入高亮了。)

 

点击展开查看样式内容

*:not([class*="ico"]):not(i) {
    font-family: 'Josefin Sans Light', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "'Hiragino Sans GB", STHeiti, "Microsoft Yahei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif !important;
}

/*加重a标签字重*/
a {
font-weight: 600;
}

.oldtbcontent {
    margin-top: 15px;
}

.carousel-inner .item h3 {
    margin: 15px 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}
.article-title {
    text-shadow: none;
}

.article-content h1 {
    background-color: #f6f6f6;
    border-bottom: 0px solid #12b4f0;
    padding: 5px 12px;
    border-left: 5px solid #24b4f0;
    margin: 12px 0px;
}
.article-content h2 {
    display: inline-block;
    border-bottom: none;
    border-right: none;
    box-shadow: rgb(244, 244, 244) 1px 3px 2px;
    font-size: 18px;
    background-color: #ffffff;
    border-left: 8px solid #0da872;
    margin: 12px 0px;
    overflow: hidden;
    padding: 6px 1em;
    letter-spacing: 1.5px;
}

.article-content h3 {
    margin: 15px auto;
    display: table;
    padding: 0px 20px;
    line-height: 180%;
    background: #0da872;
    border-radius: 4px 4px;
    color: #FFF;
    box-shadow: rgb(244, 244, 244) 1px 3px 2px;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content dd,
.article-content pre,
.article-content hr {
    margin-bottom: 15px;
}
.article-content {
    color: #333;
    line-height: 180%;
    letter-spacing: 0.07em
}
.article-content img {
    margin: 0 auto;
    display: block;
    line-height: 100%;
    box-shadow: rgb(152, 152, 152) 0px 0px 8px;
}

.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 0px 20px rgba(160, 160, 160, 0.1);
}

.Genio_Adsense_Widget {
    background-color: #fff;
    padding: 15px;
}

.widget_wpcc {
    background-color: #fff;
    padding: 15px;
}

.widget_custom_html {
    background-color: #fff;
    padding: 15px;
}
.widget_text {
    background-color: #fff;
    padding: 15px;
}

.widget_archive {
    background-color: #fff;
    padding: 15px;
}

.toc_widget{
    background-color: #fff;
    padding: 15px;
}

.rollbar a {
    background: #0da872;
}

.article-content blockquote {
    border-left: 5px solid #0da872;
}

/*取消我要注册高亮,高亮登陆*/
.wel .wel-item-btn > a {
    background: none;
    color: #5e5e5e !important;
}

.wel .wel-item > a.user-login {
    margin: 17px 0px 0 15px;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    background: #0da872;
    color: #fff;
}

/*说好全局圆角,可说展示图都没有圆角啊*/
.carousel {
    border-radius: 12px;
}

.ppink {
    background: #ffecea;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 2px;
}
.pblue {
    background: #ECFFFF;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 2px;
}

::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar:horizontal {
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #0da872!important;
}

/*去Dplayer底部黑边*/
.article-content video{
margin: 0 auto;
}
.toc_widget_list ul {
    margin-left: 1.5em;
}

/*首页工具箱高度调整*/
.home-firstitems ul li{
height: 115px;
}

展示

 

以下是2019年09月19日修改的修改样式

点击展开查看样式内容
.oldtbcontent {
    margin-top: 15px;
}

.carousel-inner .item h3 {
    margin: 15px 0 0;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}
.article-title {
    text-shadow: none;
}

.article-content h1 {
    font-weight: bold;
    background-color: #f6f6f6;
    border-bottom: 0px solid #12b4f0;
    padding: 5px 12px;
    border-left: 5px solid #24b4f0;
    margin: 12px 0px;
}
.article-content h2 {
    display: inline-block;
    border-bottom: none;
    border-right: none;
    box-shadow: rgb(244, 244, 244) 1px 3px 2px;
    font-size: 18px;
    font-weight: bold;
    background-color: #ffffff;
    border-left: 8px solid #0da872;
    margin: 12px 0px;
    overflow: hidden;
    padding: 6px 1em;
    letter-spacing: 1.5px;
}

.article-content h3 {
    margin: 15px auto;
    display: table;
    padding: 0px 20px;
    line-height: 180%;
    background: #0da872;
    border-radius: 4px 4px;
    color: #FFF;
    box-shadow: rgb(244, 244, 244) 1px 3px 2px;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content dd,
.article-content pre,
.article-content hr {
    margin-bottom: 15px;
}
.article-content {
    color: #333;
    line-height: 180%;
    letter-spacing: 0.07em
}
.article-content img {
    margin: 0 auto;
    display: block;
    line-height: 100%;
    box-shadow: rgb(152, 152, 152) 0px 0px 8px;
}

.widget {
    clear: both;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 0px 20px rgba(160, 160, 160, 0.1);
}

.Genio_Adsense_Widget {
    background-color: #fff;
    padding: 15px;
}

.widget_wpcc {
    background-color: #fff;
    padding: 15px;
}

.widget_custom_html {
    background-color: #fff;
    padding: 15px;
}
.widget_text {
    background-color: #fff;
    padding: 15px;
}

.widget_archive {
    background-color: #fff;
    padding: 15px;
}

.rollbar a {
    background: #0da872;
}

.article-content blockquote {
    border-left: 5px solid #0da872;
}

/*取消我要注册高亮,高亮登陆*/
.wel .wel-item-btn > a {
    background: none;
    color: #5e5e5e !important;
}

.wel .wel-item > a.user-login {
    margin: 17px 0px 0 15px;
    height: 32px;
    line-height: 32px;
    border-radius: 50px;
    background: #0da872;
    color: #fff;
}

/*说好全局圆角,可说展示图都没有圆角啊*/
.carousel {
    border-radius: 12px;
}

.ppink {
    background: #ffecea;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 2px;
}
.pblue {
    background: #ECFFFF;
    margin: 0 0 8px 0;
    padding: 5px 10px;
    border-radius: 2px;
}

::-webkit-scrollbar {
    width: 6px
}
::-webkit-scrollbar:horizontal {
    height: 6px;
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #0da872!important;
}

 

以下是我2019年8月27日写的样式

点击展开查看样式内容

样式展示

 

样式CSS代码如下

.article-content h1 {
font-weight:bold;
background-color:#f6f6f6;
margin:20px 0;
border-bottom:0px solid #12b4f0;
padding:5px 12px;
border-left:5px solid #24b4f0;
margin:12px 0px;
}
.article-content h2 {
font-size:18px;
font-weight:bold;
background-color:#ffffff;
margin:20px 0;
border-bottom:1px solid;
padding:5px 15px;
border-left:8px solid;
margin:12px 0px;
overflow:hidden;
}
.article-content p,.article-content ul,.article-content ol,.article-content dd,.article-content pre,.article-content hr {
margin-bottom:15px;
}
.article-content {
color:#333;
line-height:220%;
letter-spacing:0.15em
}
.article-content img {
margin:0 auto;
display:block;
line-height:100%;
box-shadow:rgb(152,152,152) 0px 0px 8px;
}

 

使用方法

主题设置,将上头的样式CSS代码粘贴到自定义CSS样式里。

 

如果你喜欢 Vieu 主题,顺便介绍一下这款主题。

  • 全站响应式自适应模板
  • VIP会员功能
  • 付费商城
  • 独立下载
  • 回复后可见
  • 后台登录保护
  • 特色登录
  • 全站支持熊掌号
  • 文章图片弹窗预览
  • 支持QQ和微博快速登入
  • 文章分享海报
  • 独立下载
  • …….

 

我看中vieu的除了功能强大,界面美观大方,扁平化。主要还是这样的主题,在 wordpress 主题里清一色的两三百块,而它只要69元。

如果有兴趣的话,可以联系我的QQ:798746476,详细了解

 

 

Hey,你好哇。影视剪辑 | AE | Pr | 电脑技术 | 摄影摄像 | 电影 | 电视剧 | 二次元

 

我们下次见 

 

剪辑交流群:685624383

收集的所有资源均来自网络,仅供私下交流学习之用,任何涉及到商业目的的均不能使用,否则产生的一切后果由您自行承担,提供资源但是不对任何资源负法律责任,所有资源请在你下载后24小时删除。 如有侵权,联系 admin#mail.320nle.com
320印象 » 【Vieu常见问题】320印象博客(wordpress)文章页的排版CSS,图片居中,字间距、行间距、段间距调整,标题排版优化

1 评论

发表评论