てすと/ヤマガタンver8

●てすと

はい、承知いたしました。ご提示のブログ記事デザインを、CMSの本文エリアにそのまま貼り付けて使用できる、単一のHTML/CSS/JavaScriptコードとして実装します。レスポンシ?デザイン、スクロールに応じたアニメーション、ボタンのホバーエフェクトなどのインタラクティブな要素も盛り込んでいます。完成コード以下のコードブロックをコピーして、お使いのCMSのHTMLエディタに貼り付けてください。Generated html第40回山形紅花まつり /* --- 基本設定 --- */ :root { --main-font: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "sans-serif"; --color-text: #333333; --color-primary: #D9531E; /* オレンジ */ --color-secondary: #007bff; /* 青 */ --color-accent: #D9336C; /* ピンク */ --color-button: #a05d2c; --color-button-hover: #804a22; --color-bg-light: #fef9f2; --color-border: #dddddd; } /* --- 本体コンテナ --- */ .benibana-article { font-family: var(--main-font); color: var(--color-text); line-height: 1.8; max-width: 800px; margin: 0 auto; padding: 10px; } /* --- 見出しスタイル --- */ .benibana-article h1, .benibana-article h2, .benibana-article h3 { margin: 2em 0 1em 0; font-weight: 600; } .benibana-article .main-title { text-align: center; border-top: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); padding: 1em 0; margin-bottom: 2em; } .benibana-article .main-title .sub { display: block; font-size: 1.5rem; color: var(--color-primary); margin-top: 0.5em; } .benibana-article .section-title { font-size: 1.6rem; padding-left: 0.8em; border-left: 6px solid var(--color-primary); } /* --- コンテンツ要素 --- */ .benibana-article img.main-visual { width: 100%; height: auto; border-radius: 8px; margin-bottom: 2em; } .benibana-article p { margin-bottom: 1.5em; } .benibana-article .text-highlight { color: var(--color-accent); font-weight: bold; } /* --- 開催概要ブロック --- */ .benibana-article .summary-box { background-color: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 8px; padding: 1.5em 2em; margin: 2em 0; } .benibana-article .summary-box p { margin-bottom: 0.8em; } .benibana-article .summary-box strong { display: inline-block; width: 6em; /* ラベルの幅を揃える */ font-weight: 600; } /* --- ボタン --- */ .benibana-article .button-wrapper { text-align: center; margin: 2em 0; } .benibana-article .official-site-btn { display: inline-block; background-color: var(--color-button); color: #ffffff; padding: 0.8em 2.5em; text-decoration: none; font-weight: bold; border-radius: 50px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .benibana-article .official-site-btn:hover { background-color: var(--color-button-hover); transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } /* --- 目次 --- */ .benibana-article .table-of-contents { background-color: #f8f9fa; border-radius: 8px; padding: 1.5em; margin: 3em 0; } .benibana-article .toc-title { text-align: center; font-size: 1.2rem; font-weight: bold; margin: 0 0 1em 0; } .benibana-article .toc-list { list-style: none; padding-left: 0; } .benibana-article .toc-list li { margin-bottom: 0.8em; } .benibana-article .toc-list a { text-decoration: none; color: var(--color-secondary); font-weight: 500; transition: color 0.3s; } .benibana-article .toc-list a:hover { color: #0056b3; text-decoration: underline; } .benibana-article .toc-list li::before { content: attr(data-number) ". "; color: var(--color-secondary); font-weight: bold; } /* --- 特徴リスト --- */ .benibana-article .feature-list { list-style: none; padding-left: 0; } .benibana-article .feature-list li { padding-left: 1.5em; position: relative; margin-bottom: 0.8em; } .benibana-article .feature-list li::before { content: "●"; color: var(--color-primary); position: absolute; left: 0; } /* --- 紅花染め講座募集ブロック --- */ .benibana-article .info-box { border: 2px solid var(--color-primary); border-radius: 8px; padding: 1.5em 2em; margin: 2em 0; } .benibana-article .info-box-title { color: var(--color-primary); font-size: 1.3rem; font-weight: bold; text-align: center; margin: 0 0 1em 0; } /* --- イベントタイムテーブル --- */ .benibana-article .event-timetable { width: 100%; border-collapse: collapse; margin: 2em 0; } .benibana-article .event-timetable th, .benibana-article .event-timetable td { border: 1px solid var(--color-border); padding: 0.8em 1em; text-align: left; vertical-align: middle; } .benibana-article .event-timetable thead th { background-color: #f2f2f2; font-weight: bold; text-align: center; } .benibana-article .event-timetable tbody tr:nth-child(even) { background-color: #f9f9f9; } /* --- 注釈 --- */ .benibana-article .note { font-size: 0.9rem; color: #666; } /* --- スクロールアニメーション --- */ .scroll-animation { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .scroll-animation.is-visible { opacity: 1; transform: translateY(0); } /* --- レスポンシブデザイン (スマートフォン向け) --- */ @media (max-width: 768px) { .benibana-article { line-height: 1.7; } .benibana-article .main-title { font-size: 1.5rem; } .benibana-article .main-title .sub { font-size: 1.2rem; } .benibana-article .section-title { font-size: 1.4rem; } .benibana-article .summary-box, .benibana-article .info-box { padding: 1em 1.2em; } /* テーブルをカード型レイアウトに変換 */ .benibana-article .event-timetable thead { display: none; } .benibana-article .event-timetable, .benibana-article .event-timetable tbody, .benibana-article .event-timetable tr, .benibana-article .event-timetable td { display: block; width: 100%; } .benibana-article .event-timetable tr { margin-bottom: 1em; border: 1px solid var(--color-border); border-radius: 5px; overflow: hidden; } .benibana-article .event-timetable td { border: none; border-bottom: 1px solid #f0f0f0; text-align: right; position: relative; padding-left: 50%; } .benibana-article .event-timetable td:last-child { border-bottom: none; } .benibana-article .event-timetable td[data-label="日にち"] { background-color: #e9ecef; font-weight: bold; text-align: center; padding-left: 0; } .benibana-article .event-timetable td::before { content: attr(data-label); position: absolute; left: 1em; width: calc(50% - 2em); text-align: left; font-weight: bold; } .benibana-article .event-timetable td[data-label="日にち"]::before { content: ""; /* 日にちはヘッダーなので不要 */ } } 第40回山形紅花まつり伝統と文化が息づく夏の祭典へようこそ！山形市高瀬地区を舞台に、今年も「山形紅花まつり」が盛大に開催されます。丹精込めて育てられた紅花の鮮やかな色彩と、地域に根付く伝統文化が融合した、この夏ならではの特別なイベントです。紅花観賞はもちろん、体験プログラムや郷土芸能など、世代を問わず楽しめる魅力が満載！名称：第40回山形紅花まつり開催期間：令和7年7月5日 (土) ～7月6日 (日) 主な会場：高瀬紅花ふれあいセンター (メイン会場)、高沢地区 (写真撮影会場) ほか主催：山形紅花まつり実行委員会お問い合わせ：山形紅花まつり実行委員会 (TEL: 023-686-3341) 山形紅花まつり公式サイトはこちら目次まつりのハイライト：見どころとイベントイベントタイムテーブル山形が誇る「最上紅花」の魅力各会場のご案内アクセス方法日本遺産「山寺と紅花」紅花スタンプラリーキャンペーン 1. まつりのハイライト：見どころとイベント会場となる高瀬紅花ふれあいセンター周辺の畑では、生命力あふれる紅花がすくすくと育っています。まつり期間中は、紅花を五感で感じ、地域文化に触れる多彩なプログラムをご用意しています。紅花のプレゼントや紅花染め体験、自分で摘み取る紅花摘み体験高瀬小学校児童による紅花と地域の学習発表鹿楽招旭踊 (からおぎあさひおどり) などの郷土芸能披露カメラ愛好家必見！紅花娘の写真撮影会 (7月6日開催) 地元特産品の販売 (木工品、高瀬焼など) 各種記念切手の販売 (郵便局) 紅花染め講座参加者募集中！世界に一つだけの大判ハンカチを、紅花で染めてみませんか？専門家の指導のもと、伝統の染め方を体験できます。日時： 2025年7月5日 (土) 13:30～15:30 参加費：おひとり 1,000円お申し込み・お問い合わせ：高瀬紅花ふれあいセンター (023-686-3341) 2. イベントタイムテーブル 2日間にわたるまつりの詳細なスケジュールはこちらです。見たいイベントに合わせて、効率よく会場を回りましょう。日にち時間イベント内容 2025年7月5日 (土) 10:00～開会式・いのは太鼓 10:30～紅花プレゼント (先着200人・整理券配布9:30～) 10:40～12:00 紅花学習発表 (高瀬小)、老酒盛、花笠踊 10:30～17:00 切花販売 (1束500円) 13:30～15:30 紅花染め体験 (先着15人・1,000円) 2025年7月6日 (日) 10:00～紅花プレゼント (先着200人・整理券配布9:30～) 10:30～11:00 老酒盛、大黒舞、鹿楽招旭踊 10:00～16:00 切花販売 (1束500円) 11:00～12:30 写真撮影会 (紅花娘) 第1部 13:30～15:00 マジックショー 13:30～15:00 写真撮影会 (紅花娘) 第2部 (高沢会場) ※行事時間等が変更になる場合があります。最新情報は公式サイトをご確認ください。 document.addEventListener('DOMContentLoaded', () => { // --- スクロールアニメーション --- const scrollAnimationObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 // 10%見えたら発火 }); const animationTargets = document.querySelectorAll('.scroll-animation'); animationTargets.forEach(target => { scrollAnimationObserver.observe(target); }); // --- 目次からのスムーズスクロール --- const tocLinks = document.querySelectorAll('.toc-list a'); tocLinks.forEach(link => { link.addEventListener('click', function(e) { const href = this.getAttribute('href'); // 外部リンクやtel:などは通常の動作をさせる if (!href || href.startsWith('#') === false) { return; } e.preventDefault(); const targetId = href.substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); });});

★2025.07.01
★(C)柴田聖一 | SEI SIBATA