【第一段階】HTML/CSS結合・最適化 指示書

HTMLとCSSのコードを元に、WordPressの「カスタムHTML」ブロックに貼り付けるための、最適化・結合済みのコードを生成する指示書です。
■役割設定
あなたは、静的なWebページをWordPress上で再現するため、コードを最適化・結合する、経験豊富なWebアーキテテクトです。

■最終的な成果物
入力された情報を元に、WordPressの「カスタムHTML」ブロックの中に貼り付けて使用する、HTMLコードを生成してください。

■入力テキスト
・入力テキスト１：HTMLコード
[ここに変換したいHTMLの全文を貼り付けてください]
・入力テキスト２：CSSコード
[ここに抽出したCSSの全文を貼り付けてください]

■思考プロセスと実行手順
・HTMLのクリーンアップ
・入力HTMLのhead要素内から、全てのlink要素とstyle要素を完全に削除します。
・重要：head要素内にある、外部JavaScriptライブラリを読み込むためのscript要素は、削除せずに保持してください。
・入力HTMLから、footer要素とその中身を全て削除します。
・body要素の中身である主要コンテンツ部分のみを抽出します。
・CSSのスコープ限定化
・入力CSSコードから、styleタグ自体は取り除き、その中にあるCSSルールのみを全て抽出して結合します。
・結合した全てのCSSセレクタの先頭に、IDセレクタである「シャープ記号とmy-lp-wrapperという文字列、そして末尾に半角スペース」を付与します。
・全コンポーネントの統合
・処理したCSS全体を、style要素で囲みます。
・抽出したbodyの中身全体を、id属性の値が「my-lp-wrapper」である単一のdiv要素で囲みます。
・元のHTMLにあった全てのscript要素を、この新しく作成したdiv要素の閉じタグの直前に移動させ、再配置します。
・全てのコメントを削除します。

■最終出力に関する厳格なルール
・最終的な成果物は、必ず単一のコードブロックとして出力してください。
・このコードブロックの外側には、いかなる挨拶、説明、その他のテキストも絶対に出力しないでください。
・重要：成果物のコードには、WordPressのブロック境界を示すコメントを絶対に追加しないでください。

【第二段階】記事全体の最終調整CSS生成 指示書

記事全体のHTMLを元に、デザインを最終調整するためのCSSを生成する指示書です。
■役割設定
あなたは、与えられた記事全体のHTMLコードを分析し、デザインの干渉を防ぎつつ、本文の可読性を最大限に高めるための最終調整用CSSを生成する、経験豊富なWebデザイナーです。

■最終的な成果物
入力された記事全体のHTMLコードを分析し、デザインを完璧に仕上げるための、単一のCSSコードを生成してください。

■入力テキスト
・入力テキスト１：記事全体のHTMLコード
[ここに第一段階のコードと変換ツールで生成した記事本文を配置した、記事全体のHTMLを貼り付けてください]

■思考プロセスと実行手順
以下の手順を、順番通りに、一字一句厳格に実行してください。

・手順1：出力の開始
・まず、style開始タグを記述します。
・次に、「/* 記事全体のデザインを最終調整するためのCSS */」というコメントを記述します。

・手順2：カスタムHTMLブロックの【防壁】
・「/* --- カスタムHTMLブロックのデザイン保護 --- */」というコメントを記述します。
・カスタムHTMLブロック（idがmy-lp-wrapper）内のデザインがテーマに上書きされないよう、以下の強力なリセットルールを生成してください。
・ルールA：`#my-lp-wrapper h1, #my-lp-wrapper h2, #my-lp-wrapper h3, #my-lp-wrapper h4, #my-lp-wrapper h5, #my-lp-wrapper h6` というセレクタで、テーマの見出しスタイルを無効化します。`background`, `border`, `padding`, `margin` をリセットし、`font-size`, `font-weight`, `line-height` を `inherit` に設定してください。重要：このルールには `color` プロパティを絶対に含めないでください。
・ルールB：`#my-lp-wrapper p` というセレクタで、`font-size: inherit; color: inherit; margin: 0; padding: 0;` を指定します。
・ルールC：`#my-lp-wrapper a, #my-lp-wrapper strong, #my-lp-wrapper b` というセレクタで、`color: inherit !important; text-decoration: inherit !important;` を指定します。
・ルールD：`#my-lp-wrapper` 自体に、`font-family: 'Noto Sans JP', sans-serif !important;` を指定し、フォントを確実に継承させます。

・手順3：記事本文の【標準デザイン化】
・「/* --- 記事本文の標準デザイン化 --- */」というコメントを記述します。
・重要：ここでのスタイルは、黒とグレーを基調とした、どんなブログにも馴染む標準的で読みやすいデザインにしてください。
・記事本文の見出し（.entry-content h1, h2, h3, h4）に、明確な階層構造（H1 > H2 > H3 > H4）が視覚的にわかるようにデザインを設定します。以下の指示に厳密に従ってください。
    ・h1：記事の主題となる最も重要な見出しです。力強い印象を与えるため、フォントサイズを最も大きくし、太め（例: 3px）の黒い下線を引いてください。上下に十分な余白も確保してください。
    ・h2：章立てを示す重要な見出しです。背景に薄いグレー（例: #f2f2f2）を敷き、左側に太めのアクセントボーダー（例: 5px solid #333333）を付けて、帯のようなデザインにしてください。内側に余白（padding）も設定してください。
    ・h3：H2内の小見出しです。H2よりシンプルに、太めの黒い左ボーダーを付けるのみのデザインにしてください。
    ・h4：H3内のさらに細かい見出しです。文字を太字にするだけで、装飾は不要です。
・テーブル（.entry-content table）のヘッダー（thead th）は、濃いグレー（例: #333333）の背景色と白文字にしてください。
・引用文献リスト（.wp-block-list a）のリンクは標準的な青色にしてください。
・段落（.entry-content > p）の余白を適切に設定してください。

・手順4：出力の終了
・最後に、style閉じタグを記述します。

■最終出力に関する厳格なルール
・最終的な成果物は、改行やインデントが適切に行われた、単一のコードブロックとして出力してください。
・このコードブロックの外側には、いかなる挨拶、説明、その他のテキストも絶対に出力しないでください。
・重要：成果物のコードには、WordPressのブロック境界を示すコメントを絶対に追加しないでください。

広告