「メインページ」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の95版が非表示) | |||
| 1行目: | 1行目: | ||
{{#tag:metadesc | 川西図鑑は、川西市の「お店・人・場所」を集めた地域図鑑サイトです。飲食店から地域の活動まで、誰でも書けて、誰でも探せます。 }} | |||
<templatestyles src="検索結果カード/styles.css" /> | |||
<html> | <html> | ||
<div class="kawanishi-top"> | <div class="kawanishi-top"> | ||
| 4行目: | 6行目: | ||
<!-- Hero --> | <!-- Hero --> | ||
<section class="hero"> | <section class="hero"> | ||
<div class="hero-bg | <div class="hero-bg"> | ||
</div> | </div> | ||
<h1>川西図鑑</h1> | <div class="hero-inner"> | ||
<h1>川西図鑑</h1> | |||
<p class="catch hero-text-bg"> | |||
川西の「お店・人・場所」を集めた地域図鑑 | |||
</p> | |||
<p class="lead hero-text-bg"> | |||
飲食店から地域の活動まで。<br> | |||
川西市にある情報を、誰でも書き、誰でも探せます。 | |||
</p> | |||
<div class="hero-actions"> | |||
<a class="kz-btn secondary kz-with-icon" role='button' href="/wiki/カテゴリーでさがす"> | |||
<span class="kz-icon">📂</span> | |||
<span class="kz-label">カテゴリーでさがす</span> | |||
</a> | |||
<a class="kz-btn secondary kz-with-icon" role='button' href="/wiki/場所でさがす"> | |||
<span class="kz-icon">📍</span> | |||
<span class="kz-label">場所でさがす</span> | |||
</a> | |||
</div> | |||
</div> | </div> | ||
</section> | </section> | ||
<!-- How to use --> | |||
<section class="kz-section"> | |||
<h2>図鑑</h2> | |||
<div class="card-grid"> | <p class="section-lead"> | ||
<a class="card" href="/wiki/ | 川西図鑑では、探し方を選ぶことができます。 | ||
<span class="icon"> | </p> | ||
<span class="title"> | |||
<span class="desc"> | <div class="card-grid"> | ||
<div class="card"> | |||
<a href="/wiki/カテゴリーでさがす" class="card-box card-main"> | |||
<span class="icon">📂</span> | |||
<span class="title">カテゴリーでさがす</span> | |||
<span class="desc"> | |||
飲食店・美容・施設・地域の活動など、<br> | |||
カテゴリーごとに情報を探せます。 | |||
</span> | |||
</a> | |||
</div> | |||
<div class="card"> | |||
<a href="/wiki/場所でさがす" class="card-box card-main"> | |||
<span class="icon">📍</span> | |||
<span class="title">場所でさがす</span> | |||
<span class="desc"> | |||
最寄り駅やエリアから、<br> | |||
近くのお店や施設を探せます。 | |||
</span> | |||
</a> | </a> | ||
</div> | </div> | ||
</section> | </div> | ||
</section> | |||
<!-- Article(準備中)--> | <!-- Article(準備中)--> | ||
<section class="section alt" | <section class="kz-section alt" | ||
style=" | style=" | ||
position: relative; | position: relative; | ||
| 88行目: | 102行目: | ||
<div class="center-actions"> | <div class="center-actions"> | ||
<a href="/wiki/記事一覧" class="btn primary">記事一覧を見る</a> | <a href="/wiki/記事一覧" class="kz-btn primary">記事一覧を見る</a> | ||
<a href="/wiki/記事を書く" class="btn ghost">記事を書く</a> | <a href="/wiki/記事を書く" class="kz-btn ghost">記事を書く</a> | ||
</div> | </div> | ||
| 110行目: | 124行目: | ||
</html> | </html> | ||
<!-- Random --> | <!-- Random --> | ||
<div class="section"> | <div class="kz-section"> | ||
=== 今日の川西 === | |||
<p class="kz-section-lead"> | |||
ランダムに1件表示しています。 | |||
</p> | </p> | ||
{{#cargo_query: | {{#cargo_query: | ||
tables= | tables=図鑑情報 | ||
|fields= | |fields=図鑑情報._pageName,図鑑情報.店名,図鑑情報.画像,図鑑情報.ジャンル,図鑑情報.郵便番号,図鑑情報.住所,図鑑情報.最寄り,図鑑情報.営業時間月,図鑑情報.定休日,図鑑情報.電話番号,図鑑情報.予算昼下限,図鑑情報.予算昼上限,図鑑情報.予算夜下限,図鑑情報.予算夜上限,図鑑情報.ストリートビューURL,図鑑情報.座標 | ||
|format=template | |format=template | ||
|template=検索結果カード | |template=検索結果カード | ||
| 123行目: | 137行目: | ||
|order by=_rowID DESC | |order by=_rowID DESC | ||
|limit=1 | |limit=1 | ||
|offset={{#expr: {{#time:U}} mod | |offset={{#expr: {{#time:U}} mod 489 }} | ||
|more results text= | |more results text= | ||
}} | }} | ||
</div> | </div> | ||
<div class="kz-section"> | |||
===== お店のオーナー様へ ===== | |||
情報の修正・写真の追加は無料でできます。メニューの掲載や公式バッジ付きページも対応可能です。 | |||
<div class="cta"> | |||
[https://{{SERVERNAME}}/business/lp/ 無料登録・公式ページの詳細を見る] | |||
</div> | |||
===== 市民の皆さんへ 情報提供のお願い ===== | |||
営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。 | |||
<div class="cta"> | |||
[[情報提供:飲食店|情報を提供・修正する]] | |||
</div> | |||
</div> | |||
<html> | <html> | ||
<!-- Footer Message --> | <!-- Footer Message --> | ||
| 137行目: | 167行目: | ||
</div> | </div> | ||
<style> | <style> | ||
/* ======================================== | |||
全体設定 | |||
======================================== */ | |||
.kawanishi-top { | .kawanishi-top { | ||
max-width: 1100px; | max-width: 1100px; | ||
margin: 0 | margin: calc(-1 * (var(--space-md) + var(--space-xl))) auto 0; | ||
padding: | padding: 0px 16px 40px; | ||
font-family: inherit; | font-family: inherit; | ||
--hero-bg-image: url('/images/thumb/1/1b/2704135_l.jpg/2560px-2704135_l.jpg'); | |||
} | } | ||
/* | /* ======================================== | ||
Hero セクション | |||
======================================== */ | |||
.hero { | .hero { | ||
position: relative; | |||
padding: | width: 100vw; | ||
margin-left: calc(50% - 50vw); | |||
margin-right: calc(50% - 50vw); | |||
min-height: 65vh; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
overflow: hidden; | |||
color: #fff; | |||
padding: 80px 20px 70px; | |||
} | } | ||
/* PC画面でヘッダーが左側にある場合の調整 */ | |||
.hero | @media screen and (min-width: 1120px) { | ||
.hero { | |||
width: calc(99vw - var(--header-size, 0px)); | |||
margin-left: calc(50% - 50vw + var(--header-size, 0px) / 2); | |||
} | |||
} | } | ||
.hero-bg { | |||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
background-image: var(--hero-bg-image); | |||
background-size: cover; | background-size: cover; | ||
background-position: center; | background-position: center; | ||
transform: scale(1.05); | transform: scale(1.05); | ||
} | |||
.hero-inner { | |||
position: relative; | |||
z-index: 1; | |||
max-width: 900px; | |||
text-align: center; | |||
} | |||
.hero h1 { | |||
font-family: | |||
"Hiragino Maru Gothic ProN", | |||
"Yu Gothic UI", | |||
"Meiryo", | |||
"Segoe UI", | |||
system-ui, | |||
-apple-system, | |||
sans-serif; | |||
font-weight: 700; | |||
font-size: clamp(36px, 8vw, 64px); | |||
letter-spacing: 0.12em; | |||
margin-bottom: 32px; | |||
text-shadow: 0 4px 12px rgba(0,0,0,0.5); | |||
} | |||
.hero-text-bg { | |||
background: rgba(0, 0, 0, 0.45); | |||
backdrop-filter: blur(8px); | |||
color: #fff; | |||
padding: 12px 24px; | |||
border-radius: 12px; | |||
margin-bottom: 16px; | |||
line-height: 1.6; | |||
} | } | ||
.hero .catch { | .hero .catch { | ||
font-size: | font-size: clamp(16px, 3.5vw, 22px); | ||
font-weight: 600; | font-weight: 600; | ||
} | } | ||
.hero .lead { | .hero .lead { | ||
color: # | font-size: clamp(13px, 2.8vw, 16px); | ||
margin-bottom: | color: #f9fafb; | ||
line-height: 1.8; | |||
margin-bottom: 40px; | |||
} | } | ||
.hero-actions { | .hero-actions { | ||
display: flex; | display: flex; | ||
gap: | gap: 16px; | ||
justify-content: center; | justify-content: center; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
/* | /* ======================================== | ||
.btn { | ボタン | ||
======================================== */ | |||
.kz-btn { | |||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
padding: | gap: 10px; | ||
border-radius: | padding: 16px 28px; | ||
border-radius: 12px; | |||
font-weight: 600; | |||
font-size: 15px; | |||
text-decoration: none; | text-decoration: none; | ||
line-height: 1; | |||
transition: all 0.2s ease; | |||
cursor: pointer; | |||
} | } | ||
.btn.primary { | .kz-btn.primary { | ||
background: # | background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | ||
color: #fff; | color: #fff; | ||
border: none; | |||
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4); | |||
} | |||
.kz-btn.primary:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); | |||
} | } | ||
.btn. | .kz-btn.secondary { | ||
background: # | background: #3b82f6; | ||
color: #fff; | |||
border: 1px solid rgba(255, 255, 255, 0.2); | |||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); | |||
} | } | ||
.btn.secondary { | .kz-btn.secondary:hover { | ||
background: # | background: #2563eb; | ||
transform: translateY(-2px); | |||
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4); | |||
} | } | ||
.btn.secondary | .kz-btn.secondary .kz-icon { | ||
filter: grayscale(0) brightness(1.1); | |||
} | } | ||
.btn.ghost { | .kz-btn.ghost { | ||
background: rgba(255, 255, 255, 0.15); | |||
color: # | backdrop-filter: blur(10px); | ||
color: #fff; | |||
border: 1px solid rgba(255, 255, 255, 0.3); | |||
} | } | ||
.kz-btn.ghost:hover { | |||
. | background: rgba(255, 255, 255, 0.25); | ||
} | } | ||
.kz-with-icon .kz-icon { | |||
font-size: 1.3em; | |||
} | } | ||
. | /* ======================================== | ||
セクション | |||
======================================== */ | |||
.kz-section { | |||
background: #f9fafb; | background: #f9fafb; | ||
padding- | padding: 10px 50px 20px; | ||
border-radius: 16px; | |||
margin-top: 40px; | |||
} | } | ||
.section h2 | .kz-section h2 { | ||
font-size: 28px; | |||
font-size: | font-weight: 700; | ||
margin- | margin-top: 12px; | ||
margin- | margin-bottom: 12px; | ||
color: #111827; | |||
} | } | ||
.section-lead { | .section-lead, | ||
.kz-section-lead { | |||
color: #6b7280; | color: #6b7280; | ||
margin-bottom: | font-size: 15px; | ||
margin-bottom: 32px; | |||
line-height: 1.7; | |||
} | } | ||
/* | /* ======================================== | ||
カードグリッド | |||
======================================== */ | |||
.card-grid { | .card-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(2, 1fr); | ||
gap: | gap: 24px; | ||
margin: 0 auto; | |||
max-width: 800px; | |||
} | } | ||
/* ======================================== | |||
カード | |||
======================================== */ | |||
.card { | .card { | ||
position: relative; | |||
} | |||
.card-box { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
text-align: center; | |||
padding: 32px 24px; | |||
background: #fff; | background: #fff; | ||
border: 2px solid #e5e7eb; | |||
border-radius: 16px; | |||
text-decoration: none; | text-decoration: none; | ||
transition: all 0.3s ease; | |||
transition: | box-shadow: 0 2px 8px rgba(0,0,0,0.06); | ||
height: 100%; | |||
gap: 16px; | |||
} | } | ||
.card:hover { | .card-box:hover { | ||
border-color: #f59e0b; | |||
box-shadow: 0 | box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15); | ||
transform: translateY(-4px); | |||
} | } | ||
.card .icon { | /* ======================================== | ||
font-size: | カード内要素 | ||
======================================== */ | |||
.card-box .icon { | |||
font-size: 48px; | |||
line-height: 1; | |||
display: block; | |||
margin-bottom: 8px; | |||
filter: brightness(1.1); | |||
} | } | ||
.card .title { | .card-box .title { | ||
font-size: 20px; | |||
font-weight: 700; | |||
color: #111827; | |||
display: block; | display: block; | ||
line-height: 1.3; | |||
} | } | ||
.card .desc { | .card-box .desc { | ||
font-size: | font-size: 14px; | ||
color: #6b7280; | color: #6b7280; | ||
display: block; | |||
line-height: 1.6; | |||
} | |||
.card-box:hover .title { | |||
color: #d97706; | |||
} | |||
.card-box:hover .desc { | |||
color: #374151; | |||
} | } | ||
. | /* ======================================== | ||
記事セクション(準備中) | |||
======================================== */ | |||
.kz-section.alt { | |||
position: relative; | |||
overflow: hidden; | |||
} | } | ||
.article-list { | .article-list { | ||
display: grid; | display: grid; | ||
gap: | gap: 12px; | ||
margin-bottom: | margin-bottom: 24px; | ||
} | } | ||
.article-item { | .article-item { | ||
background: #fff; | background: #fff; | ||
border-radius: | padding: 16px 20px; | ||
border-radius: 12px; | |||
border: 1px solid #e5e7eb; | border: 1px solid #e5e7eb; | ||
font-size: 15px; | |||
transition: all 0.2s; | |||
} | } | ||
. | .article-item:hover { | ||
border-color: #f59e0b; | |||
box-shadow: 0 2px 8px rgba(0,0,0,0.08); | |||
} | } | ||
.center-actions { | .center-actions { | ||
display: flex; | |||
gap: 12px; | |||
justify-content: center; | |||
flex-wrap: wrap; | |||
margin-top: 32px; | margin-top: 32px; | ||
} | |||
/* ======================================== | |||
CTA | |||
======================================== */ | |||
.cta { | |||
text-align: center; | text-align: center; | ||
margin: 24px 0; | |||
} | } | ||
.cta a { | |||
. | |||
display: inline-block; | display: inline-block; | ||
padding: 14px 28px; | |||
border-radius: 10px; | |||
font-weight: 600; | |||
text-decoration: none; | |||
background: #f59e0b; | |||
color: #fff; | |||
transition: all 0.2s; | |||
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); | |||
} | } | ||
. | |||
.cta a:hover { | |||
background: #d97706; | |||
transform: translateY(-2px); | |||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); | |||
} | } | ||
. | |||
.cta a:visited { | |||
color: #fff; | |||
} | } | ||
/* | /* ======================================== | ||
フッターメッセージ | |||
======================================== */ | |||
.footer-note { | .footer-note { | ||
text-align: center; | text-align: center; | ||
padding: | padding: 60px 20px 20px; | ||
color: #6b7280; | color: #6b7280; | ||
font-size: | font-size: 14px; | ||
line-height: 1.8; | |||
} | |||
/* ======================================== | |||
ダークモード | |||
======================================== */ | |||
.skin-theme-clientpref-night .kawanishi-top { | |||
--hero-bg-image: url('/images/8/8a/3704109_m.jpg'); | |||
} | |||
.skin-theme-clientpref-night .kz-section, | |||
.skin-theme-clientpref-night .kz-section.alt { | |||
background: #1e1e1e; | |||
} | |||
.skin-theme-clientpref-night .kz-section h2 { | |||
color: #f9fafb; | |||
} | } | ||
.skin-theme-clientpref-night .section-lead, | .skin-theme-clientpref-night .section-lead, | ||
.skin-theme-clientpref-night .kz-section-lead, | |||
.skin-theme-clientpref-night .footer-note { | .skin-theme-clientpref-night .footer-note { | ||
color: #9ca3af; | color: #9ca3af; | ||
} | } | ||
.skin-theme-clientpref-night . | .skin-theme-clientpref-night .card, | ||
,.skin-theme-clientpref-night | .skin-theme-clientpref-night .article-item { | ||
background: # | background: #2a2a2a; | ||
border-color: #3a3a3a; | |||
color: #e5e7eb; | |||
} | |||
.skin-theme-clientpref-night .card:hover:not(.disabled) { | |||
border-color: #f59e0b; | |||
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.3); | |||
} | |||
.skin-theme-clientpref-night .card .title, | |||
.skin-theme-clientpref-night .card-main .title { | |||
color: #f9fafb; | |||
} | |||
.skin-theme-clientpref-night .card .desc, | |||
.skin-theme-clientpref-night .card-main .desc { | |||
color: #9ca3af; | |||
} | |||
.skin-theme-clientpref-night .card-main { | |||
border-color: #3a3a3a; | |||
} | |||
.skin-theme-clientpref-night .card-main:hover { | |||
background: #374151; | |||
} | |||
.skin-theme-clientpref-night .card-box { | |||
background: #2a2a2a; | |||
border-color: #3a3a3a; | |||
color: #e5e7eb; | |||
} | |||
.skin-theme-clientpref-night .card-box:hover { | |||
background: #3a3a3a; | |||
border-color: #f59e0b; | |||
color: #fbbf24; | |||
} | |||
.skin-theme-clientpref-night .kz-btn.secondary { | |||
background: #3b82f6; | |||
color: #fff; | |||
border-color: rgba(255, 255, 255, 0.2); | |||
} | |||
.skin-theme-clientpref-night .kz-btn.secondary:hover { | |||
background: #2563eb; | |||
} | } | ||
.skin-theme-clientpref- | /* ======================================== | ||
.skin-theme-clientpref- | ダークモード(自動) | ||
background: # | ======================================== */ | ||
border-color: # | @media (prefers-color-scheme: dark) { | ||
.skin-theme-clientpref-os .kawanishi-top { | |||
--hero-bg-image: url('/images/8/8a/3704109_m.jpg'); | |||
} | |||
.skin-theme-clientpref-os .kz-section, | |||
.skin-theme-clientpref-os .kz-section.alt { | |||
background: #1e1e1e; | |||
} | |||
.skin-theme-clientpref-os .kz-section h2 { | |||
color: #f9fafb; | |||
} | |||
.skin-theme-clientpref-os .section-lead, | |||
.skin-theme-clientpref-os .kz-section-lead, | |||
.skin-theme-clientpref-os .footer-note { | |||
color: #9ca3af; | |||
} | |||
.skin-theme-clientpref-os .card, | |||
.skin-theme-clientpref-os .article-item, | |||
.skin-theme-clientpref-os .card-box { | |||
background: #2a2a2a; | |||
border-color: #3a3a3a; | |||
color: #e5e7eb; | |||
} | |||
.skin-theme-clientpref-os .card .title { | |||
color: #f9fafb; | |||
} | |||
.skin-theme-clientpref-os .card .desc { | |||
color: #9ca3af; | |||
} | |||
.skin-theme-clientpref-os .card-main { | |||
border-color: #3a3a3a; | |||
} | |||
.skin-theme-clientpref-os .card-main:hover, | |||
.skin-theme-clientpref-os .card-box:hover { | |||
background: #374151; | |||
} | |||
.skin-theme-clientpref-os .kz-btn.secondary { | |||
background: #3b82f6; | |||
color: #fff; | |||
border-color: rgba(255, 255, 255, 0.2); | |||
} | |||
.skin-theme-clientpref-os .kz-btn.secondary:hover { | |||
background: #2563eb; | |||
} | |||
} | } | ||
. | /* ======================================== | ||
レスポンシブ | |||
======================================== */ | |||
@media (max-width: 768px) { | |||
.hero { | |||
min-height: 55vh; | |||
padding: 60px 20px 50px; | |||
} | |||
.hero h1 { | |||
margin-bottom: 24px; | |||
} | |||
.hero-text-bg { | |||
padding: 10px 18px; | |||
} | |||
.hero-actions { | |||
gap: 12px; | |||
} | |||
.kz-btn { | |||
padding: 14px 24px; | |||
font-size: 14px; | |||
} | |||
.card-grid { | |||
gap: 16px; | |||
} | |||
.card-box { | |||
padding: 24px 20px; | |||
} | |||
.card-box .icon { | |||
font-size: 40px; | |||
} | |||
.card-box .title { | |||
font-size: 18px; | |||
} | |||
.card-box .desc { | |||
display: none; | |||
} | |||
.kz-section { | |||
padding: 20px 15px; | |||
} | |||
.kz-section h2 { | |||
font-size: 24px; | |||
} | |||
} | } | ||
</style> | </style> | ||
</html> | </html> | ||
__目次非表示__ | __目次非表示__ | ||
2026年2月18日 (水) 09:29時点における最新版
図鑑
川西図鑑では、探し方を選ぶことができます。
準備中
記事
川西のさまざまな図鑑ページに関連する、
ユーザーが書いた記事を紹介します。
川西能勢口で見つけた小さな名店
昔の川西と今を比べてみる
川西で活動する人たち
お店のオーナー様へ
情報の修正・写真の追加は無料でできます。メニューの掲載や公式バッジ付きページも対応可能です。
市民の皆さんへ 情報提供のお願い
営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。