Skip to content

Commit def8350

Browse files
author
y-yamasaki
committed
前後ボタン追加
1 parent 3828839 commit def8350

39 files changed

Lines changed: 201 additions & 111 deletions

‎WebSite/assets/css/blog.css‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -587,30 +587,64 @@
587587
.post-detail__nav--bottom {
588588
margin-top: 3rem;
589589
margin-bottom: 0;
590-
text-align: center;
590+
/* 横並びにして中央寄せ、ボタン間の間隔を確保 */
591+
display: flex;
592+
justify-content: center;
593+
align-items: center;
594+
gap: 0.75rem;
595+
flex-wrap: wrap;
591596
}
592597

593-
.btn--back {
598+
/* 共通ボタンスタイル（back / prev / next） */
599+
.post-detail__nav--bottom .btn {
594600
display: inline-flex;
595601
align-items: center;
596602
gap: 0.5rem;
597-
padding: 0.6rem 1.2rem;
603+
padding: 0.5rem 0.9rem;
598604
border-radius: var(--radius-md);
599605
background: var(--color-surface);
600606
color: var(--color-text-muted);
601607
text-decoration: none;
602608
font-weight: 600;
609+
font-size: 12px;
603610
transition: var(--transition-smooth);
604611
border: 1px solid var(--color-border);
612+
/* 長いタイトルは省略表示 */
613+
max-width: 16rem;
614+
white-space: nowrap;
615+
overflow: hidden;
616+
text-overflow: ellipsis;
605617
}
606618

607619
.btn--back:hover {
620+
background: var(--color-accent-soft);
621+
color: var(--color-text);
622+
border-color: var(--color-accent);
623+
transform: translateY(-2px);
624+
}
625+
626+
/* 前の記事（左） */
627+
.btn--prev {
628+
padding-left: 0.8rem;
629+
}
630+
.btn--prev:hover {
608631
background: var(--color-accent-soft);
609632
color: var(--color-text);
610633
border-color: var(--color-accent);
611634
transform: translateX(-4px);
612635
}
613636

637+
/* 次の記事（右） */
638+
.btn--next {
639+
padding-right: 0.8rem;
640+
}
641+
.btn--next:hover {
642+
background: var(--color-accent-soft);
643+
color: var(--color-text);
644+
border-color: var(--color-accent);
645+
transform: translateX(4px);
646+
}
647+
614648
/* ==========================================================================
615649
8. パンくずリスト
616650
========================================================================== */

‎WebSite/blog/blog_00001.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -162,9 +162,7 @@ <h2 id="最後に">最後に</h2><p>最後まで読んでくださり、あり
162162

163163
</ul>
164164
</div>
165-
<div class="post-detail__nav post-detail__nav--bottom">
166-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
167-
</div>
165+
<div class="post-detail__nav post-detail__nav--bottom"><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00002.html" class="btn btn--next">Odin を導入してみた →</a></div>
168166
</article>
169167
</div>
170168
<aside class="post-sidebar">

‎WebSite/blog/blog_00002.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -292,9 +292,7 @@ <h2 id="まとめ">まとめ</h2><p>今回の Odin 導入で学んだことを
292292

293293
</ul>
294294
</div>
295-
<div class="post-detail__nav post-detail__nav--bottom">
296-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
297-
</div>
295+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00001.html" class="btn btn--prev">← ブログはじめました</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00003.html" class="btn btn--next">Odin でコンテキストエディター作って… →</a></div>
298296
</article>
299297
</div>
300298
<aside class="post-sidebar">

‎WebSite/blog/blog_00003.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -304,9 +304,7 @@ <h2 id="最後に">最後に</h2><p>Odin を使ったコンテキストエディ
304304

305305
</ul>
306306
</div>
307-
<div class="post-detail__nav post-detail__nav--bottom">
308-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
309-
</div>
307+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00002.html" class="btn btn--prev">← Odin を導入してみた</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00008.html" class="btn btn--next">Discord Bot のアーキテクチャ… →</a></div>
310308
</article>
311309
</div>
312310
<aside class="post-sidebar">

‎WebSite/blog/blog_00004.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,9 +163,7 @@ <h3 id="最後に">最後に</h3><p>以上 Modoium Remote 導入議事録でし
163163

164164
</ul>
165165
</div>
166-
<div class="post-detail__nav post-detail__nav--bottom">
167-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
168-
</div>
166+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00008.html" class="btn btn--prev">← Discord Bot のアーキテクチャ…</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00005.html" class="btn btn--next">DropBox APIを使ってみた →</a></div>
169167
</article>
170168
</div>
171169
<aside class="post-sidebar">

‎WebSite/blog/blog_00005.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -288,9 +288,7 @@ <h3 id="参考資料">参考資料</h3><p><a href="https://qiita.com/Ella_Engelh
288288

289289
</ul>
290290
</div>
291-
<div class="post-detail__nav post-detail__nav--bottom">
292-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
293-
</div>
291+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00004.html" class="btn btn--prev">← Modoium Remote 導入してみ…</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00006.html" class="btn btn--next">UE5プラグイン開発 →</a></div>
294292
</article>
295293
</div>
296294
<aside class="post-sidebar">

‎WebSite/blog/blog_00006.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -239,9 +239,7 @@ <h2 id="まとめ">まとめ</h2><ul>
239239

240240
</ul>
241241
</div>
242-
<div class="post-detail__nav post-detail__nav--bottom">
243-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
244-
</div>
242+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00005.html" class="btn btn--prev">← DropBox APIを使ってみた</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00007.html" class="btn btn--next">RClone導入フロー →</a></div>
245243
</article>
246244
</div>
247245
<aside class="post-sidebar">

‎WebSite/blog/blog_00007.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -164,9 +164,7 @@ <h2 id="まとめ">まとめ</h2><p>この記事で行ったこと：</p>
164164

165165
</ul>
166166
</div>
167-
<div class="post-detail__nav post-detail__nav--bottom">
168-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
169-
</div>
167+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00006.html" class="btn btn--prev">← UE5プラグイン開発</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00009.html" class="btn btn--next">ZedでC#開発環境を構築してみた →</a></div>
170168
</article>
171169
</div>
172170
<aside class="post-sidebar">

‎WebSite/blog/blog_00008.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -310,9 +310,7 @@ <h2 id="まとめ">まとめ</h2><ul>
310310

311311
</ul>
312312
</div>
313-
<div class="post-detail__nav post-detail__nav--bottom">
314-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
315-
</div>
313+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00003.html" class="btn btn--prev">← Odin でコンテキストエディター作って…</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00004.html" class="btn btn--next">Modoium Remote 導入してみ… →</a></div>
316314
</article>
317315
</div>
318316
<aside class="post-sidebar">

‎WebSite/blog/blog_00009.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,9 +203,7 @@ <h2 id="最終的な動作感">最終的な動作感</h2><ul>
203203

204204
</ul>
205205
</div>
206-
<div class="post-detail__nav post-detail__nav--bottom">
207-
<a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a>
208-
</div>
206+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00007.html" class="btn btn--prev">← RClone導入フロー</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00010.html" class="btn btn--next">RClone運用フロー →</a></div>
209207
</article>
210208
</div>
211209
<aside class="post-sidebar">

0 commit comments

Comments
 (0)