外部AI向けガイドに戻る

LiteWord テーマ情報

{
    "name": "wdl/lw-pr-fv-17",
    "title": "固定ページタイトル 17（下層用）",
    "category": "lw-firstview",
    "description": "下層ページ用のコンパクトなファーストビュー。英語のメインタイトルと短い説明文のみのシンプル構成。ポートフォリオ、実績一覧、ギャラリーなどビジュアル重視のページに最適。",
    "aiHint": {
        "description": "下層ページの見出し帯。中央にページ名、その左右に飾りを添えられる。会社概要・料金・メニューなど、下の階層のページの先頭に置く",
        "excludeFromAutoSelect": false,
        "contentAttributes": [
            "mainTitle",
            "description"
        ],
        "imageAttributes": [
            "backgroundImage",
            "bgImageLeftPc",
            "bgImageRightPc"
        ],
        "notes": "🚨 bgImageLeftPc / bgImageRightPc は【写真ではなく、背景が透明な装飾イラストを置く場所】。葉っぱ・水彩のドットのような飾りを左右の端に添える作り。写真を入れると帯の左右に四角い写真が貼り付いたようになる。実際の制作サイトの下層19ページはすべて次の1通りだった — 背景＝帯とほぼ同じ比率（5:1前後）の淡い紙のテクスチャ／左右＝透過のイラスト／3枚とも不透明1。🚨 背景に16:9の写真を入れないこと。帯は横長（6:1前後）なので cover で中央の細い帯だけに切られ、寄りの写真だと何が写っているか分からなくなる。写真を使いたいときは帯の比率に合わせて用意する。🚨 色フィルタ（filterBackgroundColor）は背景画像の【下】にあるので、背景画像が不透明だと完全に隠れて見えない。濃くしたいときは filterOpacity ではなく bgImageOpacityPc を下げる（写真を薄くすると下の色が透ける）。背景画像を空にすれば、色だけの帯になる（素材が無いときの最小構成）。🚨 文字色は地に合わせる。淡い紙の地なら濃い色（#333 など）、色だけの濃い帯なら白。パンくずは色を指定しないとリンクの青のままなので、breadcrumbColorPc / breadcrumbColorSp を必ず指定する（PCとSPは独立していて、SPではパンくずが帯の外に出る）。フロントページではパンくずが HOME だけになるため描画しない作りになっている。左右は片方だけでもよい（空にすれば出ない）。 🚨 **動的ブロック**（block.json の render: file:./render.php）。save() は null を返し、マークアップは `<!-- wp:wdl/lw-pr-fv-17 … /-->` の1行だけ。中身は表示のときに PHP が作る。→ ブロックHTMLをそのまま貼った**静止プレビューには何も出ない**。確認するときは WordPress を通す（do_blocks）。「帯が消えた」と誤診しないこと（2026-09-01）。 🚨 **breadcrumbColorSp が効かない**（2026-09-07 実測）。style.css で @media (max-width:800px) のパンくず指定が PC用の指定より**前**に置かれていて、同じ詳細度で後勝ちになるため。パンくずは PC では帯の中、スマホでは**帯の外（白い地）**に出るので、**濃い帯にすると「PCで読める色＝白地で読めない色」になって逃げ場が無くなる。**当面は帯を淡い色にして、文字もパンくずも濃い色でそろえるのが安全。"
    },
    "attributes": []
}