[已完结] 哔哩哔哩 Nekopara B站网页萌化主题

咕：神代綺凜
发布时间：September 2, 2017
884346 views
496 comments
891 字数
Categories：萌化项目

終わりました。

Bilibili萌化ネコパラ

最后更新时间：2019-09-08

过去和未来

这个样式原本是我开始学 CSS 的时候 xjb 写的一个东西，其实仅仅是为了熟悉各种属性的运用以及积累一些实际经验

差不多三年过去了，回头再看，样式本身其实十分臃肿，另外，B站样式频繁的改版是必然的，并且也使得成为了社畜的我很难维护并维持当时的自己写出来的大杂烩的样子

而且新版B站的 UI 设计很好，我挑不出什么刺来，我觉得我很多 xjb 改的地方都是多余的

所以我决定重新开始做一些微小的工作，仅仅为了 nekopara 而做一个很简单的附加式的皮肤，只保留我之前做的一些 UI 图片资源，剩下的，原来是什么样的，就还是什么样的

附加功能

去页面推广、广告
隐藏了旧版视频播放器顶部消息栏
对导航栏应用了一些人性化调整
在旧版视频播放界面播放器全屏或网页全屏状态下，将鼠标放在右侧边缘可呼出播放器右侧面板

安装

使用前还需要先安装 Stylus 插件

并在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”，可解决本样式造成的部分 iframe 背景问题

插件设置可通过 右击 Stylus 插件图标 - 选项 来进入

版权声明：本文为原创文章，版权归神代綺凜所有。
本文链接：https://moe.best/moe-project/bilibili-nekopara.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】（$28套餐已经不再销售）
年付$47，CN2 GIA线路，1核/512MB内存/10G硬盘/500G@1Gbps【点击购买】（可能已售罄）

Last modification：September 8th, 2019 at 06:13 pm

If you think my article is useful to you, please feel free to appreciate

496 comments

LelaGuerri (Windows 10 x64 Edition) / (Google Chrome 99.9.9999.999)
2019-03-03 07:56 pm

您好大佬可否在这个 B站主题的评论区位置增加一个像您网站评论区这种乳白色半透明的遮罩图层呢
因为用了自定义壁纸壁纸的颜色一多或者图案太暗或者太复杂评论区的字就很难识别了
我附上一张图.. 您看下... https://i.imgur.com/OMptVY9.jpg

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-03-03 08:39 pm
  
  @LelaGuerri 这是因为我还没写新版页面的样式
  
  Reply
  1. LelaGuerri (Windows 10 x64 Edition) / (Google Chrome 99.9.9999.999)
    2019-03-05 09:54 am
    
    @神代綺凜 嗯嗯能传达到给大佬看到就好-.-
    
    Reply
子痕 (Windows 10 x64 Edition) / (Sogou Explorer)
2019-02-24 06:55 pm

作为中年大叔，不太习惯年轻人又萌又这么多动画图片的网站。

Reply
教书先生 (Windows 10 x64 Edition) / (Google Chrome 65.0.3325.181)
2019-02-21 09:33 pm

我可以申请一下友链吗

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-02-22 03:42 pm
  
  @教书先生 因为目前友链太多所以不考虑再加，很抱歉
  
  Reply
鸟叔 (Windows 7 x64 Edition) / (Maxthon 5.2.5.4000)
2019-01-18 09:53 am

网站主题真萌

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-01-18 04:15 pm
  
  @鸟叔 |´・ω・)ノ谢谢夸奖
  
  Reply
cakeyui (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
2019-01-10 09:31 am

稍后再看时也有标签栏
直播和小黑屋跑到第二排去了∠( ᐛ 」∠)＿（才发现）

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-01-10 12:25 pm
  
  @cakeyui 可我这里也是没有问题的啊……
  
  Reply
  1. cakeyui  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-10 06:33 pm
    
    @神代綺凜 ∠( ᐛ 」∠)＿没法发图我丢外链了 http://www.tzr.me/image/h8Iw9 就很奇怪。。。
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-10 07:40 pm
    
    @cakeyui 这就是没更新啊……或者 userstyle 出了什么 bug 你没更新到
    自行检查样式代码1这部分
    
    如果和图片中不一致就自行替换
    
    .bili-header-m > .bili-wrapper{ width: 1285px; } @media screen and (max-width: 1400px){ .bili-header-m > .bili-wrapper{ width: 1055px; } }
    
    Reply
    
    cakeyui  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-11 08:40 am
    
    @神代綺凜 感谢因为首页修复了。。我以为代码更新到最全了现在都能正常显示了
    
    Reply
OASIS (GNU/Linux x64) / (Google Chrome 71.0.3578.98)
2019-01-06 07:17 pm

大佬..很喜欢您主页的样式于是偷偷借用了下css 但是主页一行只能显示一篇文章,请问我缺少了什么修改?

Reply
1. OASIS (GNU/Linux x64) / (Google Chrome 71.0.3578.98)
  2019-01-07 12:21 am
  
  @OASIS 刚刚才仔细看了大佬的注释
  就不麻烦大佬啦~
  
  Reply
ss (Windows 10 x64 Edition) / (Google Chrome 63.0.3239.132)
2019-01-05 12:46 am

突然间Stylish被视为恶意脚本后改用油猴子版本的Stylish轻捷然后发现评论区的留白是尖角不是圆角老版界面的播放器边上白色遮住了背景

Reply
1. ss (Windows 10 x64 Edition) / (Google Chrome 63.0.3239.132)
  2019-01-05 12:47 am
  
  @ss 不知油猴子版的Stylish 会不会造成显示异常
  
  Reply
  1. 神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-05 12:27 pm
    
    @ss 用Stylus
    
    Reply
    
    ss  (Windows 10 x64 Edition) / (Google Chrome 63.0.3239.132)
    2019-01-05 07:07 pm
    
    @神代綺凜 试了一下 Stylus 和 Stylish的插件浏览器都安装不了显示恶意插件555
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-05 07:47 pm
    
    @ss 你要是 Chrome 的话从第三方网站直接下 crx 装扩展肯定装不了啊，都提示恶意
    https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
    
    Reply
cakeyui (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
2019-01-03 06:57 pm

标签栏的直播和小黑屋跑到第二排去了。。能修改下吗

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-01-03 08:25 pm
  
  @cakeyui 已修复
  
  Reply
  1. Stephanie (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.102)
    2019-01-08 07:50 pm
    
    @神代綺凜 奇怪，明明已经是最新版，但是我还是存在这个问题耶。。
    
    Reply
AppleMiku (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
2019-01-02 07:54 pm

dalao厉害哇，bilibli好看多了

Reply
seasmogchan (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
2019-01-02 03:17 am

B站这两天就要把“数码”提为一级分区了。看来你的样式要稍微修改一哈了ヾ(≧∇≦*)ゝ

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2019-01-03 08:25 pm
  
  @seasmogchan 已改
  
  Reply
  1. seasmogchan  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-03 09:01 pm
    
    @神代綺凜 B站现在一级分区多了那么多个，上面导航栏一大排其实也不好看了╮(╯▽╰)╭
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-03 10:14 pm
    
    @seasmogchan 到时候推倒重写，做个收纳
    
    Reply
    
    seasmogchan  (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2019-01-04 12:24 am
    
    @神代綺凜 期待
    
    Reply
梨子 (GNU/Linux x64) / (Google Chrome 71.0.3578.98)
2018-12-20 01:43 am

喵～

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2018-12-20 01:44 am
  
  @梨子 OωO
  
  Reply
  1. 梨子 (GNU/Linux x64) / (Google Chrome 71.0.3578.98)
    2018-12-20 01:47 am
    
    @神代綺凜 主题好漂亮！
    
    Reply
    
    神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
    2018-12-20 02:08 am
    
    @梨子 |´・ω・)ノ谢谢夸奖
    
    Reply
小芋头 (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
2018-12-14 09:49 pm

博主，你的博客主题是什么呀好想要噢qwq

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 71.0.3578.98)
  2018-12-15 12:34 am
  
  @小芋头 Footer有
  
  Reply
木名小威 (Windows 10 x64 Edition) / (Opera 56.0.3051.116)
2018-12-08 04:37 pm

建议添加文本描边以及改色选项，不然壁纸颜色太深会看不清字(๑•̀ㅁ•́ฅ)

Reply
ArrayCat (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.110)
2018-11-25 08:57 am

看番的时候倒是没问题了,但是在看视频的时候就会出现标题栏下面没有留白造成标题文字看不清楚问题,咋搞呢

Reply
1. ArrayCat (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.110)
  2018-11-25 08:58 am
  
  @ArrayCat 我试了下好像是因为B站新版播放器的问题??
  
  Reply
  1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.102)
    2018-11-25 12:00 pm
    
    @ArrayCat 因为最近事情多还没有为新版播放器编写样式
    
    以后会完全重写
    
    Reply
uiiiiii (Windows 7 x64 Edition) / (Google Chrome 62.0.3202.94)
2018-11-19 01:37 pm

背景好像刷不出来啦？

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.102)
  2018-11-19 07:55 pm
  
  @uiiiiii coding pages 服务器不知道出什么问题了，目前暂时换回 github pages 了，应该正常了
  
  Reply
  1. uiiiiii (Windows 7 x64 Edition) / (Google Chrome 62.0.3202.94)
    2018-11-19 07:57 pm
    
    @神代綺凜 感谢，可以了，就是图片刷出来需要等一点点时间
    
    Reply
失足少女 (Windows 10 x64 Edition) / (Google Chrome 68.0.3440.33)
2018-11-18 01:38 pm

大佬啊，今天艹猫的背景莫得了

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.102)
  2018-11-19 07:52 pm
  
  @失足少女 coding pages 服务器不知道出什么问题了，目前暂时换回 github pages 了，应该正常了
  
  Reply
阿飞 (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.67)
2018-11-13 04:34 pm

你好，我的博客也是用的这个主题，但是访问速度很慢，怎样做优化，才能提升速度呢？OωO

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.102)
  2018-11-13 04:43 pm
  
  @阿飞 抱歉，我也没有什么好的意见，最基本的就是选个线路好的主机吧
  
  Reply
月がきれい (Windows 10 x64 Edition) / (Google Chrome 67.0.3396.99)
2018-10-23 12:00 am

不知道有没有可能出一个黑暗模式呢

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
  2018-10-23 01:19 am
  
  @月がきれい 不存在的（当然如果仅仅只改配色而不去做其他特效的话是很容易的
  
  Reply
  1. 月がきれい (Windows 10 x64 Edition) / (Google Chrome 67.0.3396.99)
    2018-10-23 08:36 pm
    
    @神代綺凜 就是背景颜色改为深灰啊黑色啊之类的吧
    
    Reply
    
    神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
    2018-10-24 01:04 am
    
    @月がきれい 差不多
    
    Reply
seasmogchan (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.67)
2018-10-18 11:35 pm

这几天首页在线人数下面那张小猫的图被插件uBlock屏蔽了。是因为B站在这个位置放置了广告吗？(ó﹏ò｡)

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
  2018-10-19 12:27 pm
  
  @seasmogchan 是的，我特地把广告图片隐藏，换成了这个
  你可以直接针对b站不开启uBlock，本样式已经屏蔽了所有广告
  
  Reply
  1. seasmogchan  (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.67)
    2018-10-19 09:43 pm
    
    @神代綺凜 我目前在试用新版播放器，不开uBlock。在相关视频列表上面会出现广告。好纠结啊23333
    话说新播放器总体还不错，就是目前bug好多٩(ˊᗜˋ*)و
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
    2018-10-20 07:55 pm
    
    @seasmogchan 我一直没用懒得切，大概都有什么bug
    
    Reply
    
    seasmogchan  (Windows 10 x64 Edition) / (Google Chrome 70.0.3538.67)
    2018-10-21 04:29 am
    
    @神代綺凜 主要还是全屏时鼠标指针不隐藏默认清晰度经常不能选择最高清晰度等等。话说有人基于你的萌化主题先行弄了个新版本的样式出来了 https://userstyles.org/styles/163004/bilibili 不过感觉他搞了太多div之类的使得整体都是一块一块的割裂感严重
    
    Reply
    
    神代綺凜咕  (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
    2018-10-21 11:42 am
    
    @seasmogchan 噗
    
    Reply
vfw (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
2018-10-13 01:57 pm

博主我想知道这个动图二维码怎么做

Reply
1. 神代綺凜咕 (Windows 10 x64 Edition) / (Google Chrome 69.0.3497.100)
  2018-10-13 04:56 pm
  
  @vfw https://lolico.moe/tutorial/acme-le-wc.html/comment-page-1#comment-2916
  
  Reply