blogtop.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>いしたなBlog</title>
<link href="blogtop.css" rel="stylesheet" />
</head>
<body>
<header class="header">
<div class="blog-logo">
<img alt="いしたなBlogロゴ" id="site-top" src="blog-logo.png" width="500" height="100" />
</div>
<nav class="global-nav">
<ul>
<li><a href="#">新規登録</a></li>
<li><a href="#">ログイン</a></li>
<li><a href="#">マイページ</a></li>
<li><a href="#">メニュー</a></li>
</ul>
</nav>
</header>
<div class="container">
<aside class="sidebar">
<a href="#"><img alt="広告1" src="sidebanner1.png" width="230" height="182" /></a>
<a href="#"><img alt="広告2" src="sidebanner2.png" width="230" height="182" /></a>
<a href="#"><img alt="広告3" src="sidebanner3.png" width="230" height="182" /></a>
</aside>
<main class="main-contents">
<section>
<div class="center">
<div class="banner-space">
<img alt="mkeiri2fa" src="mkeiri2fa.jpg" id="bigimg" width="1000" height="496" />
</div>
<ul>
<li><img alt="mkeiri2f" src="thumb-mkeiri2fa.jpg" class="thumb" data-image="mkeiri2fa.jpg"></li>
<li><img alt="mkeiri2f" src="thumb-mkeiri2fb.jpg" class="thumb" data-image="mkeiri2fb.jpg"></li>
</ul>
</div>
</section>
<h1 class="site-title">Blog ISITANA</h1>
<h2 class="contents-title">新着記事</h2>
<ul class="news">
<li><a href="#">最新記事１</a></li>
<li><a href="#">最新記事２</a></li>
<li><a href="#">最新記事３</a></li>
<li><a href="#">最新記事４</a></li>
<li><a href="#">最新記事５</a></li>
</ul>
<h2 class="contents-title">おすすめ記事</h2>
<ul>
<li><a href="#">おすすめ記事１</a></li>
<li><a href="#">おすすめ記事２</a></li>
<li><a href="#">おすすめ記事３</a></li>
<li><a href="#">おすすめ記事４</a></li>
<li><a href="#">おすすめ記事５</a></li>
</ul>
<h2 class="contents-title"></h2>
<nav class="footer-nav">
<ul>
<li><a href="#site-top">ページTOP</a></li>
<li><a href="#">利用規約</a></li>
<li><a href="">プライバシポリシー</a></li>
</ul>
</nav>
</main>
</div>
<footer>
</footer>
<script>
'use strict';
const thumbs = document.querySelectorAll('.thumb');
const bigImg = document.getElementById('bigimg');
const interval = 3000; // 自動切り替えの間隔（ミリ秒）
const pauseDuration = 5000; // 手動切り替え後の一時停止時間（ミリ秒）
let currentIndex = 0;
let timer;
let paused = false;
// 画像切り替えの関数
function showImage(index) {
bigImg.src = thumbs[index].dataset.image;
}
// サムネイルクリック時の処理
thumbs.forEach(function(item, index) {
item.onclick = function() {
currentIndex = index;
showImage(currentIndex);
clearInterval(timer); // 自動切り替えのタイマーを一時停止
startSlideshowWithDelay(); // 一定時間後に自動切り替えを再開
}
});
// 自動切り替え
function startSlideshow() {
timer = setInterval(function() {
currentIndex++;
if (currentIndex >= thumbs.length) {
currentIndex = 0;
}
showImage(currentIndex);
}, interval);
}
// 手動切り替え後の一時停止
function startSlideshowWithDelay() {
if (paused) return;
paused = true;
setTimeout(function() {
paused = false;
startSlideshow();
}, pauseDuration);
}
// 初期表示
showImage(currentIndex);
startSlideshow();
</script>
</body>
</html>blogtop.css
@charset "utf-8";
body {
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
background-color: #dddddd;
margin: 0 auto;
}
img {
max-width: 100%;
height: auto;
}
.home-logo {
max-width: 300px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 952px;
margin: 0 auto;
background-color: #ffffff;
padding: 12px 24px 0;
}
.global-nav {
/*
border: solid 3px #936458;
border-radius: 5%;
*/
width: 500px;
}
.global-nav ul {
font-size: 14px;
display: flex;
margin: 0;
}
.global-nav a {
font-size: 14px;
color: #000000;
text-decoration: none;
}
.global-nav li:hover {
transition: background-color 0.5s;
background-color: #af7a6d;
}
.global-nav li {
font-weight: normal;
flex-grow: 1;
padding: 4px;
list-style: none;
text-align: center;
border-left: solid 1px #936458;
background-color: #ffffff;
}
.container {
display: flex;
justify-content: space-between;
max-width: 1000px;
margin: 0px auto;
}
.sidebar {
order: 2;
max-width: 232px;
padding: 24px 24px 24px 0;
text-align: center;
background-color: #ffffff;
}
.main-contents {
max-width: 700px;
padding: 24px;
background-color: #ffffff;
}
section img {
max-width: 100%;
}
.center {
margin: 0 auto 0 auto;
max-width: 90%;
width: 700px;
}
.center ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.center li {
/* flex: 1 1 auto; */
text-align: left;
margin-right: 8px;
}
.center li:last-of-type {
margin-right: 0;
}
.banner-space {
text-align: center;
}
.site-title {
text-align: center;
background-image: url("title-back.png");
color: #000000;
letter-spacing: 0.3em;
font-size: 24px;
font-weight: lighter;
margin: 0;
padding: 12px 0;
}
.contents-title {
text-align: center;
color: #613437;
font-size: 20px;
margin: 24px 0;
display: flex;
align-items: center;
}
.contents-title::before,
.contents-title::after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #e2d4ba;
}
.contents-title::before {
margin-right: 1rem;
}
.contents-title::after {
margin-right: 1rem;
}
.footer-nav ul {
font-size: 14px;
display: flex;
margin: 0;
}
.footer-nav a {
font-size: 14px;
color: #000000;
text-decoration: none;
}
.footer-nav li {
font-weight: normal;
flex-grow: 1;
list-style: none;
text-align: center;
}
.footer-nav li:hover {
transition: background-color 0.5s;
background-color: #af7a6d;
}
