フッターコード生成用
パンくずリストを置いたフッター
ページの最後で、いまいる場所と上の階層を示す。
用途・説明
フッターの上端に、パンくずリスト（ホーム › カテゴリ › いまのページ）を置くフッターを作成します。ページを読み終えたあとに、上の階層へ戻りやすくなります。階層の深いECサイト、メディア、ヘルプページ、自治体のサイトに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[サービス名]- コピーライトに表示する名前
[パンくず]- 例：ホーム › サービス › 料金プラン
[リンク項目]- フッター本体のリンク
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「パンくずリストを置いたフッター」を実装してください。 ## 表示内容 - 上段：パンくずリスト（[パンくず]） - 下段：リンク（[リンク項目]）とコピーライト（© 年 [サービス名]） ## レイアウト - 上段：横1行。左に家のアイコン、その右に階層を「›」で区切って並べる - 上段と下段のあいだは 1px の線で区切る - 下段：左にリンク、右にコピーライト - スマホ：パンくずが長いときは横スクロールにする（折り返さない）。下段は縦に並べる ## デザイン - 上段：背景 #F1F5FC、上下 padding 14px - パンくず：13px、色 #5F6D84。リンクは hover で色 #1463F0 と下線 - いまのページ：色 #1B2A44、font-weight 700、リンクにしない - 区切りの「›」：色 #B8C5D9、左右に 8px の余白 - 下段：背景 #FFFFFF、上下 padding 24px。リンク 13px・色 #5F6D84、コピーライト 12px・色 #5F6D84 ## 動作 - パンくずは、ページのURLまたは渡した配列から自動で作る - ページ上部にもパンくずがある場合、同じ配列から両方を表示する ## アクセシビリティ - パンくずは nav 要素（aria-label="パンくずリスト"）のなかの ol / li - ページ上部にもパンくずがある場合は、aria-label を「パンくずリスト（ページ下部）」のように変えて区別する - いまのページには aria-current="page" - 区切りの「›」は疑似要素で表示する（読み上げの対象にしない） - footer 要素を使う ## 出力形式 - [使用技術]のコードを1つ出力 - パンくずの構造化データ（BreadcrumbList）を JSON-LD で出力する例をコメントで補足する
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。