外部AI向けガイドに戻る

LiteWord テーマ情報

{
    "name": "wdl/paid-block-voice-2",
    "title": "お客様の声 2",
    "category": "lw-voice",
    "description": "",
    "aiHint": {
        "description": "色帯の中に、顔写真つきのお客様の声カードが2列で並ぶ。1件は 写真＋肩書＋お名前＋ご感想。見出しと説明はこのブロック自身が持つ。お客様の声・レビュー・導入事例に",
        "excludeFromAutoSelect": false,
        "contentAttributes": [
            "blockTitleMain",
            "blockTitleSub",
            "explanation",
            "voices"
        ],
        "imageAttributes": [
            "voices.image"
        ],
        "notes": "voices は配列で、1件が image / alt / thanks / sub（肩書や属性。例 30代・女性 ／ はじめてのご利用）/ nameBig（名字。22px）/ nameSmall（さま。13px）/ comment（ご感想の本文）。🚨 写真は縦長 1:1.3 に切られ、さらに上辺が border-radius 100px 100px 0 0 のアーチになる。PC では枠幅が約155pxしかなく角丸が幅の半分を超えるので、上の左右がまるごと落ちる。胸から上のバストアップで、頭の上に少しだけ余白がある写真を渡すこと。引きの写真だと顔が読めない。複数並べるときは4枚とも同じ寄り方にする（1枚だけ寄っていると浮く）。🚨 カードは2列で固定。950px以下で1列（max-width 540px）になる。カードの高さは写真（200px）で決まるので、comment は約120字まで書いてもカードの背は変わらない。30〜40字だと薄く見えるので 60〜90字が読みやすい。⚠️ comment・explanation・blockTitleMain・blockTitleSub は RichText なので br と strong が使える（改行コードは効かない）。⚠️ thanks は写真の右下に rotate(-21deg) で乗る手書き風の飾り（Dancing Script・既定 thank you）。色の既定が var(--color-black) なので、写真の右下が暗いと沈む。⚠️ filterColor と filterOpacity は帯の色で、値は backgroundColor にそのまま入る。だから var(--color-main) を渡してよい（lw-pr-custom-title-11〜14 のような自己参照の問題は起きない）。既定は var(--color-main) の90%。⚠️ 見出し（h2）と説明をこのブロック自身が持つので、上に別の見出しブロックを重ねないこと。⚠️ 固定ページでは画面いっぱいに広がり（margin-left calc((100% - 100vw)/2)）、自前で上下80px（600px以下は上48px下24px）の padding を持つので前後にスペーサーを足さない。"
    },
    "attributes": []
}