テンプレート:検索結果カードのソースを表示

<div class="search-card">
<div class="card-header">
    <h3 class="card-title">[[{{{_pageName}}}|{{{店名}}}]]</h3>
    <p class="card-genre">{{{ジャンル}}}</p>
</div>
{{#if: {{{画像|}}} |
<div class="card-images">
  [[File:{{{画像|NoImage.jpg}}}|130x130px|link=]]
</div>
}}
  <div class="card-info">
    {{#if: {{{住所|}}} | <p class="card-address">{{{住所}}}</p> }}
    {{#if: {{{電話番号|}}} | <p class="card-tel">{{{電話番号}}}</p> }}
    {{#if: {{{営業時間|}}} | <p class="card-hours">{{{営業時間}}}</p> }}
  </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>