ブログビルド

y-yamasaki · y-yamasaki · commit 25692d83b3e0 · 2025-12-01T19:35:51.000+09:00
diff --git a/WebSite/assets/css/blog.css b/WebSite/assets/css/blog.css
@@ -928,3 +928,66 @@
 .section--related {
     margin-top: 4rem;
 }
+
+/* ==========================================================================
+    Giscus layout tweaks
+   ========================================================================== */
+/* コンテナ（コメント領域全体） */
+.post-comments {
+    max-width: 900px; /* コンテンツ幅を制限して中央寄せ */
+    margin: 2rem auto; /* 上下の余白 */
+    padding: 0.75rem; /* 内側余白（iframe 周囲）*/
+    box-sizing: border-box;
+    border-radius: 12px;
+    background: var(--card-bg, #fff);
+    box-shadow: 0 6px 18px rgba(20, 30, 40, 0.06);
+    overflow: hidden;
+}
+
+/* giscus が生成するラッパー要素（外側） */
+.post-comments .giscus {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* iframe 要素本体のスタイル（giscus が作る iframe に .giscus-frame が付く） */
+.post-comments .giscus-frame {
+    width: 100%;
+    min-height: 240px; /* 必要に応じて調整 */
+    height: auto; /* giscus は自動リサイズするはず */
+    border: 0;
+    background: transparent;
+    border-radius: 8px;
+    /* 見た目の微調整 */
+    box-shadow: none;
+}
+
+/* 小さい画面での調整 */
+@media (max-width: 640px) {
+    .post-comments {
+        margin: 1.25rem 1rem;
+        padding: 0.6rem;
+        border-radius: 8px;
+    }
+}
+
+/* ダークモードの微調整（親ドキュメント側の背景を整える） */
+@media (prefers-color-scheme: dark) {
+    .post-comments {
+        background: #0b0b0d;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
+    }
+    /* iframe 内の色は変更できないので透明背景で馴染ませる */
+    .post-comments .giscus-frame {
+        background: transparent;
+    }
+}
+
+/* （オプション）外側に小さな見出しを付けたい場合 */
+.post-comments .comments-header {
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+    color: var(--muted-text, #666);
+    padding-left: 0.25rem;
+}
diff --git a/WebSite/blog/blog_00001.html b/WebSite/blog/blog_00001.html
@@ -171,7 +171,7 @@ <h2 id="最後に">最後に</h2><p>最後まで読んでくださり、あり
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="ブログはじめました"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00002.html b/WebSite/blog/blog_00002.html
@@ -301,7 +301,7 @@ <h2 id="まとめ">まとめ</h2><p>今回の Odin 導入で学んだことを
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Odin を導入してみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00003.html b/WebSite/blog/blog_00003.html
@@ -313,7 +313,7 @@ <h2 id="最後に">最後に</h2><p>Odin を使ったコンテキストエディ
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Odin でコンテキストエディター作ってみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00004.html b/WebSite/blog/blog_00004.html
@@ -172,7 +172,7 @@ <h3 id="最後に">最後に</h3><p>以上 Modoium Remote 導入議事録でし
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Modoium Remote 導入してみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00005.html b/WebSite/blog/blog_00005.html
@@ -297,7 +297,7 @@ <h3 id="参考資料">参考資料</h3><p><a href="https://qiita.com/Ella_Engelh
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="DropBox APIを使ってみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00006.html b/WebSite/blog/blog_00006.html
@@ -248,7 +248,7 @@ <h2 id="まとめ">まとめ</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="UE5プラグイン開発"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00007.html b/WebSite/blog/blog_00007.html
@@ -173,7 +173,7 @@ <h2 id="まとめ">まとめ</h2><p>この記事で行ったこと：</p>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="RClone導入フロー"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00008.html b/WebSite/blog/blog_00008.html
@@ -319,7 +319,7 @@ <h2 id="まとめ">まとめ</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Discord Bot のアーキテクチャを見直した話"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00009.html b/WebSite/blog/blog_00009.html
@@ -212,7 +212,7 @@ <h2 id="最終的な動作感">最終的な動作感</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="ZedでC#開発環境を構築してみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00010.html b/WebSite/blog/blog_00010.html
@@ -241,7 +241,7 @@ <h2 id="まとめ">まとめ</h2><p>プロジェクトにおけるアセット
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="RClone運用フロー"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00011.html b/WebSite/blog/blog_00011.html
@@ -159,7 +159,7 @@ <h2 id="まとめ">まとめ</h2><p>というわけで、今回は僕の盛大
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="自作Discord Botを公開したらスパムに悪用された話"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00012.html b/WebSite/blog/blog_00012.html
@@ -260,7 +260,7 @@ <h2 id="まとめ">まとめ</h2><p>サーバーレスな環境でも GAS を組
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="静的サイトにお問い合わせフォームを実装する (GAS連携)"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00013.html b/WebSite/blog/blog_00013.html
@@ -201,7 +201,7 @@ <h2 id="まとめ">まとめ</h2><p>今回の改修で作品の閲覧体験（UX
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="ポートフォリオの詳細表示をモーダル化してUXを改善する"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00014.html b/WebSite/blog/blog_00014.html
@@ -185,7 +185,7 @@ <h2 id="まとめ">まとめ</h2><p>リファクタリングというと大掛
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="CSSのリファクタリングを手軽にしてみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00015.html b/WebSite/blog/blog_00015.html
@@ -191,7 +191,7 @@ <h2 id="まとめ">まとめ</h2><p>初めて p5.js を触ってみましたが
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="p5.jsで背景アニメーションを実装してみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00016.html b/WebSite/blog/blog_00016.html
@@ -163,7 +163,7 @@ <h2 id="まとめ">まとめ</h2><p>Zedの <code>@</code> 機能は単なるル
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="ZedのRuleの追加について"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00017.html b/WebSite/blog/blog_00017.html
@@ -174,7 +174,7 @@ <h2 id="まとめ">まとめ</h2><p>Text Threadによる履歴管理とスラッ
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="ZedのAI機能活用術：Text Threadとスラッシュコマンド徹底解説"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/blog_00018.html b/WebSite/blog/blog_00018.html
@@ -217,7 +217,7 @@ <h3 id="まとめ">まとめ</h3><p>DiscordoはターミナルからDiscordを
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="DiscordoでDiscordをターミナルから触ってみた"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00001.html b/WebSite/blog/en/blog_00001.html
@@ -181,7 +181,7 @@ <h2 id="finally">Finally</h2><p>Thank you for reading to the end!</p>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Started a Blog"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00002.html b/WebSite/blog/en/blog_00002.html
@@ -299,7 +299,7 @@ <h2 id="summary">Summary</h2><p>Summarizing what I learned from this Odin introd
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Trying out Odin Inspector"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00003.html b/WebSite/blog/en/blog_00003.html
@@ -310,7 +310,7 @@ <h2 id="finally">Finally</h2><p>The context editor using Odin felt quite compati
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Tried Creating a Context Editor with Odin"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00004.html b/WebSite/blog/en/blog_00004.html
@@ -181,7 +181,7 @@ <h3 id="finally">Finally</h3><p>That was the Modoium Remote introduction minutes
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Tried Introducing Modoium Remote"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00005.html b/WebSite/blog/en/blog_00005.html
@@ -318,7 +318,7 @@ <h3 id="reference-materials">Reference Materials</h3><p><a href="https://qiita.c
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Tried using Dropbox API"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00006.html b/WebSite/blog/en/blog_00006.html
@@ -247,7 +247,7 @@ <h2 id="summary">Summary</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="UE5 Plugin Development"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00007.html b/WebSite/blog/en/blog_00007.html
@@ -175,7 +175,7 @@ <h2 id="summary">Summary</h2><p>What I did in this article:</p>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="RClone Introduction Flow"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00008.html b/WebSite/blog/en/blog_00008.html
@@ -323,7 +323,7 @@ <h2 id="summary">Summary</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Reevaluating Discord Bot Architecture"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00009.html b/WebSite/blog/en/blog_00009.html
@@ -222,7 +222,7 @@ <h2 id="final-operation-feel">Final operation feel</h2><ul>
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Tried Building a C# Development Environment in Zed"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00010.html b/WebSite/blog/en/blog_00010.html
@@ -258,7 +258,7 @@ <h2 id="summary">Summary</h2><p>Asset management in projects is an important iss
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="RClone Operation Flow"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00011.html b/WebSite/blog/en/blog_00011.html
@@ -174,7 +174,7 @@ <h2 id="summary">Summary</h2><p>So, this was a story about my grand screw-up.
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Story of My Self-Made Discord Bot Being Abused for Spam When I Published It"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00012.html b/WebSite/blog/en/blog_00012.html
@@ -264,7 +264,7 @@ <h2 id="summary">Summary</h2><p>Even in a serverless environment, I was able to
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Implementing a Contact Form on a Static Site (GAS Integration)"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00013.html b/WebSite/blog/en/blog_00013.html
@@ -207,7 +207,7 @@ <h2 id="summary">Summary</h2><p>I think the viewing experience (UX) of works has
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Improving UX by Modaling Portfolio Details"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00014.html b/WebSite/blog/en/blog_00014.html
@@ -193,7 +193,7 @@ <h2 id="summary">Summary</h2><p>Refactoring tends to be imagined as a large-scal
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Easily Refactored CSS"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00015.html b/WebSite/blog/en/blog_00015.html
@@ -199,7 +199,7 @@ <h2 id="summary">Summary</h2><p>I touched p5.js for the first time, but the expe
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Tried Implementing Background Animation with p5.js"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00016.html b/WebSite/blog/en/blog_00016.html
@@ -178,7 +178,7 @@ <h2 id="summary">Summary</h2><p>Zed&#39;s <code>@</code> feature is a very excel
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="Adding Rules in Zed"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00017.html b/WebSite/blog/en/blog_00017.html
@@ -181,7 +181,7 @@ <h2 id="summary">Summary</h2><p>By combining history management with Text Thread
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="## Mastering Zed's AI Features: A Comprehensive Guide to Text Threads and Slash Commands"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/blog/en/blog_00018.html b/WebSite/blog/en/blog_00018.html
@@ -217,7 +217,7 @@ <h3 id="summary">Summary</h3><p>Discordo is a convenient tool that allows you to
       data-repo-id="R_kgDOM8I6Fg"
       data-category="Comment"
       data-category-id="DIC_kwDOM8I6Fs4CzPPY"
-      data-mapping="I Tried Controlling Discord from the Terminal with Discordo"
+      data-mapping="og:title"
       data-strict="0"
       data-reactions-enabled="1"
       data-emit-metadata="0"
diff --git a/WebSite/tools/build-blog.js b/WebSite/tools/build-blog.js
