差分
このページの2つのバージョン間の差分を表示します。
| 次のリビジョン | 前のリビジョン | ||
| 48th_booth_info [2026/07/03 14:07] – 作成 Tana JH1HST | 48th_booth_info [2026/08/09 18:49] (現在) – Tana JH1HST | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| + | [ [[48th_booth_info_en|To English ver.]] ] | ||
| + | |||
| ====== 出展ブース情報 ====== | ====== 出展ブース情報 ====== | ||
| + | A~Fエリアをクリックすると、各エリアのブース情報をご覧いただけます。 | ||
| + | |||
| + | マップ下の「出展ブース検索」もお役立てください。 | ||
| + | |||
| + | ※マップの選択が上手くできない場合は、マップ下部のメニューをご利用ください。 | ||
| + | |||
| + | \\ | ||
| < | < | ||
| < | < | ||
| /* ハムフェア2026 会場案内 クリックマップ */ | /* ハムフェア2026 会場案内 クリックマップ */ | ||
| - | .hf2026-map-wrap{ | + | .hf2026-map-wrap { |
| max-width: 1200px; | max-width: 1200px; | ||
| margin: 0 auto 1.5em auto; | margin: 0 auto 1.5em auto; | ||
| 行 11: | 行 20: | ||
| } | } | ||
| - | .hf2026-map-box{ | + | .hf2026-map-box { |
| position: relative; | position: relative; | ||
| width: 100%; | width: 100%; | ||
| 行 17: | 行 26: | ||
| } | } | ||
| - | .hf2026-map-box img{ | + | .hf2026-map-box img { |
| + | display: block; | ||
| width: 100%; | width: 100%; | ||
| height: auto; | height: auto; | ||
| - | display: block; | ||
| border: 1px solid #d9d9d9; | border: 1px solid #d9d9d9; | ||
| border-radius: | border-radius: | ||
| - | box-shadow: 0 2px 10px rgba(0, | + | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); |
| } | } | ||
| - | /* クリック領域 */ | + | /* 画像上のクリック領域 */ |
| - | .hf2026-area{ | + | .hf2026-area { |
| position: absolute; | position: absolute; | ||
| display: block; | display: block; | ||
| + | box-sizing: border-box; | ||
| + | border: 3px solid transparent; | ||
| border-radius: | border-radius: | ||
| + | background: rgba(255, 255, 255, 0.01); | ||
| text-decoration: | text-decoration: | ||
| - | background: rgba(255, | + | |
| - | border: 3px solid rgba(255, | + | |
| - | transition: all .15s ease; | + | border-color |
| - | box-sizing: border-box; | + | box-shadow 0.15s ease; |
| } | } | ||
| - | .hf2026-area: | + | .hf2026-area: |
| - | background: rgba(255, | + | .hf2026-area: |
| - | border-color: | + | background: rgba(255, 255, 255, 0.20); |
| - | box-shadow: inset 0 0 0 2px rgba(255, | + | border-color: |
| + | box-shadow: | ||
| + | | ||
| + | 0 0 12px rgba(0, 70, 180, 0.25); | ||
| + | outline: none; | ||
| } | } | ||
| - | /* マウスオーバー時のラベル | + | /* マウスオーバー時に表示する案内 |
| - | .hf2026-area span{ | + | .hf2026-area span { |
| position: absolute; | position: absolute; | ||
| left: 50%; | left: 50%; | ||
| top: 50%; | top: 50%; | ||
| - | | + | |
| display: inline-block; | display: inline-block; | ||
| padding: 8px 16px; | padding: 8px 16px; | ||
| - | | + | color: #ffffff; |
| - | font-weight: | + | background: rgba(0, |
| - | line-height: | + | |
| - | | + | |
| - | background: rgba(0,70,180,0.88); | + | |
| border-radius: | border-radius: | ||
| + | font-size: clamp(13px, 1.7vw, 19px); | ||
| + | font-weight: | ||
| + | line-height: | ||
| white-space: | white-space: | ||
| opacity: 0; | opacity: 0; | ||
| - | transition: opacity .15s ease; | ||
| pointer-events: | pointer-events: | ||
| + | transform: translate(-50%, | ||
| + | transition: opacity 0.15s ease; | ||
| } | } | ||
| - | .hf2026-area: | + | .hf2026-area: |
| + | .hf2026-area: | ||
| opacity: 1; | opacity: 1; | ||
| } | } | ||
| - | /* 各エリア位置(完成画像ベース) | + | /* 各エリアのクリック領域 |
| - | .hf-a{ left: 10.8%; top: 61.0%; width: | + | .hf-f { |
| - | .hf-b{ left: 37.2%; top: 61.0%; width: 17.7%; | + | |
| - | .hf-c{ left: 66.0%; top: 61.0%; width: 22.2%; height: 23.7%; | + | |
| + | | ||
| + | height: | ||
| + | } | ||
| - | .hf-d{ left: 62.8%; top: 20.8%; width: 25.5%; height: 34.8%; } | + | .hf-e { |
| - | .hf-e{ left: 37.7%; | + | |
| - | .hf-f{ left: 10.8%; top: 20.8%; width: 25.9%; height: 34.8%; | + | top: 20.0%; |
| + | | ||
| + | | ||
| + | } | ||
| - | /* 下の補助ボタン | + | .hf-d { |
| - | .hf2026-links{ | + | left: 62.5%; |
| - | | + | top: 20.0%; |
| + | width: 27.0%; | ||
| + | height: 36.5%; | ||
| + | } | ||
| + | |||
| + | .hf-a { | ||
| + | left: 10.5%; | ||
| + | top: 60.0%; | ||
| + | width: 26.5%; | ||
| + | height: 25.0%; | ||
| + | } | ||
| + | |||
| + | /* JAIAスペースもBエリアのクリック範囲に含む | ||
| + | .hf-b { | ||
| + | | ||
| + | top: 60.0%; | ||
| + | width: 28.8%; | ||
| + | height: 25.0%; | ||
| + | } | ||
| + | |||
| + | .hf-c { | ||
| + | left: 66.5%; | ||
| + | | ||
| + | width: 23.0%; | ||
| + | height: 25.0%; | ||
| + | } | ||
| + | |||
| + | /* サテライトステージ */ | ||
| + | .hf-stage { | ||
| + | left: 56.5%; | ||
| + | top: 9.5%; | ||
| + | width: 8.5%; | ||
| + | height: 9.0%; | ||
| + | border-radius: | ||
| + | } | ||
| + | |||
| + | /* 画像下の補助リンク */ | ||
| + | .hf2026-links { | ||
| display: flex; | display: flex; | ||
| flex-wrap: wrap; | flex-wrap: wrap; | ||
| gap: 10px; | gap: 10px; | ||
| justify-content: | justify-content: | ||
| + | margin-top: 16px; | ||
| } | } | ||
| - | .hf2026-links a{ | + | .hf2026-links a { |
| display: inline-block; | display: inline-block; | ||
| padding: 10px 18px; | padding: 10px 18px; | ||
| - | border-radius: | ||
| - | text-decoration: | ||
| - | font-weight: | ||
| color: #0b3f96; | color: #0b3f96; | ||
| background: #f5f8ff; | background: #f5f8ff; | ||
| border: 1px solid #b9c9ef; | border: 1px solid #b9c9ef; | ||
| - | } | ||
| - | |||
| - | .hf2026-links a:hover{ | ||
| - | background: #eaf1ff; | ||
| - | } | ||
| - | |||
| - | /* キッチンカー情報ボタン */ | ||
| - | .hf2026-kc{ | ||
| - | margin-top: 14px; | ||
| - | text-align: center; | ||
| - | } | ||
| - | |||
| - | .hf2026-kc a{ | ||
| - | display: inline-block; | ||
| - | padding: 12px 22px; | ||
| border-radius: | border-radius: | ||
| + | font-weight: | ||
| + | line-height: | ||
| text-decoration: | text-decoration: | ||
| - | font-weight: | ||
| - | color: #a85b00; | ||
| - | background: #fff7ea; | ||
| - | border: 1px solid #f0c37b; | ||
| } | } | ||
| - | .hf2026-kc a:hover{ | + | .hf2026-links a:hover, |
| - | background: #fff1d5; | + | .hf2026-links a: |
| + | color: #082e70; | ||
| + | background: #e7efff; | ||
| + | border-color: | ||
| + | text-decoration: | ||
| } | } | ||
| </ | </ | ||
| 行 126: | 行 172: | ||
| <div class=" | <div class=" | ||
| - | <img src=" | ||
| - | <a class=" | + | |
| - | < | + | src=" |
| + | alt=" | ||
| + | > | ||
| + | |||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| - | <a class=" | + | <a |
| - | < | + | |
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| - | <a class=" | + | <a |
| - | < | + | |
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| - | <a class=" | + | <a |
| - | < | + | |
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| - | <a class=" | + | <a |
| - | < | + | |
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| - | <a class=" | + | <a |
| - | < | + | |
| + | | ||
| + | | ||
| + | | ||
| + | < | ||
| </a> | </a> | ||
| + | |||
| + | <a | ||
| + | class=" | ||
| + | href=" | ||
| + | title=" | ||
| + | > | ||
| + | < | ||
| + | </a> | ||
| + | |||
| </ | </ | ||
| <div class=" | <div class=" | ||
| - | <a href="/ | + | <a href="./ |
| - | <a href="/ | + | <a href="./ |
| - | <a href="/ | + | <a href="./ |
| - | <a href="/ | + | <a href="./ |
| - | <a href="/ | + | <a href="./ |
| - | <a href="/ | + | <a href="./ |
| - | </ | + | <a href="./48th_s_stage_info">サテライトステージ</a> |
| - | + | ||
| - | <div class=" | + | |
| - | <a href="/ | + | |
| </ | </ | ||
| </ | </ | ||
| </ | </ | ||
| + | <fs large> | ||
| + | |||
| + | <fs large>{{ : | ||
| + | |||
| + | ---- | ||
| + | |||
| + | {{: | ||
| + | |||
| + | |||
| + | \\ | ||
| + | |||
| + | <php> | ||
| + | |||
| + | /** | ||
| + | * ハムフェア2026 出展ブース検索 | ||
| + | * | ||
| + | * 48th_booth_info の会場マップ下へインクルードして使用します。 | ||
| + | * 検索対象:ブース番号、出展者名 | ||
| + | * 検索結果:ブース番号、出展者名、エリアページへのリンク | ||
| + | */ | ||
| + | |||
| + | $hfBoothSearchData = <<<' | ||
| + | [{" | ||