{"title":"メーカー \u003e 岩崎電気 \u003e LED投光器 \u003e 工事現場用照明","description":"\u003cdiv style=\"text-align: center;\" data-mce-style=\"text-align: center;\"\u003e\u003ca href=\"#\" onclick=\"window.history.back(); return false;\"\u003e\u003cimg data-mce-fragment=\"1\" width=\"900\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0678\/2726\/9932\/files\/return01.jpg?v=1669107660\" alt=\"直前のページに戻る\" data-mce-src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0678\/2726\/9932\/files\/return01.jpg?v=1669107660\"\u003e\u003c\/a\u003e\u003c\/div\u003e\n\u003c!-- =========================================================\n     LEDioc ProWorks ハンディワークライト\n     Shopify用 完成版\n     ・元画像のレイアウトをそのまま使用\n     ・4つのボタンをHTML\/CSSでクリック可能にする\n     ・ブラウザ幅変更時もボタン文字を画像幅に連動\n     ========================================================= --\u003e\n\n\u003cstyle\u003e\n  \/* =========================================================\n     全体\n     ========================================================= *\/\n\n  .proworks-section {\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  \/*\n   * ★重要\n   * ボタンの文字サイズを「ブラウザ幅」ではなく\n   * この画像コンテナの幅を基準にする\n   *\/\n  .proworks-wrap {\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto;\n    padding: 0;\n    line-height: 0;\n\n    \/* cqwを画像幅基準にする *\/\n    container-type: inline-size;\n  }\n\n\n  \/* =========================================================\n     メイン画像\n     ========================================================= *\/\n\n  .proworks-main-image {\n    display: block;\n    width: 100%;\n    height: auto;\n    max-width: 100%;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n\n  \/* =========================================================\n     商品ボタン共通\n     ========================================================= *\/\n\n  .proworks-cta {\n    position: absolute;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    box-sizing: border-box;\n\n    background: #FF4D00;\n    color: #ffffff !important;\n\n    border-radius: 7px;\n\n    text-decoration: none !important;\n\n    font-family:\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Noto Sans JP\",\n      \"Yu Gothic\",\n      \"Hiragino Kaku Gothic ProN\",\n      Meiryo,\n      sans-serif;\n\n    \/*\n     * ★ここが今回の重要ポイント\n     *\n     * vwではなく cqw を使用。\n     * 画像コンテナの幅に合わせて文字サイズが変わる。\n     *\/\n    font-size: clamp(10px, 1.1cqw, 18px);\n\n    font-weight: 800;\n\n    \/*\n     * 文字が縦方向にずれないようにする\n     *\/\n    line-height: 1;\n\n    \/*\n     * 文字を1行で表示\n     *\/\n    white-space: nowrap;\n\n    \/*\n     * 左右に少し余白\n     *\/\n    padding: 0 10px;\n\n    \/*\n     * ボタンの外にはみ出さない\n     *\/\n    overflow: hidden;\n\n    \/*\n     * クリック可能\n     *\/\n    pointer-events: auto;\n\n    \/*\n     * 軽いホバー効果\n     *\/\n    transition:\n      filter 0.15s ease,\n      transform 0.15s ease;\n  }\n\n\n  \/* =========================================================\n     マウスを乗せたとき\n     ========================================================= *\/\n\n  .proworks-cta:hover {\n    filter: brightness(0.92);\n    transform: translateY(-1px);\n  }\n\n\n  \/* =========================================================\n     40W\n     \n     元画像 1672 × 941px 基準\n     x = 29\n     y = 641\n     w = 319\n     h = 43\n     ========================================================= *\/\n\n  .proworks-cta-40 {\n    left: 1.734%;\n    top: 68.12%;\n    width: 19.079%;\n    height: 4.57%;\n  }\n\n\n  \/* =========================================================\n     60W\n\n     x = 378\n     y = 640\n     w = 322\n     h = 44\n     ========================================================= *\/\n\n  .proworks-cta-60 {\n    left: 22.608%;\n    top: 68.01%;\n    width: 19.258%;\n    height: 4.68%;\n  }\n\n\n  \/* =========================================================\n     120W\n\n     x = 729\n     y = 640\n     w = 312\n     h = 45\n     ========================================================= *\/\n\n  .proworks-cta-120 {\n    left: 43.600%;\n    top: 68.01%;\n    width: 18.660%;\n    height: 4.78%;\n  }\n\n\n  \/* =========================================================\n     200W\n\n     x = 1069\n     y = 640\n     w = 314\n     h = 45\n     ========================================================= *\/\n\n  .proworks-cta-200 {\n    left: 63.935%;\n    top: 68.01%;\n    width: 18.780%;\n    height: 4.78%;\n  }\n\n\n  \/* =========================================================\n     スマートフォン\n     \n     小さな画面でも文字が切れにくいように調整\n     ========================================================= *\/\n\n  @media screen and (max-width: 600px) {\n\n    .proworks-cta {\n      font-size: clamp(9px, 1.15cqw, 14px);\n      padding-left: 5px;\n      padding-right: 5px;\n      border-radius: 4px;\n    }\n\n  }\n\n\n  \/* =========================================================\n     さらに小さい画面\n     ========================================================= *\/\n\n  @media screen and (max-width: 400px) {\n\n    .proworks-cta {\n      font-size: 9px;\n      padding-left: 3px;\n      padding-right: 3px;\n      border-radius: 3px;\n    }\n\n  }\n\n\u003c\/style\u003e\n\n\n\u003c!-- =========================================================\n     LEDioc ProWorks\n     ========================================================= --\u003e\n\n\u003csection class=\"proworks-section\" aria-label=\"LEDioc ProWorks ハンディワークライト\"\u003e\n\n  \u003cdiv class=\"proworks-wrap\"\u003e\n\n    \u003c!-- =======================================================\n         ★ここに元画像を指定\n         \n         Shopifyにアップロードした画像のURLを入れる\n         ======================================================= --\u003e\n\n    \u003cimg class=\"proworks-main-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0678\/2726\/9932\/files\/LEDioc_ProWorks_reference.jpg?v=1789023154\" width=\"1672\" height=\"941\" alt=\"LEDioc ProWorks ハンディワークライト 40W 60W 120W 200W\" loading=\"lazy\"\u003e\n\n\n    \u003c!-- =======================================================\n         40W\n         ======================================================= --\u003e\n\n    \u003ca class=\"proworks-cta proworks-cta-40\" href=\"\/products\/40w\" aria-label=\"LEDioc ProWorks 40Wの商品ページを見る\"\u003e\n      40Wの商品を見る\n    \u003c\/a\u003e\n\n\n    \u003c!-- =======================================================\n         60W\n         ======================================================= --\u003e\n\n    \u003ca class=\"proworks-cta proworks-cta-60\" href=\"\/products\/60w\" aria-label=\"LEDioc ProWorks 60Wの商品ページを見る\"\u003e\n      60Wの商品を見る\n    \u003c\/a\u003e\n\n\n    \u003c!-- =======================================================\n         120W\n         ======================================================= --\u003e\n\n    \u003ca class=\"proworks-cta proworks-cta-120\" href=\"\/products\/120w\" aria-label=\"LEDioc ProWorks 120Wの商品ページを見る\"\u003e\n      120Wの商品を見る\n    \u003c\/a\u003e\n\n\n    \u003c!-- =======================================================\n         200W\n         ======================================================= --\u003e\n\n    \u003ca class=\"proworks-cta proworks-cta-200\" href=\"\/products\/200w\" aria-label=\"LEDioc ProWorks 200Wの商品ページを見る\"\u003e\n      200Wの商品を見る\n    \u003c\/a\u003e\n\n  \u003c\/div\u003e\n\n\u003c\/section\u003e","products":[],"url":"https:\/\/tenpozairyou.com\/collections\/meka-iwasakidenki-ledtoukouki-kouzigenbayousyoumei.oembed","provider":"店舗材料.COM","version":"1.0","type":"link"}