「テンプレート:検索結果カード」の版間の差分

← 古い編集

ビジュアルウィキテキスト

2026年1月22日 (木) 11:19時点における最新版

[[{{{_pageName}}}|{{{店名}}}]]

昼： - ～- 　夜： - ～-

@@ 1行目: / 1行目: @@
 <div class="search-card">
-<div class="card-header">
+  <div class="card-layout">
-     <h3 class="card-title">[[{{{_pageName}}}|{{{店名}}}]]</h3>
+     <div class="card-image-area">
-    <p class="card-genre">{{{最寄り|}}} {{{ジャンル|}}}</p>
+      <div class="img-crop">
-</div>
+        <div class="image-scroll-container">
-<div class="img-crop">
+          <!-- ストリートビュー -->
-{{#if: {{{画像|}}}
+          <div class="image-item">
-  | [[File:{{{画像}}}|middle|class=crop-img]]
+            {{#if: {{{ストリートビューURL|}}}
-}}
+            | <div class="streetview-placeholder" data-url="{{{ストリートビューURL}}}" style="width: 200px; height: 200px;"></div>
-{{#if: {{{ストリートビューURL|}}}
+            | <div class="streetview-api-placeholder" data-name="{{{座標}}}" style="width: 200px; height: 200px;"></div>
-         | <div class="streetview-placeholder" data-url="{{{ストリートビューURL}}}" style="width: 100%; height: 100%;"></div>
+            }}
-         | <div class="streetview-api-placeholder" data-name="{{{座標}}}" style="width: 100%; height: 100%;"></div>
+          </div>
-    }}
+          <!-- 画像1 -->
-</div>
+          <div class="image-item">
-  <div class="card-info">
+            {{#if: {{{画像|}}}
-<p class="card-cost">
+            | [[File:{{{画像}}}|middle|class=crop-img]]
-昼：
+            }}
-{{#if: {{{予算昼下限|}}} | ￥{{{予算昼下限}}} | - }}
+          </div>
-～{{#if: {{{予算昼上限|}}} | ￥{{{予算昼上限}}} | - }}
+         </div>
-　夜：
+      </div>
-{{#if: {{{予算夜下限|}}} | ￥{{{予算夜下限}}} | - }}
+    </div>
-～{{#if: {{{予算夜上限|}}} | ￥{{{予算夜上限}}} | - }}
-</p>
+    <div class="card-content">
-    {{#if: {{{住所|}}} | <p class="card-address">{{{住所}}}</p> }}
+      <div class="card-header">
+        <h3 class="card-title">[[{{{_pageName}}}|{{{店名}}}]]</h3>
+         <p class="card-genre">{{{最寄り|}}} {{{ジャンル|}}}</p>
+      </div>
+      <div class="card-info">
+        <p class="card-cost">
+          昼：
+          {{#if: {{{予算昼下限|}}} | ￥{{{予算昼下限}}} | - }}
+          ～{{#if: {{{予算昼上限|}}} | ￥{{{予算昼上限}}} | - }}
+          　夜：
+          {{#if: {{{予算夜下限|}}} | ￥{{{予算夜下限}}} | - }}
+          ～{{#if: {{{予算夜上限|}}} | ￥{{{予算夜上限}}} | - }}
+        </p>
+        {{#if: {{{住所|}}} | <p class="card-address">{{{住所}}}</p> }}
+      </div>
+    </div>
    </div>
 </div>
-<html>
-<style>
-.search-card {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 10px;
-  margin-bottom: 12px;
-  max-width: 600px;
-  transition: box-shadow 0.2s;
-  max-height: 332px;
-}
-.search-card:hover {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.card-header {
-  margin-bottom: 5px;
-}
-.card-title {
-  margin: 0;
-}
-.card-genre {
-  margin: 0;
-  font-size: calc(1em - 3px);
-}
-.img-crop {
-  height: 200px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-.img-crop p {
-  height: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: row;
-}
-.crop-img img {
-  width: 200px;
-  height: 200px;
-  object-fit: cover;
-  border-radius: 4px;
-  display: inline-block;
-  margin-right: 2px;
-}
-.card-info {
-  margin-top: 10px;
-}
-.card-cost, .card-address {
-  margin: 0;
-  font-size: calc(1em - 3px);
-}
-</style>
-<script>
-document.addEventListener("DOMContentLoaded", function() {
-	document.querySelectorAll(".streetview-placeholder").forEach(function(el) {
-	    const url = el.getAttribute("data-url");
-	    if (!url) return;
-	    const iframe = document.createElement("iframe");
-	    iframe.src = url;
-	    iframe.width = "100%";
-	    iframe.height = "100%";
-	    iframe.style.border = "0";
-	    iframe.loading = "lazy";
-	    iframe.allowFullscreen = true;
-	    iframe.referrerPolicy = "no-referrer-when-downgrade";
-	    el.appendChild(iframe);
-  });
- 	document.querySelectorAll(".streetview-api-placeholder").forEach(function(el) {
-	    const name = el.getAttribute("data-name").replace(/\s+/g, "");
-	    if (!name) return;
-        const src = `https://www.google.com/maps/embed/v1/streetview?key=AIzaSyDOA7e6S9arQa6NvnsFYXxGjX9P_ycwoyM&location=${name}`;
-	    const iframe = document.createElement("iframe");
-	    iframe.src = src;
-	    iframe.width = "100%";
-	    iframe.height = "100%";
-	    iframe.style.border = "0";
-	    iframe.loading = "lazy";
-	    iframe.allowFullscreen = true;
-	    iframe.referrerPolicy = "no-referrer-when-downgrade";
-	    el.appendChild(iframe);
-  });
-});
-</script>
-</html>