神代綺凜

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

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

終わりました。

Bilibili萌化 ネコパラ

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

过去和未来

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

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

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

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

附加功能

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

安装

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

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

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

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
季付$47CN2 GIA线路,1核/1G内存/20G硬盘/1T@2.5Gbps【点击购买
Last modification:September 8th, 2019 at 06:13 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

500 comments

  1. 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 位)
    样式似乎会导致播放页面的标题无法选中复制
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan 感谢反馈,这是我的疏忽,已修复
  2. nanami  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
    怎么更新了有些地方还是和视频里有些差别

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @nanami 那是一年半前的视频了……后来b站改了很多,有些地方已经不做成和最初版本一样的效果了
  3. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3725.0(Google Chrome 74.0.3725.0)
    终于等来了新版样式的更新!ヾ(≧∇≦*)ゝ
    不过个人觉得播放器下方的功能按钮那个圆角有点过大了,跟其他的地方相比突兀了点
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan 因为那一条比较窄所以就想直接做成两边半圆了,那这么说还是统一一下圆角大小比较好?
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3726.0(Google Chrome 74.0.3726.0)
        @神代綺凜 你决定啊!我有得用就感激不尽啦φ( ̄∇ ̄o)
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
  4. 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 至于 请使用真实邮箱地址,否则一概不会通过审核
    同步通过审核无所谓只要大佬能看到就行真实邮箱是不可能用的

    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的邮箱我会直接标为垃圾评论,你懂意思就好
  5. 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
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @LelaGuerri 这是因为我还没写新版页面的样式
      1. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)
        @神代綺凜 嗯 嗯 能传达到 给大佬看到 就好-.-
  6. 子痕  Windows 10 x64 Edition(Windows 10 x64 Edition) / Sogou Explorer(Sogou Explorer)
    作为中年大叔,不太习惯年轻人又萌又这么多动画图片的网站。
  7. 教书先生  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    我可以申请一下友链吗
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @教书先生 因为目前友链太多所以不考虑再加,很抱歉
  8. 鸟叔  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.2.5.4000(Maxthon 5.2.5.4000)
    网站主题真萌
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @鸟叔 |´・ω・)ノ 谢谢夸奖
  9. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    稍后再看时也有标签栏
    直播和小黑屋跑到第二排去了∠( ᐛ 」∠)_(才发现)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @cakeyui 可我这里也是没有问题的啊……
      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 就很奇怪。。。
        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;
          }
          }
          1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜 感谢 因为首页修复了。。我以为代码更新到最全了 现在都能正常显示了
  10. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    大佬..很喜欢您主页的样式 于是偷偷借用了下css 但是主页一行只能显示一篇文章,请问我缺少了什么修改?
    1. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @OASIS 刚刚才仔细看了大佬的注释
      就不麻烦大佬啦~
  11. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    突然间Stylish被视为恶意脚本后 改用油猴子 版本的Stylish轻捷 然后发现评论区的留白 是尖角 不是圆角 老版界面的播放器边上白色 遮住了背景
    1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @ss 不知 油猴子版的Stylish 会不会造成显示异常
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @ss 用Stylus
        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
          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
  12. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    标签栏的直播和小黑屋跑到第二排去了。。能修改下吗
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @cakeyui 已修复
      1. Stephanie  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
        @神代綺凜 奇怪,明明已经是最新版,但是我还是存在这个问题耶。。
  13. AppleMiku  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    dalao厉害哇,bilibli好看多了
  14. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    B站这两天就要把“数码”提为一级分区了。看来你的样式要稍微修改一哈了ヾ(≧∇≦*)ゝ
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @seasmogchan 已改
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 B站现在一级分区多了那么多个,上面导航栏一大排其实也不好看了╮(╯▽╰)╭
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @seasmogchan 到时候推倒重写,做个收纳
          1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜 期待
  15. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
    喵~
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @梨子 OωO
      1. 梨子  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜 主题好漂亮!
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @梨子 |´・ω・)ノ谢谢夸奖
  16. 小芋头  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)
    博主,你的博客主题是什么呀 好想要噢qwq
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @小芋头 Footer有
  17. 木名小威  Windows 10 x64 Edition(Windows 10 x64 Edition) / Opera 56.0.3051.116(Opera 56.0.3051.116)
    建议添加文本描边以及改色选项,不然壁纸颜色太深会看不清字(๑•̀ㅁ•́ฅ)
  18. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
    看番的时候倒是没问题了,但是在看视频的时候就会出现标题栏下面没有留白造成标题文字看不清楚问题,咋搞呢
    1. ArrayCat  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
      @ArrayCat 我试了下好像是因为B站新版播放器的问题??
      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
        @ArrayCat 因为最近事情多还没有为新版播放器编写样式

        以后会完全重写

  19. uiiiiii  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
    背景好像刷不出来啦?
    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 了,应该正常了
      1. uiiiiii  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 62.0.3202.94(Google Chrome 62.0.3202.94)
        @神代綺凜 感谢,可以了,就是图片刷出来需要等一点点时间
  20. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 68.0.3440.33(Google Chrome 68.0.3440.33)
    大佬啊,今天艹猫的背景莫得了
    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 了,应该正常了