手动修改博客css样式,打造属于自己的博客样式

小鸡
阅读670 喜欢3 教程 更新2018-11-4

这两天花了点时间修改了下自己的next主题的博客

样式表放在了GitHub上喜欢的话可以直接使用

next博客主题样式修改

使用方法

  • 直接下载样式表,然后复制到自己主题的themes extsourcecss_custom目录下的custom.styl文件

<link rel="stylesheet" type="text/css" href="https://me.idealli.com/images/blog/custom.css">

兰州小红鸡

自己动手修改的方法

小白教程,大佬见笑。需要一点点css基础,可以上菜鸟教程现学

准备

  1. chrome浏览器或者其他带检查功能的浏览器
  2. 如果你是用的hexo博客的next主题,那么自定义样式表就在themes extsourcecss_custom目录下的custom.styl文件中
  3. 如果是其他类型的博客,先百度自定义样式表在哪里

查找样式名称

现在我们开始自己动手修改样式

先用浏览器打开自己博客页面,找到自己要修改的样式的地方,比如我要修改这个文章标题样式

兰州小红鸡

然后鼠标右键,点击检查

兰州小红鸡

深色的那一行就是标题所在的html语句

鼠标移动到那一行,点击,这时右侧出现css样式表

兰州小红鸡

选择样式名称,复制

兰州小红鸡

然后回到themes extsourcecss_custom目录下的custom.styl文件中,开始自己写样式

例如

.posts-expand .post-title-link{
/*
你的自定义样式
*/
}

showtime

兰州小红鸡

兰州小红鸡

兰州小红鸡

兰州小红鸡

当然前提是你使用的是nexo主题,并且我使用的是next里的mist子主题,其他主题可能不兼容

下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助

hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式