[ { "id": 1940, "title": "ソート機能付き比較ボックス_P-3", "icon": "", "keywords": [ "比較", "ボックス", "リッチ", "比較・レビュー", "ソート機能付き比較ボックス" ], "slug": "lazyblock/rich-comparison", "description": "", "category": "Lazyblocks Pro", "category_label": "Lazyblocks Pro", "supports": { "customClassName": true, "anchor": false, "html": false, "multiple": true, "inserter": true, "reusable": true, "color": false, "layout": false, "shadow": false, "spacing": false, "dimensions": false, "typography": false, "lock": true, "align": [ "wide", "full" ], "ghostkit": { "effects": false, "position": false, "spacings": false, "frame": false, "transform": false, "customCSS": false, "display": false, "attributes": false } }, "controls": { "control_7a68dd42b2": { "type": "repeater", "name": "comp_items", "default": "", "label": "比較アイテム一覧", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "rows_label": "{{#}}: {{item_name}}" }, "control_d648324c5f": { "type": "toggle", "name": "show_badge", "default": "", "label": "バッジを表示する", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "checked": "false" }, "control_f1aa91453e": { "type": "select", "name": "badge_type", "default": "", "label": "バッジの種類", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "コーナーリボン", "value": "ribbon" }, { "label": "プライスタグ", "value": "pricetag" }, { "label": "フロステッドグラス", "value": "glass" } ], "conditional_logic": [ [ { "control": "comp_items.show_badge", "operator": "==", "value": "1" } ] ] }, "control_87fa024228": { "type": "text", "name": "badge_text", "default": "おすすめ第1位", "label": "バッジの文言", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "conditional_logic": [ [ { "control": "comp_items.show_badge", "operator": "==", "value": "1" } ] ] }, "control_eb89c644b5": { "type": "text", "name": "item_name", "default": "", "label": "アイテム名 / 製品名", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_b15b4a4ed3": { "type": "image", "name": "item_img", "default": "", "label": "画像", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_25dafd4aa5": { "type": "number", "name": "rating", "default": "4.5", "label": "総合評価 (星)", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "", "min": "0", "max": "5", "step": "0.5" }, "control_1cabf34dcf": { "type": "text", "name": "price_text", "default": "無料", "label": "価格 (表示用)", "help": "例：無料、買い切り¥9,800 など", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_b32b4f4d2d": { "type": "number", "name": "price_val", "default": "", "label": "価格 (ソート計算用)", "help": "並び替え用の数値のみ入力（無料は 0 を入力）", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_f76a1c4ab4": { "type": "rich_text", "name": "price_sub", "default": "", "label": "価格（補足・注釈）", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_89b86649d7": { "type": "url", "name": "btn_url", "default": "", "label": "ボタンリンク", "help": "アフィリエイトリンク等を入力", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_192ab3462c": { "type": "text", "name": "btn_text", "default": "", "label": "ボタンテキスト", "help": "詳細を見る", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_64698f4dc8": { "type": "text", "name": "feature_1", "default": "", "label": "特徴1", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_3adb4a4bc0": { "type": "text", "name": "feature_2", "default": "", "label": "特徴2", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_25bbaf4418": { "type": "text", "name": "feature_3", "default": "", "label": "特徴3", "help": "", "child_of": "control_7a68dd42b2", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_9efaae4ead": { "type": "text", "name": "label_item", "default": "アイテム / 製品", "label": "アイテム列", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_760b514400": { "type": "text", "name": "label_rating", "default": "総合評価", "label": "評価列", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_a949364ddb": { "type": "text", "name": "label_price", "default": "価格", "label": "価格列", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_c37afb4383": { "type": "text", "name": "label_features", "default": "主要機能・特徴", "label": "特徴列", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_d81bca47ea": { "type": "text", "name": "label_btn", "default": "詳細・チェック", "label": "ボタン列", "help": "", "child_of": "", "placement": "inspector", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" } }, "code": { "output_method": "html", "editor_html": "", "editor_callback": "", "frontend_html": "
\r\n
⇄ 横にスクロールして比較できます
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{#each comp_items}}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {{/each}}\r\n \r\n
{{label_item}}{{label_rating}} {{label_price}} {{label_features}}{{label_btn}}
\r\n
\r\n {{#if show_badge}}\r\n
\r\n {{badge_text}}\r\n
\r\n {{/if}}\r\n {{#if item_img.url}}\r\n \"{{item_name}}\"\r\n {{/if}}\r\n
{{item_name}}
\r\n
\r\n 		\r\n
\r\n ★ {{rating}}\r\n
\r\n 		\r\n
{{price_text}}
\r\n {{#if price_sub}}\r\n
{{{price_sub}}}
\r\n {{/if}}\r\n 		\r\n
    \r\n {{#if feature_1}}
  • {{feature_1}}
    • {{/if}}\r\n {{#if feature_2}}
  • {{feature_2}}
    • {{/if}}\r\n {{#if feature_3}}
  • {{feature_3}}
    • {{/if}}\r\n
\r\n 		\r\n \r\n {{btn_text}}\r\n \r\n
\r\n
\r\n
", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": ".lb-rich-comparison-wrapper { \r\n --lb-header-bg-1: #1e293b; \r\n --lb-header-bg-2: #0f172a; \r\n --lb-btn-bg-1: #3b82f6; \r\n --lb-btn-bg-2: #1d4ed8; \r\n --lb-btn-hover-1: #60a5fa; \r\n --lb-btn-hover-2: #2563eb; \r\n --lb-accent-star: #f59e0b; \r\n margin: 4em 0; \r\n position: relative; \r\n font-family: \"Inter\", \"Helvetica Neue\", Arial, \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Noto Sans JP\", Meiryo, sans-serif; \r\n color: #334155;\r\n}\r\n\r\n.lb-comp-scroll-hint { \r\n display: block; text-align: right; font-size: 0.85em; color: #94a3b8; margin-bottom: 12px; font-weight: bold; letter-spacing: 0.5px;\r\n}\r\n\r\n.lb-comp-table-container {\r\n width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;\r\n background: #fff; border-radius: 16px; \r\n box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;\r\n border: 1px solid rgba(226, 232, 240, 0.8) !important;\r\n scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9;\r\n}\r\n\r\n.lb-comp-table-container::-webkit-scrollbar { height: 10px; }\r\n.lb-comp-table-container::-webkit-scrollbar-track { background: #f8fafc; border-radius: 0 0 16px 16px; }\r\n.lb-comp-table-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f8fafc; }\r\n.lb-comp-table-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\r\n\r\n.lb-comp-table { width: 100%; min-width: 850px; border-collapse: collapse; }\r\n\r\n.lb-comp-table th { \r\n background: linear-gradient(135deg, var(--lb-header-bg-1) 0%, var(--lb-header-bg-2) 100%) !important; \r\n color: #f8fafc !important; padding: 20px 15px !important; font-weight: 800 !important; \r\n white-space: nowrap !important; cursor: pointer; user-select: none; letter-spacing: 1px; \r\n font-size: 0.95em !important; text-align: center !important; justify-content: center !important; \r\n}\r\n.lb-comp-table th:hover { opacity: 0.95; }\r\n\r\n.lb-comp-table td { \r\n padding: 24px 15px !important; border-bottom: 1px solid #f1f5f9 !important; vertical-align: middle !important; \r\n text-align: center !important; \r\n}\r\n\r\n.lb-comp-table th:nth-child(2) { min-width: 115px !important; }\r\n.lb-comp-table th:nth-child(3) { min-width: 125px !important; }\r\n.lb-comp-table th:nth-child(4) { min-width: 220px !important; }\r\n.lb-comp-table th:nth-child(5) { min-width: 200px !important; }\r\n\r\n/* ★修正：4列目（機能）は左揃え、5列目（ボタン）は中央揃え */\r\n.lb-comp-table td:nth-child(4) { text-align: left !important; }\r\n.lb-comp-table td:nth-child(5) { text-align: center !important; }\r\n\r\n.lb-comp-table tbody tr { transition: background 0.3s ease !important; position: relative; }\r\n.lb-comp-table tbody tr:nth-child(even) { background: #f8fafc !important; }\r\n.lb-comp-table tbody tr:hover { background: #f0fdfa !important; }\r\n\r\n.lb-sticky-col {\r\n position: sticky !important; left: 0 !important; z-index: 10;\r\n background: inherit; border-right: none !important;\r\n box-shadow: 4px 0 15px -5px rgba(0,0,0,0.04) !important;\r\n width: 200px; min-width: 180px;\r\n}\r\n.lb-comp-table thead .lb-sticky-col { \r\n z-index: 11; background: linear-gradient(135deg, var(--lb-header-bg-1) 0%, var(--lb-header-bg-2) 100%) !important; \r\n text-align: center !important;\r\n}\r\n\r\n.lb-comp-table tbody tr .lb-sticky-col::before {\r\n content: \"\" !important; position: absolute !important; left: 0 !important; top: 15% !important; \r\n height: 70% !important; width: 4px !important; background: var(--lb-btn-bg-1) !important; \r\n border-radius: 0 4px 4px 0 !important; transform: scaleY(0) !important; \r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; z-index: 30 !important;\r\n}\r\n.lb-comp-table tbody tr:hover .lb-sticky-col::before { transform: scaleY(1) !important; }\r\n\r\n.lb-comp-item-header { \r\n position: relative !important; padding-top: 15px !important; \r\n display: inline-block !important; text-align: center !important; width: 100% !important;\r\n}\r\n\r\n.lb-comp-img { \r\n width: 100% !important; max-width: 80px !important; height: auto !important; aspect-ratio: 1/1; \r\n object-fit: contain !important; border-radius: 16px !important; margin: 0 auto 12px !important; display: block !important; \r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important; transition: transform 0.4s ease !important;\r\n}\r\n.lb-comp-table tbody tr:hover .lb-comp-img { transform: translateY(-4px) scale(1.05) !important; }\r\n\r\n.lb-comp-name { font-weight: 800 !important; font-size: 1.05em !important; color: #0f172a !important; line-height: 1.4 !important; }\r\n.lb-star-icon { color: var(--lb-accent-star) !important; font-size: 1.4em !important; margin-right: 4px !important; }\r\n.lb-rating-num { font-weight: 900 !important; font-size: 1.3em !important; color: #0f172a !important; }\r\n\r\n.lb-comp-price { \r\n font-weight: 900 !important; color: #ef4444 !important; font-size: 1.25em !important; \r\n white-space: nowrap !important; line-height: 1.2 !important;\r\n}\r\n\r\n.lb-comp-price-sub {\r\n display: block !important; font-size: 0.75em !important; color: #64748b !important; \r\n margin-top: 6px !important; font-weight: 600 !important; line-height: 1.4 !important;\r\n}\r\n\r\n/* ★修正：リスト全体をブロック要素にして左端に寄せる */\r\n.lb-comp-features-list { list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; display: block !important; }\r\n.lb-comp-features-list li { position: relative !important; padding-left: 1.6em !important; margin-bottom: 0.9em !important; font-size: 0.92em !important; color: #475569 !important; font-weight: 500 !important; }\r\n.lb-comp-features-list li::before { content: \"✔\" !important; position: absolute !important; left: 0 !important; top: 0 !important; color: var(--lb-btn-bg-1) !important; font-weight: 900 !important; }\r\n\r\n@keyframes lb-btn-shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\r\n.lb-comp-btn {\r\n display: inline-block !important; padding: 14px 22px !important; color: #fff !important;\r\n background: linear-gradient(135deg, var(--lb-btn-bg-1) 0%, var(--lb-btn-bg-2) 100%) !important; \r\n font-weight: 800 !important; border-radius: 50px !important; text-decoration: none !important; \r\n transition: all 0.3s ease !important; line-height: 1.3 !important; font-size: 0.95em !important;\r\n white-space: nowrap !important; word-break: keep-all !important;\r\n box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25) !important; position: relative !important; overflow: hidden !important; margin: 0 auto !important; \r\n}\r\n.lb-comp-btn::after { content: \"\" !important; position: absolute !important; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%) !important; transform: skewX(-25deg) !important; animation: lb-btn-shine 4s infinite !important; }\r\n.lb-comp-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important; }\r\n\r\n.editor-styles-wrapper .lb-comp-btn, .wp-admin .lb-comp-btn { pointer-events: none !important; cursor: default !important; }\r\n\r\n@keyframes lb-eclipse-run { 0% { left: -150%; } 20% { left: 150%; } 100% { left: 150%; } }\r\n\r\n[class*=\"lb-badge-\"] { \r\n position: absolute !important; top: -15px !important; left: -15px !important; \r\n z-index: 20 !important; overflow: hidden !important; \r\n font-size: 0.72em !important; font-weight: 900 !important; \r\n letter-spacing: 0.5px !important; white-space: nowrap !important; \r\n display: inline-block !important; line-height: 1.2 !important; \r\n}\r\n[class*=\"lb-badge-\"] span { position: relative !important; z-index: 2 !important; }\r\n[class*=\"lb-badge-\"]::before { \r\n content: \"\" !important; position: absolute !important; top: 0; left: -150%; width: 50%; height: 100%; \r\n background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%) !important; \r\n transform: skewX(-25deg) !important; animation: lb-eclipse-run 3.5s infinite !important; z-index: 1 !important; \r\n}\r\n\r\n.lb-badge-ribbon, [class*=\"ribbon\"], [class*=\"リボン\"] { padding: 6px 14px !important; border-radius: 0 0 12px 0 !important; color: #fff !important; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2) !important; }\r\n.lb-badge-pricetag, [class*=\"pricetag\"], [class*=\"タグ\"] { padding: 7px 18px 7px 12px !important; color: #fff !important; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; border-radius: 0 0 0 0 !important; box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2) !important; }\r\n.lb-badge-pricetag::after, [class*=\"pricetag\"]::after, [class*=\"タグ\"]::after { content: \"\" !important; position: absolute !important; right: 0 !important; top: 0 !important; border-top: 16px solid transparent !important; border-bottom: 16px solid transparent !important; border-left: 12px solid #dc2626 !important; border-right: none !important; z-index: 0 !important; }\r\n.lb-badge-glass, [class*=\"glass\"], [class*=\"グラス\"] { padding: 5px 15px !important; color: #0f172a !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; border-right: 1px solid rgba(255,255,255,0.8) !important; border-bottom: 1px solid rgba(255,255,255,0.8) !important; border-radius: 0 0 12px 0 !important; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.05) !important; }\r\n\r\n@media (max-width: 768px) { .lb-sticky-col { width: 140px !important; min-width: 140px !important; } .lb-comp-img { max-width: 65px !important; } .lb-comp-table th, .lb-comp-table td { padding: 16px 10px !important; } }", "editor": "" }, "script": { "view": "document.addEventListener('DOMContentLoaded', function() {\r\n const tables = document.querySelectorAll('.lb-comp-table');\r\n tables.forEach(table => {\r\n const headers = table.querySelectorAll('.lb-sortable');\r\n const tbody = table.querySelector('tbody');\r\n if (!tbody) return;\r\n\r\n headers.forEach((header, index) => {\r\n header.setAttribute('role', 'button');\r\n header.setAttribute('tabindex', '0');\r\n header.setAttribute('aria-sort', 'none');\r\n header.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n header.click();\r\n }\r\n });\r\n header.addEventListener('click', () => {\r\n const isAscending = header.classList.contains('sort-asc');\r\n const direction = isAscending ? -1 : 1;\r\n\r\n headers.forEach(h => {\r\n h.classList.remove('sort-asc', 'sort-desc');\r\n h.setAttribute('aria-sort', 'none');\r\n const icon = h.querySelector('.sort-icon');\r\n if (icon) icon.textContent = '↕';\r\n });\r\n\r\n header.classList.add(isAscending ? 'sort-desc' : 'sort-asc');\r\n header.setAttribute('aria-sort', isAscending ? 'descending' : 'ascending');\r\n header.querySelector('.sort-icon').textContent = isAscending ? '↓' : '↑';\r\n\r\n const rows = Array.from(tbody.querySelectorAll('tr'));\r\n rows.sort((a, b) => {\r\n const aCol = a.querySelectorAll('td')[index + 1];\r\n const bCol = b.querySelectorAll('td')[index + 1];\r\n const aVal = parseFloat(aCol.getAttribute('data-sort-value')) || 0;\r\n const bVal = parseFloat(bCol.getAttribute('data-sort-value')) || 0;\r\n return (aVal > bVal ? 1 : -1) * direction;\r\n });\r\n rows.forEach(row => tbody.appendChild(row));\r\n });\r\n const icon = header.querySelector('.sort-icon');\r\n if (icon) icon.textContent = '↕';\r\n });\r\n });\r\n});\r\n\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n document.querySelectorAll('.lb-rich-comparison-wrapper').forEach(function (wrapper) {\r\n var container = wrapper.querySelector('.lb-comp-table-container');\r\n var hint = wrapper.querySelector('.lb-comp-scroll-hint');\r\n if (!container || !hint) return;\r\n var check = function () {\r\n hint.style.display = container.scrollWidth > container.clientWidth + 1 ? 'block' : 'none';\r\n };\r\n check();\r\n window.addEventListener('resize', check);\r\n });\r\n});" }, "styles": [], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]