外部AI向けガイドに戻る

LiteWord テーマ情報

{
    "name": "wdl/lw-image-2",
    "title": "画像カード 02",
    "category": "lw-media",
    "description": "",
    "aiHint": {
        "description": "写真を並べるモザイク。2列で1枚目だけ2列ぶんの幅になり、それぞれの写真の上に白い短いキャプションが乗る。使い方の種類・施設の様子・作品の見せ方に。3枚か5枚が収まりがよい",
        "excludeFromAutoSelect": false,
        "contentAttributes": [
            "items"
        ],
        "imageAttributes": [],
        "notes": "🚨 カードではない。写真を並べる**モザイク**で、文字は写真の下に付くのではなく**写真の上に白で重なる**（.image__inner p は白・下ぞろえ・0.9em）。🚨 2列のグリッドで、**1枚目だけ2列ぶんの幅になる**（.image__inner.no_1 { grid-column: span 2 }）。だから 3枚・5枚のように「1 + 偶数」が収まりがよく、4枚だと最後の1枚の隣が空く。🚨 スマホでも2列のまま（1列に落ちる指定が無い）。375px なら1枚目 333×266、2枚目以降は **163×130** まで小さくなる。**2枚目以降には寄った写真を渡すこと**（引きの絵は何が写っているか分からない）。キャプションも 163px 幅では**1行8字**しか入らないので、2枚目以降は1語だけにする。既定の max-width は 500px。maxWidthPx（数値・px）を渡すと上書きされる。alignClass は left（既定）/ center / right。写真の比率は aspectHeight（既定 800）で 1000/<値>。既定なら 1000:800 の横長で object-fit:cover。**同じ比率で画像を用意すれば切られない**。🚨 白いキャプションを読ませるには items[].fOpac（0〜1の黒フィルタ）で写真を落とす。**見た目で決めずに測ること**。2026-08-29 に実測したところ、暗い写真は α0.2 で 14:1 あったが、明るい写真は α0.2 で 3.58・α0.25 で 4.01・α0.35 で 5.11 だった。キャプションは 0.9em（約14px）で大きい文字に当たらないので**下限は 4.5:1**。**0.35 を既定の目安にする**。items は [{ imgSrc, altText, text, fColor, fOpac, fBlend }]。text を空にすればキャプションなしの写真だけになる。fBlend は normal のままでよい。角丸は borderRadiusEm（既定 1.2em）。**自前のマージンを1つも持たない**ので、前後の余白は隣のブロックか段落で作る。"
    },
    "attributes": []
}