<!-- ここにコードをそのまま貼る --><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像ギャラリー</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.gallery-container {
position: relative;
width: 95%;
margin: 0px auto;
border: 2px solid #ccc;
background: #fdfaf5;
box-shadow: 0 0 6px rgba(0,0,0,0.1);
overflow: hidden;
position: relative;
padding: 10px; /* 内側の余白 */
background: #fdfaf5; /* 背景色 */
z-index: 1;
}
.scroll-gallery {
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.scroll-gallery-column {
display: flex;
flex-direction: column;
gap: 20px;
flex: 0 0 100%;
scroll-snap-align: start;
padding-top: 0px;
}
.scroll-gallery-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
padding: 0px; /* ここでスペースを追加 */
box-sizing: border-box; /* paddingが幅に影響しないように */
background: transparent; /* 背景色を透明に */
border-radius: 10px; /* 画像の角丸と合わせるなら */
}
.scroll-gallery-item img {
max-width: 100%;
height: auto;
border-radius: 10px;
border: 2px solid #ccc;
display: block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.scroll-gallery-item img:hover {
transform: scale(1.03);
}
.caption {
margin-top: 8px;
font-size: 14px;
color: #555;
font-style: italic;
text-align: center;
}
.caption a {
color: #0066cc;
text-decoration: underline;
}
.scroll-btn {
position: absolute;
top: 1.3%; /* 1%下げて5pxくらい上げる */
transform: translateY(-50%);
/* もしかして透過の影響もあるかもなので背景を少し調整 */
background-color: rgba(255, 255, 255, 0.7);
border: 2px solid #003366; /* ボタンの枠の色と太さ */
border-radius: 50%;
width: 80px;
height: 40px;
font-size: 24px;
/* 文字色 */
color: #c6f5df !important; /* 優先度アップ */
cursor: pointer;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(3px);
font-weight: 700;
/* 文字のアウトライン（枠）を付ける */
-webkit-text-stroke: 1px #003366; /* Safari/Chrome用 */
/* 枠線の設定 */
-webkit-text-stroke: 1px #003366;
text-shadow:
-1px -1px 0 #003366,
1px -1px 0 #003366,
-1px 1px 0 #003366,
1px 1px 0 #003366;
}
.left-btn {
left: 5px;
}
.right-btn {
right: 5px;
}
.scroll-btn:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.gallery-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 5px solid transparent;
border-image: url('https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-16-114556.jpg') 30 stretch;
pointer-events: none; /* 枠がクリックなど邪魔しない */
z-index: 0;
}
.separator {
height: 6px;
width: 100%;
margin-bottom: 1.5em;
background: linear-gradient(to right,
transparent,
#CDAA7D, /* 明るい木の茶色：明るいベージュブラウン */
#EED3B7, /* 優しい明るい木の色：木肌風 */
#CDAA7D,
transparent
);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.photo-container {
margin-bottom: 3em;
}
.caption {
text-align: center;
margin-top: 0.5em;
font-size: 0.9em;
}
.overlay-caption {
position: absolute;
top: 0%; /* ← 上から10%の位置に変更して、かなり上に配置 */
left: 50%;
transform: translateX(-50%); /* ← 横方向だけ中央寄せに変更（上下方向はそのまま） */
width: 95%;
display: inline-block;
white-space: normal;
word-wrap: break-word;
color: white;
background-color: rgba(0, 0, 0, 0.4); /* ★黒背景をさらに薄く（0.3） */
padding: 0.2em 0.6em;
border-radius: 5px;
font-weight: bold;
font-size: 19px; /* ★文字を少し小さく */
text-align: center;
pointer-events: none;
/* 文字の縁取り（視認性アップ） */
text-shadow:
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black,
2px 2px 0 black;
}
.image-container {
position: relative; /* ← これが必要！ */
display: inline-block; /* 画像のサイズに合わせてキャプションも調整 */
}
.bottom-caption {
position: static;
margin-top: 10px;
font-size: 15px;
color: #444;
font-style: italic;
text-align: center;
}
<div class="caption">
<a href="https://example.com" target="_blank" style="color: #fff; text-decoration: underline;">
Click here for details
</a>
</div>
</style>
</head>
<body>
<div class="gallery-container">
<!-- 横スクロールボタン -->
<button class="scroll-btn left-btn" onclick="scrollGallery(this, -1)">Prev</button>
<button class="scroll-btn right-btn" onclick="scrollGallery(this, 1)">Next</button>
<div class="scroll-gallery">
<!-- 0列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
2007年1月14日<br>
伊奈の田んぼ<br>寒い夜 でも綺麗な夜空
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div> <!-- ←★ 仕切り線を画像の上に表示 -->
<a href="">
<img src="" alt="画像2">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 1列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 1<br>2005年10月15日<br>
京都府 京都市→東京
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Expand for full view<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 2列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 2<br>2005年10月15日<br>
広島県 呉編 大和ミュージアム
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 3列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 3<br>2005年10月16日<br>
広島県 尾道編
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Expand for full view<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 4列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 4<br>2005年10月16日<br>
広島県 尾道編 映画のロケセット
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Expand for full view<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 5列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 5<br>2005年10月17日<br>
岡山県 岡山市 後楽園
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Expand for full view<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
<!-- 6px列目 -->
<div class="scroll-gallery-column">
<!-- 画像1 --><!-- 列の先頭画像はこれをコピーして使う -->
<div class="scroll-gallery-item image-container"> <!-- ← image-container クラス追加 -->
<a href="">
<img src="" alt="画像1">
</a>
<div class="caption overlay-caption">
Line 6<br>2005年10月17-18日<br>
京都府 京都市→東京
</div>
<!-- 下に表示するキャプション -->
<div class="caption bottom-caption">
<div class="caption">
👆Expand for full view<!-- 文字をここにいれる -->
</div>
</div></div><!-- ここまでコピー範囲 -->
<!-- 画像2 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像2">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像2.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像2.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像3 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像3">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像3.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像3.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像4 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像4">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像4.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像4.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像5 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像5">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像5.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像5.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像6 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像6">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像6.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像6.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像7 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像7">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像7.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像7.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像8 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像8">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像8.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像8.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- 画像9 -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="">
<img src="" alt="画像9">
</a>
👆Expand for full view<!-- 文字をここにいれる -->
</div>
<!-- 画像9.5 -->
<div class="scroll-gallery-item">
<a href="#">
<img src="#" alt="画像9.5">
</a>
👆Tap to switch from Japanese to English.<!-- 文字をここにいれる -->
</div>
<!-- back to top -->
<div class="scroll-gallery-item">
<div class="separator"></div>
<a href="https://ourtreasurechest.net/2025/05/14/post-35290/#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像6">
</a>
</div>
</div>
</div>
<script>
function scrollGallery(button, direction) {
const container = button.closest('.gallery-container');
const gallery = container.querySelector('.scroll-gallery');
const columns = Array.from(gallery.children);
const scrollLeft = gallery.scrollLeft;
const columnWidth = gallery.clientWidth + 20; // gap を考慮
gallery.scrollBy({
left: direction * columnWidth,
behavior: 'smooth'
});
}
</script>
</body>
</html>
<div>こんにちは！</div>こんにちは！