Skip to content

Commit 8dc6ec8

Browse files
author
y-yamasaki
committed
toc強化
1 parent 58701dc commit 8dc6ec8

19 files changed

Lines changed: 235 additions & 0 deletions

‎WebSite/assets/css/blog.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -757,3 +757,99 @@
757757
color: var(--color-accent);
758758
font-weight: 600;
759759
}
760+
761+
/* ==========================================================================
762+
TOC Drawer Menu for Responsive
763+
========================================================================== */
764+
.toc-toggle {
765+
display: none; /* PCでは非表示 */
766+
position: fixed;
767+
bottom: 2rem;
768+
right: 1.5rem;
769+
z-index: 100;
770+
width: 56px;
771+
height: 56px;
772+
padding: 0;
773+
border: none;
774+
border-radius: 50%;
775+
background: var(--color-accent);
776+
color: #fff;
777+
cursor: pointer;
778+
transition: all 0.2s ease-in-out;
779+
box-shadow: var(--shadow-lg);
780+
justify-content: center;
781+
align-items: center;
782+
gap: 0.5rem;
783+
}
784+
785+
.toc-toggle span {
786+
display: none;
787+
}
788+
789+
.toc-toggle:hover {
790+
background: var(--color-accent-dark);
791+
transform: translateY(-3px);
792+
}
793+
794+
.toc-overlay {
795+
position: fixed;
796+
top: 0;
797+
left: 0;
798+
width: 100%;
799+
height: 100%;
800+
background: rgba(0, 0, 0, 0.6);
801+
z-index: 101;
802+
opacity: 0;
803+
visibility: hidden;
804+
transition:
805+
opacity 0.3s ease,
806+
visibility 0s 0.3s;
807+
}
808+
809+
@media (max-width: 999px) {
810+
.toc-toggle {
811+
display: flex; /* SP/Tabletで表示 */
812+
}
813+
814+
.post-sidebar {
815+
position: fixed;
816+
top: 0;
817+
right: 0;
818+
width: 100%;
819+
max-width: 320px;
820+
height: 100vh;
821+
height: 100dvh;
822+
background: var(--color-surface);
823+
z-index: 102;
824+
transform: translateX(100%);
825+
transition: transform 0.3s
826+
cubic-bezier(0.16, 1, 0.3, 1);
827+
display: block; /* display:noneを解除 */
828+
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
829+
overflow-y: auto;
830+
}
831+
832+
.post-sidebar.is-open {
833+
transform: translateX(0);
834+
}
835+
836+
.toc-overlay.is-open {
837+
opacity: 1;
838+
visibility: visible;
839+
transition-delay: 0s;
840+
}
841+
842+
.toc-sticky-container {
843+
position: static;
844+
padding: 2rem 1.5rem;
845+
}
846+
847+
.toc {
848+
border: none;
849+
padding: 0;
850+
}
851+
852+
.toc-list {
853+
max-height: none;
854+
}
855+
}

‎WebSite/assets/js/toc.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,41 @@ document.addEventListener("DOMContentLoaded", () => {
6464

6565
// すべての見出しを監視対象に追加
6666
headings.forEach((heading) => observer.observe(heading));
67+
68+
// --- TOC Drawer Menu Logic ---
69+
const tocToggle = document.querySelector(".toc-toggle");
70+
const postSidebar =
71+
document.querySelector(".post-sidebar");
72+
const tocOverlay = document.querySelector(".toc-overlay");
73+
const body = document.body;
74+
75+
if (tocToggle && postSidebar && tocOverlay) {
76+
const openToc = () => {
77+
postSidebar.classList.add("is-open");
78+
tocOverlay.classList.add("is-open");
79+
body.classList.add("no-scroll");
80+
};
81+
82+
const closeToc = () => {
83+
postSidebar.classList.remove("is-open");
84+
tocOverlay.classList.remove("is-open");
85+
body.classList.remove("no-scroll");
86+
};
87+
88+
tocToggle.addEventListener("click", (e) => {
89+
e.stopPropagation();
90+
postSidebar.classList.contains("is-open")
91+
? closeToc()
92+
: openToc();
93+
});
94+
95+
tocOverlay.addEventListener("click", closeToc);
96+
97+
// Close TOC when a link is clicked inside
98+
postSidebar
99+
.querySelectorAll(".toc a")
100+
.forEach((link) => {
101+
link.addEventListener("click", closeToc);
102+
});
103+
}
67104
});

‎WebSite/blog/blog_00001.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">ブログはじめました</h1>
7070
<p class="post-detail__description">筆者の自己紹介</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=diary">diary</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><h2 id="自己紹介">自己紹介</h2><p>こんにちは、パン君です。</p>
7475
<p>私はとあるゲーム会社で働きながら、インディーズや個人制作でも活動しているゲームエンジニアです。</p>
@@ -125,6 +126,11 @@ <h2 class="section__title">おすすめ記事</h2>
125126
<div id="recommendList" class="recommend-grid"></div>
126127
</section>
127128
</main>
129+
<div class="toc-overlay"></div>
130+
<button type="button" class="toc-toggle" aria-label="目次を開く">
131+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
132+
<span>目次</span>
133+
</button>
128134
</div>
129135
<script src="../assets/js/layout.js" defer></script>
130136
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00002.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">Odin を導入してみた</h1>
7070
<p class="post-detail__description">チームで Odin 導入時にハマったポイントと対処方法</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=unity">unity</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です。</p>
7475
<p>今回はインディーズのプロジェクトで <strong>Odin Inspector</strong> を導入した際に起きたトラブルと、そのときに行った対処についてまとめます。</p>
@@ -255,6 +256,11 @@ <h2 class="section__title">おすすめ記事</h2>
255256
<div id="recommendList" class="recommend-grid"></div>
256257
</section>
257258
</main>
259+
<div class="toc-overlay"></div>
260+
<button type="button" class="toc-toggle" aria-label="目次を開く">
261+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
262+
<span>目次</span>
263+
</button>
258264
</div>
259265
<script src="../assets/js/layout.js" defer></script>
260266
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00003.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">Odin でコンテキストエディター作ってみた</h1>
7070
<p class="post-detail__description">Odin でプランナー向けのコンテキストエディターを作った話</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=unity">unity</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です。</p>
7475
<p>インディーズのプロジェクトで <strong>Odin Inspector</strong> を使用して、<br>プランナーが Unity の知見をあまり持っていなくても触れるような <strong>プロジェクト専用の「コンテキストエディター」</strong> を作成しました。</p>
@@ -267,6 +268,11 @@ <h2 class="section__title">おすすめ記事</h2>
267268
<div id="recommendList" class="recommend-grid"></div>
268269
</section>
269270
</main>
271+
<div class="toc-overlay"></div>
272+
<button type="button" class="toc-toggle" aria-label="目次を開く">
273+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
274+
<span>目次</span>
275+
</button>
270276
</div>
271277
<script src="../assets/js/layout.js" defer></script>
272278
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00004.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">Modoium Remote 導入してみた</h1>
7070
<p class="post-detail__description">Unity開発でスマホ端末がプラットフォームの際にデバッグが便利になる機能の紹介</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=unity">unity</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a> <a class="tag" href="../blog.html?tag=android">android</a> <a class="tag" href="../blog.html?tag=ios">ios</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です</p>
7475
<p>インディーズのプロジェクトで Modoium Remote を導入して使用してみました。<br>導入方法と詰まった事を話していきます。 </p>
@@ -126,6 +127,11 @@ <h2 class="section__title">おすすめ記事</h2>
126127
<div id="recommendList" class="recommend-grid"></div>
127128
</section>
128129
</main>
130+
<div class="toc-overlay"></div>
131+
<button type="button" class="toc-toggle" aria-label="目次を開く">
132+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
133+
<span>目次</span>
134+
</button>
129135
</div>
130136
<script src="../assets/js/layout.js" defer></script>
131137
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00005.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">DropBox APIを使ってみた</h1>
7070
<p class="post-detail__description">GitLFSの無料ユーザーを救済します！</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=git">git</a> <a class="tag" href="../blog.html?tag=api">api</a> <a class="tag" href="../blog.html?tag=dropbox">dropbox</a> <a class="tag" href="../blog.html?tag=cloudstrage">cloudstrage</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です</p>
7475
<p>今回は自作 GameEngine のファイル管理関連です。</p>
@@ -251,6 +252,11 @@ <h2 class="section__title">おすすめ記事</h2>
251252
<div id="recommendList" class="recommend-grid"></div>
252253
</section>
253254
</main>
255+
<div class="toc-overlay"></div>
256+
<button type="button" class="toc-toggle" aria-label="目次を開く">
257+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
258+
<span>目次</span>
259+
</button>
254260
</div>
255261
<script src="../assets/js/layout.js" defer></script>
256262
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00006.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">UE5プラグイン開発</h1>
7070
<p class="post-detail__description">ゲーム開発におけるUE5のプラグイン開発</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=ue5">ue5</a> <a class="tag" href="../blog.html?tag=cpp">cpp</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です</p>
7475
<p>今回はUE5のゲーム開発を行う際に気にしておくと、次回プロジェクト以降に便利になるプラグイン化についてです。</p>
@@ -202,6 +203,11 @@ <h2 class="section__title">おすすめ記事</h2>
202203
<div id="recommendList" class="recommend-grid"></div>
203204
</section>
204205
</main>
206+
<div class="toc-overlay"></div>
207+
<button type="button" class="toc-toggle" aria-label="目次を開く">
208+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
209+
<span>目次</span>
210+
</button>
205211
</div>
206212
<script src="../assets/js/layout.js" defer></script>
207213
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00007.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">RClone導入フロー</h1>
7070
<p class="post-detail__description">Windows + Git Bash環境でrcloneを導入し、Google Driveと連携するまでの手順まとめ</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=tool">tool</a> <a class="tag" href="../blog.html?tag=cloudstrage">cloudstrage</a> <a class="tag" href="../blog.html?tag=git">git</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは！パン君です</p>
7475
<p>WindowsでGoogle Driveと連携し、大容量ファイルをrcloneで管理します。</p>
@@ -127,6 +128,11 @@ <h2 class="section__title">おすすめ記事</h2>
127128
<div id="recommendList" class="recommend-grid"></div>
128129
</section>
129130
</main>
131+
<div class="toc-overlay"></div>
132+
<button type="button" class="toc-toggle" aria-label="目次を開く">
133+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
134+
<span>目次</span>
135+
</button>
130136
</div>
131137
<script src="../assets/js/layout.js" defer></script>
132138
<script src="../assets/js/ui.js"></script>

‎WebSite/blog/blog_00008.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
<h1 class="post-detail__title">Discord Bot のアーキテクチャを見直した話</h1>
7070
<p class="post-detail__description">Discord Bot の構成メモ コマンド／イベントをプラグイン的に追加</p>
7171
<p class="post-detail__tags"><a class="tag" href="../blog.html?tag=discord">discord</a> <a class="tag" href="../blog.html?tag=nodejs">nodejs</a> <a class="tag" href="../blog.html?tag=architecture">architecture</a> <a class="tag" href="../blog.html?tag=plugin">plugin</a> <a class="tag" href="../blog.html?tag=tool">tool</a></p>
72+
7273
</header>
7374
<section class="post-detail__body markdown-body"><p>こんにちは、パン君です。</p>
7475
<p>この記事では、個人で運用している <strong>Discord Bot のアーキテクチャをどう組み直したか</strong> をまとめます。</p>
@@ -273,6 +274,11 @@ <h2 class="section__title">おすすめ記事</h2>
273274
<div id="recommendList" class="recommend-grid"></div>
274275
</section>
275276
</main>
277+
<div class="toc-overlay"></div>
278+
<button type="button" class="toc-toggle" aria-label="目次を開く">
279+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20" aria-hidden="true"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path></svg>
280+
<span>目次</span>
281+
</button>
276282
</div>
277283
<script src="../assets/js/layout.js" defer></script>
278284
<script src="../assets/js/ui.js"></script>

0 commit comments

Comments
 (0)