メニューを切り替える
個人設定メニューを切り替える
個人メニューを切り替える
ログインしていません
編集を行うと、IPアドレスが公開されます。

「テンプレート:飲食店ジャンルページ」の版間の差分

提供: 川西図鑑
編集の要約なし
編集の要約なし
 
(同じ利用者による、間の4版が非表示)
1行目: 1行目:
<templatestyles src="検索結果カード/styles.css" />
<templatestyles src="検索結果カード/styles.css" />
<templatestyles src="飲食店一覧ページ/styles.css" />
{{パンくずリスト|1=飲食店検索|2={{{genre}}}}}
{{パンくずリスト|1=飲食店検索|2={{{genre}}}}}
<html>
<style>
  .search-intro p {
    margin: 4px 0;
  }
  /* --- 検索説明文(ライトテーマ) --- */
  .search-intro {
    background: #f7f9fc;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
  }
  /* --- 検索説明文(ダークテーマ) --- */
  html.skin-theme-clientpref-night .search-intro {
    background: #1f2430;
    color: #e5e7eb;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
  }
</style>
</html>
<div class="search-intro">
<div class="search-intro">
   <p>
   <p>
106行目: 80行目:


   meta.content = desc;
   meta.content = desc;
  // 現在のURL取得
  let url = window.location.href;
  // ページネーション
  const fullurl = new URL(location.href);
  const page = parseInt(fullurl.searchParams.get('page') || '1', 10);
  // 最終ページ制御
  const countMeta = document.getElementById('count');
  if (!countMeta) return;
  const total = parseInt(countMeta.dataset.total, 10);
  const limit = parseInt(countMeta.dataset.limit, 10);
  if (isNaN(total) || isNaN(limit) || limit <= 0) return;
  const lastPage = Math.ceil(total / limit);
  if (lastPage <= 1) {
    const pagination = document.querySelector('.pagination');
    if (pagination) pagination.style.display = 'none';
    return;
  }
  if (page > lastPage) {
    fullurl.searchParams.set('page', lastPage);
    location.replace(fullurl.toString());
  }
  if (page < 1) {
    fullurl.searchParams.set('page', 1);
    location.replace(fullurl.toString());
  }
  function makeLink(targetPage) {
    fullurl.searchParams.set('page', targetPage);
    return fullurl.toString();
  }
  // 各ボタン
  const first = document.querySelector('[data-role="first-page"]');
  const prev  = document.querySelector('[data-role="prev-page"]');
  const next  = document.querySelector('[data-role="next-page"]');
  const last  = document.querySelector('[data-role="last-page"]');
  if (page <= 1) {
    first.classList.add('disabled');
    prev.classList.add('disabled');
  } else {
    first.href = makeLink(1);
    prev.href  = makeLink(page - 1);
  }
  if (page >= lastPage) {
    next.classList.add('disabled');
    last.classList.add('disabled');
  } else {
    next.href = makeLink(page + 1);
    last.href = makeLink(lastPage);
  }
  // 数字ボタン
  const pageNumbers = document.querySelector('[data-role="page-numbers"]');
  if (!pageNumbers) return;
  const start = Math.max(1, page - 2);
  const end = Math.min(lastPage, page + 2);
  for (let i = start; i <= end; i++) {
    const link = document.createElement('a');
    link.textContent = i;
    const newUrl = new URL(url);
    newUrl.searchParams.set('page', i);
    link.href = newUrl.toString();
    if (i === page) {
      link.classList.add('current');
    }
    pageNumbers.appendChild(link);
  }
});//# sourceURL=foobar.js
});//# sourceURL=foobar.js
</script>
</script>
193行目: 85行目:
{{#vardefine:hitCount |
{{#vardefine:hitCount |
   {{#cargo_query:
   {{#cargo_query:
       tables=飲食店情報
       tables=図鑑情報
       |fields=COUNT(*)
       |fields=COUNT(*)
       |where=(
       |where=(
           飲食店情報.ジャンル LIKE CONCAT('%{{{genre}}}%')
           図鑑情報.カテゴリ='飲食店' AND
          図鑑情報.ジャンル LIKE CONCAT('%{{{genre}}}%')
       )
       )
     }}
     }}
216行目: 109行目:
<!-- 検索実行 -->
<!-- 検索実行 -->
   {{#cargo_query:
   {{#cargo_query:
       tables=飲食店情報
       tables=図鑑情報
       |fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標
       |fields=図鑑情報._pageName,図鑑情報.店名,図鑑情報.画像,図鑑情報.ジャンル,図鑑情報.郵便番号,図鑑情報.住所,図鑑情報.最寄り,図鑑情報.営業時間月,図鑑情報.定休日,図鑑情報.電話番号,図鑑情報.予算昼下限,図鑑情報.予算昼上限,図鑑情報.予算夜下限,図鑑情報.予算夜上限,図鑑情報.ストリートビューURL,図鑑情報.座標
       |where=(
       |where=(
           飲食店情報.ジャンル LIKE CONCAT('%{{{genre}}}%')
           図鑑情報.カテゴリ='飲食店' AND
          図鑑情報.ジャンル LIKE CONCAT('%{{{genre}}}%')
       )
       )
       |format=template
       |format=template
230行目: 124行目:
       |more results text=
       |more results text=
     }}
     }}
<html>
{{ページネーション}}
<div class="pagination">
<a data-role="first-page" href="#"><<</a>
<a data-role="prev-page" href="#"><</a>
<div class="page-numbers" data-role="page-numbers"></div>
<a data-role="next-page" href="#">></a>
<a data-role="last-page"  href="#">>></a>
</div>
 
<style>
.pagination {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
  font-size: 14px;
}
 
.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  min-width: 40px;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid;
  transition: background-color 0.15s ease,
              color 0.15s ease,
              box-shadow 0.15s ease;
}
 
.page-numbers {
  display: flex;
  gap: 6px;
}
 
.page-numbers a {
  min-width: 36px;
  padding: 8px 0;
}
 
/* ライト・通常 */
.pagination a {
  background: #f9fafb;
  color: #1f2937;
  border-color: #d1d5db;
}
 
.pagination a:hover {
  background: #eef2f7;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
 
/* 非活性 */
.pagination a.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  pointer-events: none;
  box-shadow: none;
}
 
/* 現在ページ(数字) */
.pagination .page-numbers a.current {
  background: #1f2937;
  color: #fff;
  border-color: #1f2937;
  font-weight: 600;
  pointer-events: none;
}
 
/* ダーク・通常 */
.skin-theme-clientpref-night .pagination a {
  background: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}
 
.skin-theme-clientpref-night .pagination a:hover {
  background: #4b5563;
}
 
/* ダーク・非活性 */
.skin-theme-clientpref-night .pagination a.disabled {
  background: #1f2937;
  color: #6b7280;
  border-color: #374151;
}
 
/* ダーク・現在ページ */
.skin-theme-clientpref-night .pagination .page-numbers a.current {
  background: #f9fafb;
  color: #1f2937;
  border-color: #f9fafb;
}
</style>
</html>
 
__目次非表示__
__目次非表示__

2026年2月4日 (水) 16:41時点における最新版

ホーム › 飲食店検索 › [[{{{genre}}}]]

川西市で人気の{{{genre}}}のお店を一覧でご紹介しています。

下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。

検索条件

予約できる店だけ
予算
こだわり条件
支払い方法
禁煙 / 喫煙
メニュー
設備・サービス



川西市{{{genre}}}

0 件の結果があります(1 件目~)

検索結果

 該当する店舗はありません。