神代綺凛

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

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

  1.  Home
  2. Text  
    3. Share to：

終わりました。

Bilibili萌化 ネコパラ

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

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

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

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

附加功能

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

安装

由于 userstyles.org 改版，我号登不上了，因此没法在该站继续发布样式更新，现已转至 userstyles.world，请老用户重新安装样式

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

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

本文链接：https://moe.best/moe-project/bilibili-nekopara.html

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

搬瓦工VPS优惠套餐，建站稳如狗，支持支付宝，循环出账94折优惠码BWH3HYATVBJW
年付$47，CN2线路，1核/1G内存/20G硬盘/1T@1Gbps【点击购买】
季付$47，CN2 GIA线路，1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买】
Last modification：December 11th, 2021 at 04:05 pm
© The copyright belongs to the author
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

517 comments

  1. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    主页可用，点击具体的分区就会失效（播放页无误）
    你有什么头猪吗？
    （感觉大问题没有，毕竟结构一致）
    Reply
  2. Tsing  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)
    新版播放器宽屏模式下右侧与弹幕内容显示区域有重叠，部分超出。
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Tsing 宽屏模式下原本就会覆盖弹幕列表，这个不是BUG
      超出一部分以及边框轮廓样式问题是已知问题，这阵子忙完后找时间细调
      Reply
  3. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
    在看番剧的时候新版h5播放器有bug，视频以下的部分背景会透明（普通视频没有这个bug） 想看个评论都看不清
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @ㄒㄐㄍㄢ 看了下，番剧页面的元素id和普通视频是不一样的，需要调一下
      这阵子要肝毕业论文比较忙，先暂时忍一会吧
      Reply
      1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
        @神代綺凜 邮件QQ给我分到垃圾箱了，现在才看到。。。其实之前就看到这个小bug了，但是记得你说等B站新UI来着，于是我就切回旧版本的啦 最近想起来B站有新h5播放器了，一切回去发现bug还在，以防万一，我就汇报一下吧
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @ㄒㄐㄍㄢ 主要因为我平时不用PC补番来着，所以一直没注意有这个问题
          Reply
          1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
            @神代綺凜 我也少，正好前几天碰巧，另外为什么这个消息没有提醒 甚至不在垃圾箱里——连邮件都没有 我记得以前是有的啊
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @ㄒㄐㄍㄢ emmm，可我自己都有收到邮件提醒
              Reply
              1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
                @神代綺凜 刚刚那条有提醒，到垃圾箱了，但是之前的没有
                Reply
  4. 小见  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    大佬用了之后动态预览会加载不出来
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @小见 请根据“使用”所说的步骤设置一下
      Reply
  5. Trayler  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)
    大佬什么时候把视频分类主页也完善一下 有强迫症
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Trayler 大概不会了吧……
      Reply
      1. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
        @神代綺凜 那个……分类主页好像只需在比对正则加一个
        ^https?://www.bilibili.com/(.*)
        就可以了，是这样吗？
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @风吹名无 这相当于对整个域生效了，不推荐，如果你这样用着没觉得有什么问题那也没啥关系了
          Reply
  6. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    建议背景换个图床，现在加载太慢了，我换了https://miao.su/这个图床后，秒加载|´・ω・)ノ
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @某二次元的波波 我现在背景直接用的 Github Pages，有点慢正常，但能保证资源可用性
      你知道我为什么宁愿用慢一点的 Github Pages 吗，就是因为在两年前 https://miao.su/ 宕了两周，搞得我差点没能把数据拿出来
      后来我也尝试过好几个其他的国内图床，都不稳定，最后才打算直接用的 Github
      Reply
      1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 emmmm......好吧，不过加载确实太慢了，动态列表要好久才加载出来，不知道能不能换个好点的方法?
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @某二次元的波波 只有替换进去的壁纸壁纸这类静态资源才走的 Github 鸭，动态列表载入慢那你只能怪B站和家里网络了
          Reply
          1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
            @神代綺凜 不是，是顶栏的动态下拉列表，上次更新了以后那个列表也有背景了，如果背景没加载出来动态列表也加载不出来

            就这个列表
            Reply
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @某二次元的波波 看一下使用里的说明

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

              我还是去加个粗好了……

              Reply
              1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
                @神代綺凜 哦好的，解决了，谢谢
                Reply
  7. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    chrome版本：72.0.3626.121（正式版本） （64 位）
    样式似乎会导致播放页面的标题无法选中复制
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan 感谢反馈，这是我的疏忽，已修复
      Reply
  8. nanami  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    怎么更新了有些地方还是和视频里有些差别
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @nanami 那是一年半前的视频了……后来b站改了很多，有些地方已经不做成和最初版本一样的效果了
      Reply
  9. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3725.0(Google Chrome 74.0.3725.0)
    终于等来了新版样式的更新！ヾ(≧∇≦*)ゝ
    不过个人觉得播放器下方的功能按钮那个圆角有点过大了，跟其他的地方相比突兀了点
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan 因为那一条比较窄所以就想直接做成两边半圆了，那这么说还是统一一下圆角大小比较好？
      Reply
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3726.0(Google Chrome 74.0.3726.0)
        @神代綺凜 你决定啊！我有得用就感激不尽啦φ(￣∇￣o)
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
          @seasmogchan
          Reply
  10. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)
    像您网站这种乳白色的 半透明 遮罩就是一个很好的解决方法 图片背景能显示出来 文字还可以很好的识别

    https://i.imgur.com/bXegtBR.png 至于 请使用真实邮箱地址，否则一概不会通过审核
    同步通过审核无所谓只要大佬能看到就行真实邮箱是不可能用的

    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @LelaGuerri 莫，真实邮箱不是说要用“真实”邮箱，只是那种123@123.com的邮箱我会直接标为垃圾评论，你懂意思就好
      Reply
  11. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)
    您好大佬 可否在这个 B站主题的评论区位置增加一个 像 您网站 评论区这种乳白色半透明的遮罩图层呢
    因为 用了自定义壁纸 壁纸的颜色 一多 或者图案 太暗 或者太复杂 评论区的字就很难识别了
    我附上一张图.. 您看下... https://i.imgur.com/OMptVY9.jpg
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @LelaGuerri 这是因为我还没写新版页面的样式
      Reply
      1. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)
        @神代綺凜 嗯 嗯 能传达到 给大佬看到 就好-.-
        Reply
  12. 子痕  Windows 10 x64 Edition(Windows 10 x64 Edition) / Sogou Explorer(Sogou Explorer)
    作为中年大叔，不太习惯年轻人又萌又这么多动画图片的网站。
    Reply
  13. 教书先生  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    我可以申请一下友链吗
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @教书先生 因为目前友链太多所以不考虑再加，很抱歉
      Reply
  14. 鸟叔  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.2.5.4000(Maxthon 5.2.5.4000)
    网站主题真萌
    Reply
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @鸟叔 |´・ω・)ノ 谢谢夸奖
      Reply
  15. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / 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)
      @cakeyui 可我这里也是没有问题的啊……
      Reply
      1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 ∠( ᐛ 」∠)＿没法发图 我丢外链了 http://www.tzr.me/image/h8Iw9 就很奇怪。。。
        Reply
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @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
          1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜 感谢 因为首页修复了。。我以为代码更新到最全了 现在都能正常显示了
            Reply
  16. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    大佬..很喜欢您主页的样式 于是偷偷借用了下css 但是主页一行只能显示一篇文章,请问我缺少了什么修改?
    Reply
    1. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @OASIS 刚刚才仔细看了大佬的注释
      就不麻烦大佬啦~
      Reply
  17. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    突然间Stylish被视为恶意脚本后 改用油猴子 版本的Stylish轻捷 然后发现评论区的留白 是尖角 不是圆角 老版界面的播放器边上白色 遮住了背景
    Reply
    1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @ss 不知 油猴子版的Stylish 会不会造成显示异常
      Reply
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @ss 用Stylus
        Reply
        1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @神代綺凜 试了一下 Stylus 和 Stylish的插件浏览器都安装不了显示恶意插件555
          Reply
          1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @ss 你要是 Chrome 的话从第三方网站直接下 crx 装扩展肯定装不了啊，都提示恶意
            https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
            Reply
  18. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / 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)
      @cakeyui 已修复
      Reply
      1. Stephanie  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
        @神代綺凜 奇怪，明明已经是最新版，但是我还是存在这个问题耶。。
        Reply
  19. AppleMiku  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    dalao厉害哇，bilibli好看多了
    Reply
  20. 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