見出しコード生成用
カテゴリと日付付きの記事タイトル
カテゴリ・タイトル・日付をまとめた、ブログ記事の冒頭。
用途・説明
ブログやお知らせの記事ページの先頭に置く、タイトルまわりのまとまりです。カテゴリのラベル、記事タイトル、公開日と更新日を1セットにしています。記事一覧からたどり着いた人が、何の記事でいつの情報かをすぐ確認できます。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[見出しテキスト]- 表示する見出しの文言。例：はじめてのサイト制作で決めておきたい5つのこと
[カテゴリ名]- 例：サイト制作の基本
[公開日]- 例：2026年4月12日
[更新日]- 不要なら削除
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはブログのデザインに詳しいフロントエンドエンジニアです。 以下の条件で「カテゴリと日付付きの記事タイトル」を1つ実装してください。 ## 表示内容 - 見出し：[見出しテキスト] - カテゴリ：[カテゴリ名] - 公開日：[公開日] / 更新日：[更新日] ## デザイン - カテゴリ：12px、font-weight 700、文字 #1463F0、#1463F0 の10%の背景、padding 4px 12px、角丸 9999px - タイトル：PC 30px / スマホ 24px、font-weight 700、line-height 1.5、色 #1B2A44。カテゴリの下 12px - 日付：13px、色 #5F6D84。タイトルの下 12px。公開日と更新日は横に並べ、間隔 16px - まとまりの下に 1px solid #E2E8F0 の線を引き、線までの間隔は 24px ## 余白 - 下の余白 40px（本文との間隔） ## 実装方法 - カテゴリは一覧ページへのリンク（a 要素）にする - 日付は time 要素でマークアップし、datetime 属性を付ける - タイトルは文節の途中で不自然に折り返さないよう、text-wrap: balance（未対応ブラウザではそのまま）を指定する ## アクセシビリティ - 見出しは h1 でマークアップする（置く場所の階層に合わせて変更してよい） - 「公開日」「更新日」は文字で示し、アイコンだけにしない - カテゴリのリンクはタップ領域を縦 44px 以上確保する（見た目は変えずに余白で補う） ## 出力形式 - [使用技術]で、この見出し1つぶんのコードを出力 - クラス名を付け、他の見出しに影響しないようにする - 色・文字サイズ・間隔をCSS変数にまとめる
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。