Hololive-Keyboard

Hololive-Keyboard.kbd.json

[
  {
    "name": "Hololive-Keyboard",
    "pcb": false
  },
  [
    "~\n`\n\nろ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwsqXO3l8Eoic0KQ_KAhLr1Baqs5yaqEd014A=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "!\n1\n\nぬ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxaWUdzt82S8kJKwhB_PVcxXNts-FDyEpWOZA=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "@\n2\n\nふ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxK7MgkkkkevOHz2QIO3eXObgqG1IjDmNWAhQ=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "#\n3\nぁ\nあ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJztlxp1NvyEG3ULspVuGLwdoweCnhDsZDzgqA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "$\n4\nぅ\nう\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxfgUMjP8djvf_lt7DwC_oF6P0sTHZSh17W9Q=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "%\n5\nぇ\nえ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzsH6iY-VYGVTKqpabDGtK1IO7N7eIDJV-4DQ=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "^\n6\nぉ\nお\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzPUElg3_AunkFVflcyLEGybFmP3Txpg1c-AQ=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "&\n7\nゃ\nや\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyDhi8y6CDBgpb-yV0T-aiZc8oXwMG7NacqOg=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "*\n8\nゅ\nゆ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyjQyL-CUMj0IcVwlOayHimH_TeXkUYYGbSRw=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "(\n9\nょ\nよ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxrwwsyQAAYVrQJbsy6po7XlNIZQElR8RVK-g=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    ")\n0\nを\nわ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJziIdV2an9vux9cjF8yiC-xTp_hYntSFFiXDA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "_\n-\n\nほ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJy7QGHYsXYlhW2YEhh3okJb2DEksj-SHQwxNg=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "+\n=\n\nへ\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1231597584978006016/clt6_Ye0_400x400.jpg\" width=36 height=36>",
    {
      "w": 2
    },
    "Backspace"
  ],
  [
    {
      "w": 1.5
    },
    "Tab",
    "Q\n\n\nた\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwHPp_TkvcWJyblt9XVYDjNSjrj6KdpQSCQNQ=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "W\n\n\nて\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxqyp7DhLSSrSYRc5HaLcq5QvJvRp3jDnxTeA=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "E\n\n\nい\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1200038641256427520/1pHKwuIc_400x400.jpg\" width=36 height=36>",
    "R\n\n\nす\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1235830911297445890/QuWSYklq_400x400.jpg\" width=36 height=36>",
    "T\n\n\nか\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzGvZJuJ92qM5WcfBcDZqPFSj_CGIEYp9VFmA=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "Y\n\n\nん\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1186979284319006720/gH6xdlYB_400x400.jpg\" width=36 height=36>",
    "U\n\n\nな\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxpi3N0NvZfBKKkEPPXx2U5xmQPNUT8AVOj1g=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "I\n\n\nに\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyL8gbKgJBHALWhWp56B6QTdNUPb03zwvT1uw=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "O\n\n\nら\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzkosu0CblBfltbvRLYDsnxjRSbVQbe1EOCCg=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "P\n\n\nせ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyMxAFFr0_eQYgUQWkV6CWlx_t1NETncJygQA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "{\n[\n\n゛\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxhqKttn-qOqOJnzcn_emBTUkPjnj3uLr8iBg=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "}\n]\n\n゜\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJycVojkNzxxSWQYbARL3goLvNpbxA8OrSoLsA=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 1.5
    },
    "|\n\\\n\nむ"
  ],
  [
    {
      "w": 1.75
    },
    "Caps Lock",
    "A\n\n\nち\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1251649431696367616/f70eFyCU_400x400.jpg\" width=36 height=36>",
    "S\n\n\nと\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwKuNhye0SEMSrtM5HUe5aVtKyxAvmdDlSpWw=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "D\n\n\nし\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1235823220076326914/jestSBtg_400x400.jpg\" width=36 height=36>",
    "F\n\n\nは\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyy9dNvqHjAodr0od_Y-FuRdHgSFfLFv867LA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "G\n\n\nき\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1187271308695891973/nEzmjBYK_400x400.jpg\" width=36 height=36>",
    "H\n\n\nく\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJz8A2msNHjFHug_HtxnGlwLKCZwwZcQ2AkMpQ=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "J\n\n\nま\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzcbPP43MVs2mlTg4a-u2W1D5g1OBYeJO6pHQ=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "K\n\n\nの\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwQ-d9UTMFsLifyHKfEGU-GILwojhtCEk8qEA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "L\n\n\nり\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzzirDjRJkofWVeoE6gVjodJ0VXaJhy4b_CLg=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    ":\n;\n\nれ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwGLtsKLOQxlnjn0WVNGDBkYN7vsTbvGdjWxg=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "\"\n'\n\nけ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzh0fHJdZRfUp2zHg6At56YclVwmSTdwJj2kw=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    {
      "w": 2.25
    },
    "Enter"
  ],
  [
    {
      "w": 2.25
    },
    "Shift",
    "Z\n\nっ\nつ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwDg8CoHtj7qnk1aj5h75lIWOaH-__JNzqNGA=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "X\n\n\nさ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJw__74rAt8SKtuBzHDGXg7AlSXGjJ0aO1giMw=s900-c-k-c0x00ffffff-no-rj\" width=36 height=36>",
    "C\n\n\nそ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJw7R8J8buhX7Cw1m63vK2jlKFv-9YhFf-TQaA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "V\n\n\nひ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJzNykt2tGGcgnxaZXICKXjkYRN9CK4IIhyNww=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "B\n\n\nこ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJw9_oqF22fvOEqGj2rHC12PadwHN-NlFL4DeA=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "N\n\n\nみ\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwBxPdKpbHq1LKbJb_HIj691WraJza8FWnYZw=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "M\n\n\nも\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJxeNWA_oVxR5sKIs9hQotV_M9zS3NtgqB3tcw=s900-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "<\n,\n\nね\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJyyvVkTaQKtrvdB2x-iO0viexozaTsURAP6Gg=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    ">\n.\n\nる\n\n\n\n\n\n<img src=\"https://yt3.ggpht.com/a/AATXAJwH2AK290hk9Bg1IgflzfJrMmx1ywyOWtg8mg=s288-c-k-c0xffffffff-no-rj-mo\" width=36 height=36>",
    "?\n/\n\nめ\n\n\n\n\n\n<img src=\"https://pbs.twimg.com/profile_images/1245360323130867712/VkqtXEaY_400x400.jpg\" width=36 height=36>",
    {
      "w": 2.75
    },
    "Shift"
  ],
  [
    {
      "w": 1.25
    },
    "Ctrl",
    {
      "w": 1.25
    },
    "Win",
    {
      "w": 1.25
    },
    "Alt",
    {
      "a": 7,
      "w": 6.25
    },
    "",
    {
      "a": 4,
      "w": 1.25
    },
    "Alt",
    {
      "w": 1.25
    },
    "Win",
    {
      "w": 1.25
    },
    "Menu",
    {
      "w": 1.25
    },
    "Ctrl"
  ]
]

Hololive-Keyboard.notes.md

Hololive Keyboard

ホロライブキーボードを作りました！

Hololive-Keyboard.style.css

.keylabel4 {
    display: inline-block;
    position: absolute;
    z-index: 0;
}

.keylabel4 > div > img {
    border-radius: 50%;
}

.keylabel0 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel1 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel2 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel3 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel5 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel6 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel7 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}

.keylabel8 {
    display: inline-block;
    position: absolute;
    z-index: 1;
}