prev/nextナビゲーションのスタイルを改善

[Copilot]

概要

記事詳細ページ下部のprev/nextナビゲーションのスタイルを改善。全デバイス（PC/スマホ）で統一されたレイアウトを適用し、::セパレーターを削除してシンプルに。

変更内容

1. layouts/partials/posts_pagination.htmlを新規作成

• テーマのテンプレートをオーバーライド
• prev/nextリンク間の::セパレーターを削除

2. static/style.cssにスタイルを追加（全デバイス対応）

• レイアウト: flex-direction: column + align-items: center で縦並び・中央揃えに変更
• テキスト省略: -webkit-line-clamp: 3 で3行まで表示、以降は ... で省略
• 余白調整: gap: 12px, line-height: 1.5 で可読性向上
• 全デバイス適用: PC/スマホで同じスタイルを使用

/* posts_pagination用のスタイル（全デバイス） */
.pagination__buttons {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pagination__buttons a.button.inline {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width: 100%;
  line-height: 1.5;
  text-align: center;
}

• Fixes 記事詳細ページ スマホだとprev nextが崩れる #192

Original prompt

---

This section details on the original issue you should resolve

<issue_title>記事詳細ページ スマホだとprev nextが崩れる</issue_title>
<issue_description>（もしかしたらこっちではなくhugo theme側で修正する必要があるかもしれない）

• 中央寄せになってるので記事名を先頭から表示
• 切れたら...を表示する
• 1段になっているが2 or 3段にする</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes 記事詳細ページ スマホだとprev nextが崩れる #192

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[github-actions]

プレビュー環境

プレビュー環境が更新されました。

URL: https://blog.kyu08.com/pr-249/

Commit: a4394c64b91bfbe180e72ffb725a6d79b66926c9

※ デプロイ完了まで数分かかる場合があります。

[github-actions]

OGP画像に差分はありません

OGP画像は最新の状態です。

[kyu08]

@copilot 中央揃えにして。

[Copilot]

@copilot 中央揃えにして。

中央揃えに変更しました。コミット: 70cffb4

align-items: centerとtext-align: centerを使用して、prev/nextリンクを中央に配置するようにしました。3行までの複数行表示とテキストオーバーフロー時の...表示は維持しています。

[kyu08]

@copilot よさそう。
真中の::を削除して。
PCでも同様のスタイルにして。

[Copilot]

@copilot よさそう。
真中の::を削除して。
PCでも同様のスタイルにして。

変更しました。コミット: a4394c6

1. ::セパレーターを削除：layouts/partials/posts_pagination.htmlを作成してオーバーライド
2. PCでも同じスタイルを適用：メディアクエリを削除し、全デバイスで縦並び・中央揃え・3行省略表示を適用

[Copilot]

Pull Request Overview

このPRは、記事詳細ページ下部のprev/nextナビゲーションのスタイルを改善し、スマホでのレイアウト崩れを修正するものです。全デバイスで統一された縦並び中央揃えのレイアウトを適用し、長いタイトルは3行まで表示して省略する仕様に変更しました。

• テーマのテンプレートをオーバーライドして::セパレーターを削除
• CSS追加により、縦並び中央揃えレイアウトと3行省略表示を実装
• PC/スマホで同じスタイルを適用し、統一感のあるUIを実現

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
layouts/partials/posts_pagination.html	テーマのテンプレートをオーバーライドし、prev/nextリンク間の::セパレーターを削除
static/style.css	ページネーションボタン用のスタイルを追加（縦並び中央揃え、3行省略表示）

[Copilot]

.pagination__buttonsにflex-direction: columnを指定していますが、この要素にdisplay: flexが定義されていません。flex-directionを機能させるには、display: flexを追加する必要があります。

Suggested change

	.pagination__buttons {
	.pagination__buttons {
	display: flex;

[Copilot]

-webkit-box、-webkit-line-clamp、-webkit-box-orientはベンダープレフィックス付きのプロパティで、WebKitブラウザ専用です。Firefoxなどの他のブラウザでは動作しない可能性があります。クロスブラウザ対応を考慮すると、フォールバックやポリフィルの検討が必要です。ただし、line-clampは現在多くのモダンブラウザでサポートされていますが、標準化されたプロパティ名はline-clamp（プレフィックスなし）です。

Suggested change

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	display: box;
	/* display: flex; // flexはline-clampと併用不可なのでコメントアウト */
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	box-orient: vertical;