ナビゲーションコード生成用
前後の記事へのリンク
記事の最後に、前の記事と次の記事を左右に並べる。
用途・説明
ブログやお知らせの記事の最後に置く、前後の記事へのリンクを作成します。左に「前の記事」、右に「次の記事」をタイトル付きで並べ、中央に一覧へ戻るリンクを置きます。読み終えた人が続けてほかの記事を読みやすくなります。マニュアルの「前へ／次へ」にも使えます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[前の記事のタイトル]- 例：余白の決め方、3つの基本
[次の記事のタイトル]- 例：崩れないカードの組み方
[一覧の文言]- 例：記事一覧へ
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「前後の記事へのリンク」を実装してください。 ## 表示内容 - 左：「前の記事」のラベルと、[前の記事のタイトル] - 右：「次の記事」のラベルと、[次の記事のタイトル] - 下の中央：[一覧の文言] ## レイアウト - 左右2列（1:1）。左は左揃え、右は右揃え。あいだに 1px solid #E2E8F0 の縦線 - 上下に 1px solid #E2E8F0。各リンクの padding 24px - スマホ：縦に並べる（前の記事 → 次の記事）。あいだは横線で区切る ## デザイン - ラベル：12px、font-weight 700、色 #1463F0。前の記事は左向きの矢印、次の記事は右向きの矢印を添える - タイトル：15px、font-weight 700、line-height 1.6、色 #1B2A44、2行まで - hover：背景 #F7F9FC、矢印を進む方向へ 4px 動かす - 一覧へのリンク：14px、色 #1463F0、上に 24px の余白 ## 動作 - 前の記事・次の記事がない場合は、その側を空白にして、もう一方の位置は変えない ## アクセシビリティ - nav 要素（aria-label="前後の記事"）でマークアップする - リンクには rel="prev" / rel="next" を付ける - リンクの文言が「前の記事：〇〇」とひと続きで読み上げられるようにする - 矢印は aria-hidden="true" - focus-visible のスタイルを用意する ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。