Skip to content

Commit c02a874

Browse files
author
y-yamasaki
committed
ボタン調整
1 parent def8350 commit c02a874

37 files changed

Lines changed: 77 additions & 45 deletions

‎WebSite/assets/css/blog.css‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -584,38 +584,48 @@
584584
/* ==========================================================================
585585
7. 記事詳細のナビゲーション
586586
========================================================================== */
587+
/* Navigation: desktop = equal-width row; mobile = stacked column */
587588
.post-detail__nav--bottom {
588589
margin-top: 3rem;
589590
margin-bottom: 0;
590-
/* 横並びにして中央寄せ、ボタン間の間隔を確保 */
591591
display: flex;
592592
justify-content: center;
593593
align-items: center;
594594
gap: 0.75rem;
595-
flex-wrap: wrap;
595+
/* 横幅に余裕があれば折り返さず等幅にする */
596+
flex-wrap: nowrap;
597+
max-width: 900px;
598+
margin-left: auto;
599+
margin-right: auto;
596600
}
597601

598-
/* 共通ボタンスタイル（back / prev / next） */
602+
/* 共通ボタンスタイル（back / prev / next） - デスクトップは等幅 */
599603
.post-detail__nav--bottom .btn {
600604
display: inline-flex;
601605
align-items: center;
602606
gap: 0.5rem;
603-
padding: 0.5rem 0.9rem;
607+
padding: 0.6rem 1rem;
604608
border-radius: var(--radius-md);
605609
background: var(--color-surface);
606-
color: var(--color-text-muted);
610+
color: var(--color-text);
607611
text-decoration: none;
608612
font-weight: 600;
609-
font-size: 12px;
613+
font-size: 13px;
610614
transition: var(--transition-smooth);
611615
border: 1px solid var(--color-border);
616+
/* 等幅にするための flex 指定（親が横並び） */
617+
flex: 1 1 0;
618+
min-width: 0; /* overflow 対策 */
612619
/* 長いタイトルは省略表示 */
613-
max-width: 16rem;
614-
white-space: nowrap;
615620
overflow: hidden;
616621
text-overflow: ellipsis;
622+
white-space: nowrap;
617623
}
618624

625+
/* 中央の戻るボタンはやや目立たせるための余白調整（必要なら上書き） */
626+
.btn--back {
627+
/* デフォルトは他ボタンと同等幅 */
628+
}
619629
.btn--back:hover {
620630
background: var(--color-accent-soft);
621631
color: var(--color-text);
@@ -645,6 +655,28 @@
645655
transform: translateX(4px);
646656
}
647657

658+
/* モバイル: ボタンを縦積み（タップしやすく、順序が明確） */
659+
@media (max-width: 600px) {
660+
.post-detail__nav--bottom {
661+
flex-direction: column;
662+
gap: 0.6rem;
663+
align-items: stretch;
664+
}
665+
.post-detail__nav--bottom .btn {
666+
flex: none;
667+
width: 100%;
668+
max-width: none;
669+
justify-content: center;
670+
padding: 0.7rem 1rem;
671+
white-space: normal;
672+
}
673+
.btn--prev,
674+
.btn--next {
675+
padding-left: 0.75rem;
676+
padding-right: 0.75rem;
677+
}
678+
}
679+
648680
/* ==========================================================================
649681
8. パンくずリスト
650682
========================================================================== */

‎WebSite/blog/blog_00001.html‎

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

163163
</ul>
164164
</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>
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>
166166
</article>
167167
</div>
168168
<aside class="post-sidebar">

‎WebSite/blog/blog_00002.html‎

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

293293
</ul>
294294
</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>
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>
296296
</article>
297297
</div>
298298
<aside class="post-sidebar">

‎WebSite/blog/blog_00003.html‎

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

305305
</ul>
306306
</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>
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>
308308
</article>
309309
</div>
310310
<aside class="post-sidebar">

‎WebSite/blog/blog_00004.html‎

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

164164
</ul>
165165
</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>
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>
167167
</article>
168168
</div>
169169
<aside class="post-sidebar">

‎WebSite/blog/blog_00005.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -288,7 +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"><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>
291+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00004.html" class="btn btn--prev">← Modoium Rem…</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00006.html" class="btn btn--next">UE5プラグイン開発 →</a></div>
292292
</article>
293293
</div>
294294
<aside class="post-sidebar">

‎WebSite/blog/blog_00006.html‎

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

240240
</ul>
241241
</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>
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>
243243
</article>
244244
</div>
245245
<aside class="post-sidebar">

‎WebSite/blog/blog_00007.html‎

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

165165
</ul>
166166
</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>
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>
168168
</article>
169169
</div>
170170
<aside class="post-sidebar">

‎WebSite/blog/blog_00008.html‎

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

311311
</ul>
312312
</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>
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 Rem… →</a></div>
314314
</article>
315315
</div>
316316
<aside class="post-sidebar">

‎WebSite/blog/blog_00010.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ <h2 id="まとめ">まとめ</h2><p>プロジェクトにおけるアセット
232232

233233
</ul>
234234
</div>
235-
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00009.html" class="btn btn--prev">← ZedでC#開発環境を構築してみた</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00011.html" class="btn btn--next">自作Discord Botを公開したらス… →</a></div>
235+
<div class="post-detail__nav post-detail__nav--bottom"><a href="blog_00009.html" class="btn btn--prev">← ZedでC#開発環境を…</a><a href="../blog.html" class="btn btn--back">← ブログ一覧へ戻る</a><a href="blog_00011.html" class="btn btn--next">自作Discord B… →</a></div>
236236
</article>
237237
</div>
238238
<aside class="post-sidebar">

0 commit comments

Comments
 (0)