外部AI向けガイドに戻る

LiteWord テーマ情報

{
    "name": "wdl/lw-pr-content-8",
    "title": "Content 08",
    "category": "lw-content",
    "description": "左側に画像、右側にコンテンツエリアを配置した2カラムレイアウト。コンテンツエリアには任意のブロックを配置可能。",
    "aiHint": {
        "description": "左に写真・右に自由な中身を置く横長のカード。1ブロック＝1段で、縦に積んで『治療や施術の流れ』『取り組み』を1段ずつ写真つきで説明するのに使う",
        "excludeFromAutoSelect": true,
        "excludeReason": "InnerBlocksを使用するためAIが直接コンテンツを生成できない。セクションテンプレート pr_flow_photo_1 から使うこと",
        "contentAttributes": [],
        "imageAttributes": [
            "imageUrl"
        ],
        "notes": "1ブロック＝1段。複数の段を作るならブロックを並べる。🚨 段と段の間は .lw-pr-content-8 + .lw-pr-content-8 { margin-top:40px } という【隣接セレクタ】で空いている。あいだにスペーサーを挟むと + が外れてカードがくっつく（paid-block-history-1 の縦線が切れるのと同じ型）。ブロック自身は上下マージンを持たない（margin:0 auto）ので、前後の余白は自分で作る。🚨 PCは grid-template-columns:38.4%/61.6%。既定の maxWidth:1040 なら写真枠は約399×374px＝ほぼ正方形の中央クロップ（2026-08-29 実測）。800px以下では縦積みに変わり、写真は元の比率のまま全幅で出る（切られない）。切れる形と切れない形の両方で成立するよう、主役は中央に置き、横幅がやや広い正方形に近い写真（800×756 くらい）を渡す。当社の制作サイト takashishika.com もこの寸法で作っている。minHeight の既定は378pxで、本文が短くてもカードはその高さのまま（右下に余白が残るのは仕様）。content_in の中は *:first-child の上マージンと *:last-child の下マージンが CSS で 0 に潰されるので、見出しと本文の間だけ気にすればよい。背景の既定は #f5f5f5 だが、takashishika.com は bgColor:#ffffff にして【白いカード＋テーマ色の枠線】で使っている。borderColor の既定は var(--color-main) なので、そのままでサイトの色に合う。"
    },
    "attributes": []
}