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

← 古い編集

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

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>
-</div>
+            | <div class="streetview-api-placeholder" data-name="{{{座標}}}" style="width: 200px; height: 200px;"></div>
-  <div class="card-info">
+            }}
-<p class="card-cost">
+          </div>
-昼：
+          <!-- 画像1 -->
-{{#if: {{{予算昼下限|}}} | ￥{{{予算昼下限}}} | - }}
+          <div class="image-item">
-～{{#if: {{{予算昼上限|}}} | ￥{{{予算昼上限}}} | - }}
+            {{#if: {{{画像|}}}
-　夜：
+            | [[File:{{{画像}}}|middle|class=crop-img]]
-{{#if: {{{予算夜下限|}}} | ￥{{{予算夜下限}}} | - }}
+            }}
-～{{#if: {{{予算夜上限|}}} | ￥{{{予算夜上限}}} | - }}
+          </div>
-</p>
+        </div>
-    {{#if: {{{住所|}}} | <p class="card-address">{{{住所}}}</p> }}
+      </div>
-    {{#if: {{{電話番号|}}} | <p class="card-tel">{{{電話番号}}}</p> }}
+    </div>
-     {{#if: {{{営業時間|}}} | <p class="card-hours">{{{営業時間}}}</p> }}
+    <div class="card-content">
+      <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: 12px;
-  margin-bottom: 12px;
-  max-width: 600px;
-  transition: box-shadow 0.2s;
-}
-.search-card:hover {
-  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-}
-.card-link {
-  color: inherit;
-  text-decoration: none;
-  display: block;
-}
-.card-header {
-  margin-bottom: 8px;
-}
-.card-title {
-  margin: 0;
-  font-size: 1.2em;
-}
-.card-genre {
-  margin: 0;
-  font-size: 0.9em;
-  color: #666;
-}
-.card-images img {
-  width: 130px;
-  height: 130px;
-  object-fit: cover;
-  border-radius: 4px;
-  display: inline-block;
-  margin-right: 2px;
-}
-.card-img {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-.card-info p {
-  margin: 2px 0;
-  font-size: 0.9em;
-}
-</style>
-</html>