神代綺凜

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题
最后更新时间：2019-03-05 这一天，我终于想起了自己的 userstyles 帐号，并增加了新版播放器页面的样式
扫描右侧二维码阅读全文
02
2017/09

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题

  1.  Home
  2. Text  
    3. Share to：

最后更新时间：2019-03-05

这一天，我终于想起了自己的 userstyles 帐号，并增加了新版播放器页面的样式

Bilibili萌化 ネコパラ

过去和未来

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

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

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

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

目前状态

已经基本稳定√
大部分萌化已完成，今后有时间有新点子会一点点添加并完善。

如果发现了什么问题，或者有好的功能及外观建议，可以在这里反馈，这样我就能第一时间收到。
由衷感谢发现问题和提出意见建议的各位，以及正在使用这个萌化的你我TA。

使用

需要先安装 Stylus 插件

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

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

查看截图/更新日志以及安装:

样式目前应用的情况

  • 大部分UI
  • B站主页（暂不包括视频分类主页）
  • 视频播放界面（普通视频 & 番剧 & 稍后再看）
  • 动态
  • 空间
  • 搜索
  • 消息

主要功能

  • 可自定义背景 (new)
  • 去页面推广、广告
  • 隐藏了视频顶部消息栏
  • 在视频播放界面（旧版播放器） 全屏 或 网页全屏 状态下，将鼠标放在右侧边缘可呼出播放器右侧面板
  • 隐藏了早已失效的lolivector插件UI

版权声明：本文为原创文章，版权归 神代綺凜 所有。

本文链接：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：July 21st, 2019 at 07:25 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

431 comments

  1. 余生  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
  2. 惠痴君  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
  3. claymore  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)

    ヾ(≧∇≦*)ゝ博客做的挺漂亮
    Reply
  4. 惠痴君  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)

    自定义总是会卡在那里
    Reply
  5. 阿福坐飞鸡  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
  6. 抵着幽蓝  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
  7. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)

    在视频播放界面播放器全屏下，在右侧有一块白色的区域，刚好与呼出播放器右侧的面板一样大小，那白色区域隐藏不了 全屏时看着有点不舒服
    请问楼主可以隐藏了这块白色的区域么？（看到回复一下）
    谢谢啦(ฅ´ω`ฅ)
    Reply
  8. 学习笔记Blog  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)

    哇，好二次元的博客呀！厉害呀！
    Reply
  9. 清晨的小麋鹿  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
  10. edpage  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)

    emmm,为啥在我21：9的屏幕上猫耳会被顶部挡住啊！
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.106(Google Chrome 68.0.3440.106)
      @edpage

      超宽屏……因为壁纸等比缩放的缘故会这样，因为没钱所以没考虑到这种情况23333
      Reply
  11. 贫僧不是和尚  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)

    300条评论看完了QAQ，小白一枚，膜拜一下φ(￣∇￣o)
    Reply
  12. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 66.0.3359.139(Google Chrome 66.0.3359.139)

    楼主我想自定义我自己喜欢的图片 但是自定义不了 不知道为什么
    楼主看到请回复一下 谢谢
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @清晨的小麋鹿

      使用图床上传图片获取URL然后填进去
      Reply
      1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
        @神代綺凜

        嗯嗯已经解决了 谢谢楼主啦
        那 楼主知道为什么在stylish里自定义不了么？ 我用stylish其他的也是这样自定义不了
        想在你这里注册个号但是打开注册页面就显示404
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
          @清晨的小麋鹿

          读题啊读题，请去样式页面读 Notes from latest update

          本博客不开放注册
          Reply
          1. 清晨的小麋鹿  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 68.0.3440.84(Google Chrome 68.0.3440.84)
            @神代綺凜

            好吧 背景已经搞定了 谢谢啦
            Reply
  13. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)

    大佬最近B站网页版新版本Bilitube上线了，要不考虑下添加一个自动切换到新版的功能？OωO
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.75(Google Chrome 68.0.3440.75)
      @爱的温度

      还在试用阶段吧，在没有正式更换UI之前我是不会动的 （懒炸了
      Reply
      1. 爱的温度  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 61.0(Firefox 61.0)
        @神代綺凜

        （滑稽滑稽滑稽|´・ω・)ノ
        Reply
  14. shine  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    发现b站新板式评论区会变透明，原来的是白板。感觉透明的这种还可以OωO
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @shine

      希望我的工作量会越来越轻（
      Reply
  15. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    期待你考完试后带来B站新界面的萌化ヾ(≧∇≦*)ゝ
    虽然肯定很辛苦了
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @seasmogchan

      当然已经考完试了（等b站正式使用我才会去做
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
        @神代綺凜

        Reply
  16. ~魔法使之家~  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    可以，非常萌！
    Reply
  17. 君华  Windows 7 x64 Edition(Windows 7 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 67.0.3396.99(Google Chrome 67.0.3396.99)
      @君华

      网页第三方样式
      自行浏览 https://userstyles.org
      Reply
      1. 黑天SkuKaLaurt  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 67.0.3396.99(Google Chrome 67.0.3396.99)
          @黑天SkuKaLaurt

          没听懂
          Reply
  18. 君华  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)

    不懂这是什么东西....请教下
    Reply
  19. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)

    我的妈,今天打开B站整个页面都变样了什么情况.新版?

    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.99(Google Chrome 67.0.3396.99)
      @咸鱼

      目前可以试用新版页面，以后有的改了

      Reply
  20. Sk_god  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)

    我想问问那个TG频道是啥呀,不科学上网还过不去
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 67.0.3396.87(Google Chrome 67.0.3396.87)
      @Sk_god

      https://zh.wikipedia.org/wiki/Telegram
      Reply