変更内容はREADME.mdを読みましょう

README.md

@@ -1,3 +1,13 @@
 # ゆずねっとサポート
 
 本家：https://github.com/Daichimarukana/support_uwuzu_net
+
+## 変更点
+- ダークモード対応
+- 記事をMarkdownファイルで記述に
+- jQueryからVanilla JSへ移管
+- フッター+クレジットを追加
+- CSS短縮
+- コード整形
+- モバイル表示のサイズを最小限に変更
+- 記事画面で検索ボックスを削除

css/dark.css

@@ -0,0 +1,81 @@
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #0b0b0b;
+    }
+
+    .top {
+        background-color: #ffc832;
+    }
+
+    .top .left a {
+        color: #000000;
+    }
+
+    .top .right .searchbox {
+        border: solid 1px #000000;
+        background-color: #0b0b0b;
+        color: #ffffff;
+    }
+
+    main .contents .items:hover {
+        box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    main .contents .items {
+        background-color: #181616;
+    }
+
+    main h1,
+    main p,
+    main .contents .items h1,
+    main .contents .items p,
+    main .contents .items .date,
+    main .article .date,
+    main .article h1,
+    main .article h2,
+    main .article h3,
+    main .article p {
+        color: #f0f0f0;
+    }
+
+    main .article td,
+    th {
+        border: solid 1px #f0f0f0;
+    }
+
+    main .article pre,
+    .link_btn,
+    .error p {
+        color: #0b0b0b;
+    }
+
+    main .article pre {
+        background-color: #f0f0f0;
+    }
+
+    .link_btn {
+        background-color: #ffc832;
+    }
+
+    .error {
+        background-color: #ff4848;
+        box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.15);
+    }
+
+    .error p {
+        text-shadow: 0 0 0 #0b0b0b;
+    }
+
+    footer {
+        background-color: #000000;
+        color: #ffffff;
+    }
+
+    footer a {
+        color: #ffffff;
+    }
+
+    ul, li, ol {
+        color: #ffffff;
+    }
+}

css/layout.css

@@ -3,8 +3,10 @@
 body {
     margin: 0px;
     width: 100%;
-    height: fit-content;
+    height: 100%;
-    background-color: #f7f7f7;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100vh;
 }
 
 .top {
@@ -13,7 +15,6 @@ body {
     height: 64px;
     display: flex;
     justify-content: space-between;
-    background-color: #ffc832;
     border-radius: 0px 0px 15px 15px;
 }
 
@@ -40,7 +41,6 @@ body {
     width: fit-content;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     margin: 8px 0px;
-    color: #ffffff;
 }
 
 .top .right {
@@ -54,7 +54,6 @@ body {
     margin: 16px;
     border-radius: 25px;
     padding-left: 8px;
-    border: solid 1px #ffffff;
     outline: none;
 }
 
@@ -64,16 +63,12 @@ main {
 }
 
 main h1 {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 48px;
 }
 
 main p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
-    color: #252525;
     font-size: 16px;
 }
 
@@ -90,21 +85,13 @@ main .contents .items {
     cursor: pointer;
     width: calc(50% - 40px);
     height: fit-content;
-    background-color: #ffffff;
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 16px;
     transition: all 250ms ease-out;
 }
 
-main .contents .items:hover {
-    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.05);
-}
-
 main .contents .items h1 {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 24px;
     margin: 4px 0px;
 }
@@ -112,15 +99,11 @@ main .contents .items h1 {
 main .contents .items p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
-    color: #252525;
     font-size: 14px;
     margin: 4px 0px;
 }
 
 main .contents .items .date {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 12px;
 }
 
@@ -129,38 +112,36 @@ main .article {
     height: fit-content;
 }
 
-main .article .date {
+main h1
+main .contents .items .date,
+main .contents .items h1
+main .article .date,
+main .article h1,
+main .article h2,
+main .article h3 {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: bold;
-    color: #252525;
+}
+
+main .article .date {
     font-size: 16px;
 }
 
 main .article h1 {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 48px;
 }
 
 main .article h2 {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 32px;
 }
 
 main .article h3 {
-    font-family: "Inter", "BIZ UDPGothic", sans-serif;
-    font-weight: bold;
-    color: #252525;
     font-size: 24px;
 }
 
 main .article p {
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
-    color: #252525;
     font-size: 16px;
 }
 
@@ -174,16 +155,13 @@ main .article table {
 main .article td,
 th {
     padding: 4px 16px;
-    border: solid 1px #252525;
 }
 
 main .article pre {
     width: 100%;
     height: fit-content;
-    background-color: #252525;
     padding: 16px;
     border-radius: 15px;
-    color: #f7f7f7;
     font-family: "BIZ UDGothic", sans-serif;
 }
 
@@ -192,8 +170,6 @@ main .article pre {
     width: fit-content;
     height: 32px;
     padding: 8px 16px;
-    background-color: #ffc832;
-    color: #f7f7f7;
     text-decoration: none;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-weight: normal;
@@ -212,9 +188,7 @@ main .article pre {
     width: fit-content;
     height: 32px;
     z-index: 9999;
-    background-color: #ff4848;
     border-radius: 20px;
-    box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.15);
     text-decoration: none;
 }
 
@@ -226,16 +200,14 @@ main .article pre {
     line-height: 24px;
     font-family: "Inter", "BIZ UDPGothic", sans-serif;
     font-size: 16px;
-    color: #f7f7f7;
     color: transparent;
-    text-shadow: 0 0 0 #f7f7f7;
     text-align: center;
 }
 
 footer {
     margin: 0 auto;
     text-align: center;
-    background-color: #f0f0f0;
+    width: 100%;
 }
 
 @keyframes slideDown {

css/light.css

@@ -0,0 +1,75 @@
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #f7f7f7;
+    }
+
+    .top {
+        background-color: #ffc832;
+    }
+
+    .top .left a {
+        color: #ffffff;
+    }
+
+    .top .right .searchbox {
+        border: solid 1px #ffffff;
+    }
+
+    main .contents .items:hover {
+        box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.05);
+    }
+
+    main .contents .items {
+        background-color: #ffffff;
+    }
+
+    main h1,
+    main p,
+    main .contents .items h1,
+    main .contents .items p,
+    main .contents .items .date,
+    main .article .date,
+    main .article h1,
+    main .article h2,
+    main .article h3,
+    main .article p {
+        color: #252525;
+    }
+
+    main .article td,
+    th {
+        border: solid 1px #252525;
+    }
+
+    main .article pre,
+    .link_btn,
+    .error p {
+        color: #f7f7f7;
+    }
+
+    main .article pre {
+        background-color: #252525;
+    }
+
+    .link_btn {
+        background-color: #ffc832;
+    }
+
+    .error {
+        background-color: #ff4848;
+        box-shadow: 0 0px 48px 0 rgba(0, 0, 0, 0.15);
+    }
+
+    .error p {
+        text-shadow: 0 0 0 #f7f7f7;
+    }
+
+    footer {
+        background-color: #f0f0f0;
+        color: #000000;
+    }
+
+    footer a {
+        color: #000000;
+    }
+}

index.html

@@ -3,12 +3,14 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
-        <link rel="stylesheet" href="/css/style.css" type="text/css" />
+
         <link rel="icon" href="/img/uwuzu_net_icon.png" />
-        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
         <title>ゆずねっとサポート</title>
 
-        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+        <link rel="stylesheet" href="/css/layout.css" type="text/css" />
+        <link rel="stylesheet" href="/css/light.css" type="text/css" />
+        <link rel="stylesheet" href="/css/dark.css" type="text/css" />
     </head>
     <body>
         <div id="error" class="error" style="display: none">
@@ -45,13 +47,16 @@
         </main>
 
         <footer>
-            &copy;2024-2025
+            Created by
+            <a class="credit" href="https://daichimarukana.com">Daichimarukana</a>
+
             <br>
-            Created by Daichimarukana
+
-            <br>
+            Edited by
-            Edited by Last2014
+            <a class="credit" href="https://last2014.com">Last2014</a>
         </footer>
     </body>
 
     <script src="/js/script.js"></script>
+    <script src="/js/credit.js"></script>
 </html>

js/credit.js

@@ -0,0 +1,20 @@
+const footer = document.querySelector("footer");
+
+const startYear = 2024;
+const nowYear = new Date().getFullYear();
+
+if (startYear === nowYear)  {
+  footer.innerHTML = `
+    ©${String(startYear)} uwuzu.net
+
+    <br>
+
+  ` + footer.innerHTML;
+} else {
+  footer.innerHTML = `
+    &copy;${String(startYear)}-${String(nowYear)} uwuzu.net
+
+    <br>
+
+  ` + footer.innerHTML;
+}

js/script.js

@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     // URLパラメータから記事IDを取得
     const urlParams = new URLSearchParams(window.location.search);
-    const articleId = urlParams.get("articles");
+    const articleId = urlParams.get("article");
 
     if (articleId) {
       const article = articlesData.find(a => a && a.id === articleId);
@@ -90,7 +90,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (article) {
           showArticle(article);
           try {
-            history.pushState({ articleId: id }, article.title, `?articles=${id}`);
+            history.pushState({ articleId: id }, article.title, `?article=${id}`);
           } catch (error) {
             console.warn("History API操作に失敗しました:", error);
           }
@@ -191,6 +191,9 @@ document.addEventListener("DOMContentLoaded", async () => {
         for (let i = 0; i < articleList.length; i++) {
           articleList[i].style.display = "none";
         }
+
+        // 検索ボックス削除
+        document.querySelector(".right").remove();
       }
     }
   } catch (error) {