神代綺凜

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题
終わりました。
扫描右侧二维码阅读全文
02
2017/09

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

  1.  Home
  2. Text  
    3. Share to：

終わりました。

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折优惠码BWH26FXH3HIQ
年付$28，CN2线路，1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】（经常售罄，请抓紧机会）
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
Last modification：September 8th, 2019 at 06:13 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

467 comments

  1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    B站这两天就要把“数码”提为一级分区了。看来你的样式要稍微修改一哈了ヾ(≧∇≦*)ゝ
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @seasmogchan 已改
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 B站现在一级分区多了那么多个，上面导航栏一大排其实也不好看了╮(╯▽╰)╭
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @seasmogchan 到时候推倒重写，做个收纳
          Reply
          1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜 期待
            Reply
  2. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    喵～
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @梨子 OωO
      Reply
      1. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 主题好漂亮！
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @梨子 |´・ω・)ノ谢谢夸奖
          Reply
  3. 小芋头  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
    博主，你的博客主题是什么呀 好想要噢qwq
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @小芋头 Footer有
      Reply
  4. 木名小威  Windows 10 x64 Edition(Windows 10 x64 Edition) / Opera 56.0.3051.116(Opera 56.0.3051.116)
    建议添加文本描边以及改色选项，不然壁纸颜色太深会看不清字(๑•̀ㅁ•́ฅ)
    Reply
  5. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    看番的时候倒是没问题了,但是在看视频的时候就会出现标题栏下面没有留白造成标题文字看不清楚问题,咋搞呢
    Reply
    1. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
      @ArrayCat 我试了下好像是因为B站新版播放器的问题??
      Reply
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
        @ArrayCat 因为最近事情多还没有为新版播放器编写样式

        以后会完全重写

        Reply
  6. uiiiiii  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
    背景好像刷不出来啦？
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @uiiiiii coding pages 服务器不知道出什么问题了，目前暂时换回 github pages 了，应该正常了
      Reply
      1. uiiiiii  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
        @神代綺凜 感谢，可以了，就是图片刷出来需要等一点点时间
        Reply
  7. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.33(Google Chrome 68.0.3440.33)
    大佬啊，今天艹猫的背景莫得了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @失足少女 coding pages 服务器不知道出什么问题了，目前暂时换回 github pages 了，应该正常了
      Reply
  8. 阿飞  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)
    你好，我的博客也是用的这个主题，但是访问速度很慢，怎样做优化，才能提升速度呢？OωO
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
      @阿飞 抱歉，我也没有什么好的意见，最基本的就是选个线路好的主机吧
      Reply
  9. 月がきれい  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
    不知道有没有可能出一个黑暗模式呢
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @月がきれい 不存在的（当然如果仅仅只改配色而不去做其他特效的话是很容易的
      Reply
      1. 月がきれい  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜 就是背景颜色改为深灰啊黑色啊之类的吧
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
          @月がきれい 差不多
          Reply
  10. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)
    这几天首页在线人数下面那张小猫的图被插件uBlock屏蔽了。是因为B站在这个位置放置了广告吗？(ó﹏ò｡)
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @seasmogchan 是的，我特地把广告图片隐藏，换成了这个
      你可以直接针对b站不开启uBlock，本样式已经屏蔽了所有广告
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)
        @神代綺凜 我目前在试用新版播放器，不开uBlock。在相关视频列表上面会出现广告。好纠结啊23333
        话说新播放器总体还不错，就是目前bug好多٩(ˊᗜˋ*)و
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
          @seasmogchan 我一直没用懒得切，大概都有什么bug
          Reply
          1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.67(Google Chrome 70.0.3538.67)
            @神代綺凜 主要还是全屏时鼠标指针不隐藏 默认清晰度经常不能选择最高清晰度等等。话说有人基于你的萌化主题先行弄了个新版本的样式出来了 https://userstyles.org/styles/163004/bilibili 不过感觉他搞了太多div之类的使得整体都是一块一块的割裂感严重
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
              @seasmogchan 噗
              Reply
  11. vfw  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
    博主我想知道这个动图二维码怎么做
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @vfw https://lolico.moe/tutorial/acme-le-wc.html/comment-page-1#comment-2916
      Reply
  12. 余生  Android 5.1(Android 5.1) / Google Chrome 57.0.2987.108(Google Chrome 57.0.2987.108)
    博主 我想知道这是干啥用的|´・ω・)ノ
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
      @余生 网页第三方样式
      Reply
  13. 惠痴君  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    有一个问题就是我经常上的新番时间表这个界面没有萌化
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @惠痴君 目前暂时不打算再改什么了，等新UI
      Reply
      1. 惠痴君  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
        @神代綺凜 可行 毕竟新版迟早是要取代旧版的
        Reply
  14. claymore  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    ヾ(≧∇≦*)ゝ博客做的挺漂亮
    Reply
  15. 惠痴君  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    自定义总是会卡在那里
    Reply
  16. 阿福坐飞鸡  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    真·萌新。还有这种好东西
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @阿福坐飞鸡 嘻嘻
      Reply
  17. 抵着幽蓝  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    stylish被chrome提示违反了 Chrome 网上应用店政策是什么原因呢
    Reply
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @抵着幽蓝 背地收集用户的浏览行为，违反隐私条例
      Reply
  18. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    在视频播放界面播放器全屏下，在右侧有一块白色的区域，刚好与呼出播放器右侧的面板一样大小，那白色区域隐藏不了 全屏时看着有点不舒服
    请问楼主可以隐藏了这块白色的区域么？（看到回复一下）
    谢谢啦(ฅ´ω`ฅ)
    Reply
  19. 学习笔记Blog  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
    哇，好二次元的博客呀！厉害呀！
    Reply
  20. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
    用stylus显示不了 背景图
    Reply
    1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
      @清晨的小麋鹿 用Stylish我会换背景图 但是用stylus就换不行了
      Reply
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
        @清晨的小麋鹿 请说明
        1、你进行的操作
        2、你期望的效果
        3、实际的效果
        Reply
        1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
          @神代綺凜 我在Stylish网站中已经设置好想要上传的图片，然后安装风格。打开B站背景是白色的，不知道为什么。
          那我重新在安装，不用自定义的图片用风格自带的背景，一样是白色的。

          我之前是用tylish这个的时候是，上传图片获取URL然后填进去的这个方法修改背景的
          但是用Stylus填进去 在打开B站一样是白色的背景（填进去的URL是显示红色的）

          Reply