1.1引き継ぎ文章作成スクリプト
以下の文章またはHTML断片を、「WordPressのカスタムHTMLブロックにそのまま貼れる完成HTML」に変換してください。
【最重要】
余計な装飾は不要。とにかく読みやすさ最優先で。
ブログ記事ではなく、ドキュメントページとして整えてください。
# 必須ルール
■ 全体構造
– 出力は `<section class=”mikyun-doc”>` から開始する
– `<style>` を必ず内包する
– 外部CSSや外部JSは使わない
– そのままWordPressに貼って完成する状態にする
■ デザイン
– 背景はすべて透明
– 白背景は禁止
– 枠線・余白・文字サイズだけで読みやすくする
– ダークテーマでもライトテーマでも読める配色にする
– 本文は 14px 基準、行間はやや広め
– 装飾過多にしない
■ 見出しルール
– h1, h2 は使わない
– 最大でも h3 相当まで
– 見出しは以下のクラスで表現する
– `.title` = ページタイトル
– `.section` = 大見出し
– `.sub` = 小見出し
■ CSSルール
– すべて `.mikyun-doc` 配下で完結させる
– WordPressテーマやGutenbergの影響をできるだけ受けないようにする
– `.wp-block-group`, `.wp-block-columns`, `.wp-block-column`, `.wp-block-preformatted`, `.wp-block-table` などで白背景が入る場合を考慮し、必要に応じて transparent を強制する
– 必要な箇所には `!important` を使ってよい
– ただし過剰指定にはしない
■ レイアウト
– 最大幅は 1000px 以内
– 中央寄せ
– 必要なときだけ 2カラムの grid を使う
– スマホでは必ず 1カラム化する
– 表は横スクロールを許可して崩れにくくする
■ パーツ変換ルール
– 通常文は `<p>`
– 箇条書きは `<ul><li>`
– 表データは `<table>`
– 構成図・CLI出力・設定断片は `<pre>`
– まとまりごとのブロックは `.card` で囲う
– 注意事項や補足は `.note` を使ってよい
– 重要項目は太字で目立たせるが、色に頼りすぎない
■ コード・pre
– 背景透明
– 枠あり
– 等幅フォント
– 長い行は折り返しまたは横スクロールで崩れないようにする
■ 変換方針
– 元の内容は省略しない
– 意味を変えない
– 冗長なだけの重複表現は整理してよい
– 文章が長すぎる場合は、適切に段落・カード・表へ再構成する
– コピペ元に見出しレベルの乱れがあっても、読みやすい構造へ自動補正する
– 「いかにもAIが装飾した感」は出さない
■ 出力形式
– 完成HTMLのみ出力する
– 説明文は不要
– markdownコードフェンスは使わない
– すぐ貼り付けられる最終形だけを出す
コードをだすのではなく内容をよく考えて
見やすいように表示して
絶対に勝手に内容をかえないでください
表示方法を変えるのOK
# 追加指示
– 背景が白く見える原因になりやすい要素はすべて透明化する
– タイトル文字を大きくしすぎない
– もっとも大きい文字でも控えめにする
– 罫線・余白・文字サイズのバランスで見やすくする
– 視認性を保ちながら圧迫感をなくす
以下をそのまま**追記用ルール**として加筆してください。
# 追加ルール（目次・アンカー自動化）
■ 目次について
* 長文ページでは、本文冒頭に目次ブロックを追加する
* 目次はページ内リンクとして機能するようにする
* 目次の見た目は本文になじむよう、装飾を控えめにする
* 目次にも白背景は使わない
* 目次は `.card` または専用のシンプルな枠で表現してよい
* 目次タイトルは大きくしすぎず、本文より少し強い程度にする
■ アンカーについて
* 目次の各項目は、本文内の対応見出しへジャンプできるようにする
* 各 `.section` と必要な `.sub` に `id` を付与する
* `id` 名は英数字とハイフン中心で、短く分かりやすくする
* 日本語見出しをそのまま `id` にせず、壊れにくい名前へ整理する
* 同名見出しがある場合は重複しないよう自動調整する
■ 対象範囲
* 目次化する対象は、原則として `.section` と、必要に応じて `.sub`
* 細かすぎる項目は目次に入れすぎない
* 目次は長くなりすぎないよう整理する
* ただし元内容は省略せず、表示構造だけ整理する
■ スクロール配慮
* 固定ヘッダー等で見出しが隠れにくいよう、アンカー位置に配慮する
* 必要なら `scroll-margin-top` を使って調整してよい
■ JavaScriptについて
* 必要な場合のみ、`<script>` をHTML内に内包してよい
* 外部JSは禁止
* PHPやfunctions.php編集が不要な形を優先する
* WordPressのカスタムHTMLブロックに貼るだけで動作する構成を優先する
* 既存本文を大幅に手修正しなくても使える方法を優先する
■ 自動判定について
* 元文に番号付き見出し（例: `1.`, `2.`, `10.1` など）がある場合、それを見出し候補として活用してよい
* ただし本文と通常文の区別を崩さないこと
* 誤検出しそうなものは無理に目次へ入れないこと
* 目次の精度よりも、本文の可読性と安全な表示を優先すること
■ 出力優先順位
* 最優先は「そのまま貼って崩れにくいこと」
* 次に「見やすいこと」
* 次に「目次リンクが自然に使えること」
* 凝った演出や過剰な自動化は不要
■ 禁止事項
* 白背景の目次ボックスにしない
* 目立ちすぎる色付き装飾をしない
* 大きすぎる見出しを使わない
* WordPressテーマ依存のクラスや外部ライブラリ前提にしない
* 内容を勝手に要約・削除・改変しない