code
このページはテンプレートのソースをそのまま貼り付けてあるコピペ用のページです。各コードブロック右上の「コピー」ボタンで全文をコピーできます。公開するときは、この code ページごと削除して構いません。
■ 共通パーツ（全ページで同じ。最初に用意するもの）
ページの head（共通・文字コードやフォント読み込み）
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@3.0.2/destyle.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap"
rel="stylesheet"
>装飾用スタイル（共通・head に貼る）
<style>
/* ============================================================
009 Margin — sans-serif ニュートラルミニマル / 左サイドバー2カラム
配色とフォントはこの :root で差し替え可能
============================================================ */
:root {
--color-paper: #faf9f6;
--color-text: #2b2a28;
--color-muted: #6f6c66;
--color-accent: #3a5a8c;
--color-line: #ddd9d1;
--sidebar-width: 15rem;
--reading-width: 36rem;
--font-body: "Noto Sans JP", "Inter", system-ui, sans-serif;
--font-en: "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--color-paper: #1a1a18;
--color-text: #e8e5dd;
--color-muted: #9a968d;
--color-accent: #8fb0e0;
--color-line: #34322d;
}
}
body {
font-family: var(--font-body);
background: var(--color-paper);
color: var(--color-text);
line-height: 1.85;
font-weight: 400;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* --- 2カラムシェル（PC） --- */
@media (min-width: 768px) {
body {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
align-items: start;
}
}
/* --- サイドバー --- */
.site-sidebar {
border-bottom: 1px solid var(--color-line);
}
.site-sidebar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
}
.site-name {
font-family: var(--font-en);
font-weight: 600;
font-size: 1.1rem;
color: var(--color-text);
}
@media (min-width: 768px) {
.site-sidebar {
position: sticky;
top: 0;
height: 100vh;
border-bottom: 0;
border-right: 1px solid var(--color-line);
}
.site-sidebar-inner {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 2rem;
height: 100%;
padding: 2.5rem 1.5rem;
}
}
/* --- drawer: SP は popover で左からスライド、PC は display:contents でフラット化 --- */
.drawer {
position: fixed;
inset: 0 30% 0 0;
height: 100dvh;
margin: 0;
padding: 2rem 1.5rem;
background: var(--color-paper);
border: 0;
border-right: 1px solid var(--color-line);
transform: translateX(-100%);
transition: transform 200ms ease;
overflow-y: auto;
}
.drawer:popover-open {
transform: translateX(0);
}
.drawer::backdrop {
background: color-mix(in oklab, var(--color-text) 35%, transparent);
}
.site-nav ul {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.site-nav a {
font-family: var(--font-en);
font-size: 0.95rem;
color: var(--color-text);
}
.site-nav a:hover {
color: var(--color-accent);
text-decoration: none;
}
.sidebar-profile {
font-size: 0.85rem;
color: var(--color-muted);
margin-top: 1.5rem;
}
.inline-list {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
.sidebar-links.inline-list {
margin-top: 0.75rem;
font-size: 0.85rem;
}
.drawer-close {
position: absolute;
top: 0.75rem;
right: 1rem;
font-size: 1.25rem;
background: transparent;
border: 0;
color: var(--color-text);
cursor: pointer;
}
.nav-toggle {
background: transparent;
border: 0;
color: var(--color-text);
cursor: pointer;
padding: 0.25rem;
}
@media (min-width: 768px) {
.drawer {
display: contents;
}
.drawer-close,
.nav-toggle {
display: none;
}
}
/* --- メイン --- */
.site-main {
max-width: calc(var(--reading-width) + 4rem);
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
}
@media (min-width: 768px) {
.site-main {
margin: 0;
padding: 4rem 3rem 6rem;
}
}
/* --- 見出し h1-h6 視覚差別化 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.4;
}
.hero-title {
font-family: var(--font-en), "Noto Sans JP", sans-serif;
font-size: 2.4rem;
letter-spacing: 0.02em;
margin: 0;
}
.page-title {
font-size: 1.8rem;
margin-bottom: 2rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--color-text);
}
.section-title {
font-size: 1.25rem;
margin: 0 0 1rem;
color: var(--color-accent);
}
h1 {
font-size: 2rem;
margin: 2.5rem 0 1rem;
}
h2 {
font-size: 1.5rem;
margin: 2.2rem 0 0.9rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--color-line);
}
h3 {
font-size: 1.25rem;
margin: 1.8rem 0 0.7rem;
}
h4 {
font-size: 1.1rem;
margin: 1.5rem 0 0.6rem;
color: var(--color-muted);
}
h5 {
font-size: 1rem;
margin: 1.3rem 0 0.5rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: var(--font-en);
}
h6 {
font-size: 0.9rem;
margin: 1.2rem 0 0.4rem;
color: var(--color-muted);
font-style: italic;
}
/* --- 段落・強調（em/strong/mark をそれぞれ別装飾） --- */
p {
margin: 0 0 1.2rem;
}
em {
font-style: italic;
color: var(--color-accent);
}
strong {
font-weight: 700;
border-bottom: 2px solid var(--color-accent);
}
mark {
background: color-mix(in oklab, var(--color-accent) 20%, transparent);
color: inherit;
padding: 0 0.15em;
}
/* --- リスト・引用・表・コード（ベース装飾は素タグに） --- */
ul,
ol {
padding-left: 1.4rem;
margin: 0 0 1.2rem;
}
li {
margin: 0.3rem 0;
}
dl {
margin: 0 0 1.2rem;
}
dt {
font-weight: 700;
}
dd {
margin: 0 0 0.6rem 1rem;
color: var(--color-muted);
}
blockquote {
margin: 0 0 1.2rem;
padding: 0.5rem 1.2rem;
border-left: 3px solid var(--color-line);
color: var(--color-muted);
}
table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.2rem;
}
th,
td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-line);
text-align: left;
}
th {
background: color-mix(in oklab, var(--color-text) 5%, transparent);
font-weight: 500;
}
hr {
border: 0;
border-top: 1px solid var(--color-line);
margin: 2.5rem 0;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: color-mix(in oklab, var(--color-text) 6%, transparent);
padding: 0.1em 0.35em;
border-radius: 2px;
}
pre {
margin: 0 0 1.2rem;
padding: 0.9rem 1.1rem;
background: color-mix(in oklab, var(--color-text) 5%, transparent);
border: 1px solid var(--color-line);
border-radius: 2px;
overflow: auto;
}
pre code {
background: transparent;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
/* ===== フォーム要素 ===== */
label {
display: block;
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 0.3em;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
-webkit-appearance: none;
border: 1px solid var(--color-line);
background: var(--color-paper);
color: var(--color-text);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.5rem;
border-radius: 0;
}
textarea {
width: 100%;
min-height: 4rem;
margin: 0.5rem 0;
resize: vertical;
}
select {
padding-right: 1.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6c66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
background: var(--color-paper);
color: var(--color-text);
border: 1px solid var(--color-line);
padding: 0.5rem 1.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
touch-action: manipulation;
letter-spacing: 0.05em;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
border-color: var(--color-accent);
}
.form-actions {
display: block;
text-align: center;
}
/* --- トップのセクション・novels カード --- */
.top-section {
margin-top: 3rem;
}
.top-section-more {
margin-top: 1rem;
font-family: var(--font-en);
font-size: 0.9rem;
}
.novels-list {
list-style: none;
padding-left: 0;
}
.novel-card {
border-top: 1px solid var(--color-line);
}
.novel-card a {
display: block;
color: inherit;
padding: 1.25rem 0;
}
.novel-card a:hover {
text-decoration: none;
color: var(--color-accent);
}
.novel-card-title {
font-size: 1.15rem;
margin: 0 0 0.4rem;
border-bottom: 0;
padding-bottom: 0;
}
.novel-card-meta {
display: flex;
gap: 1rem;
font-family: var(--font-en);
font-size: 0.8rem;
color: var(--color-muted);
}
.novel-card-tags {
display: flex;
gap: 0.5rem;
margin: 0.5rem 0;
}
.novel-tag {
font-size: 0.75rem;
padding: 0.1rem 0.5rem;
border: 1px solid var(--color-line);
border-radius: 2px;
color: var(--color-muted);
}
.novel-card-excerpt {
margin: 0.5rem 0 0;
color: var(--color-muted);
font-size: 0.95rem;
}
.top-news-list {
list-style: none;
padding-left: 0;
}
.top-news-item {
display: flex;
gap: 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-line);
font-size: 0.95rem;
}
.top-news-item time {
font-family: var(--font-en);
color: var(--color-muted);
white-space: nowrap;
}
/* --- novels 本文（横書き長文） --- */
.novel-detail {
max-width: var(--reading-width);
}
.novel-body p {
text-indent: 1em;
}
/* --- gotop --- */
.gotop {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
font-family: var(--font-en);
font-size: 0.8rem;
padding: 0.4rem 0.7rem;
border: 1px solid var(--color-line);
background: var(--color-paper);
color: var(--color-text);
border-radius: 2px;
}
/* --- novels 一覧（partial: novels-list.html） --- */
.novel-card-cat {
color: var(--color-accent);
}
.empty {
color: var(--color-muted);
padding: 2rem 0;
}
/* --- novels 詳細（partial: novel-detail.html） --- */
.novel-back {
display: inline-block;
font-family: var(--font-en);
font-size: 0.85rem;
margin-bottom: 1.5rem;
}
.novel-header {
margin-bottom: 1.5rem;
}
.novel-title {
font-size: 1.8rem;
margin: 0 0 0.6rem;
border-bottom: 0;
padding-bottom: 0;
}
.novel-meta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
font-family: var(--font-en);
font-size: 0.8rem;
color: var(--color-muted);
}
.caution {
margin: 1.5rem 0;
padding: 0.9rem 1.1rem;
border: 1px solid var(--color-line);
border-radius: 2px;
background: color-mix(in oklab, var(--color-text) 4%, transparent);
font-size: 0.9rem;
}
.caution-title {
font-weight: 700;
margin: 0 0 0.4rem;
color: var(--color-muted);
}
.caution p:last-child {
margin: 0;
}
.novel-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-line);
}
.novel-footer-back {
font-family: var(--font-en);
font-size: 0.9rem;
}
/* --- news 一覧（partial: news-list.html） --- */
.news-list {
list-style: none;
padding-left: 0;
}
.news-item {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
padding: 0.9rem 0;
border-bottom: 1px solid var(--color-line);
}
.news-date {
font-family: var(--font-en);
font-size: 0.8rem;
color: var(--color-muted);
white-space: nowrap;
}
.news-body {
margin: 0;
font-size: 0.95rem;
}
/* --- timeline（つぶやき）（partial: timeline-list.html） --- */
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.timeline-item {
padding: 1.5rem 0;
border-bottom: 1px solid var(--color-line);
}
.timeline-item:first-child {
padding-top: 0.5rem;
}
.timeline-item:last-child {
border-bottom: 0;
}
.timeline-item.is-pinned {
border-left: 2px solid var(--color-accent);
padding: 1.5rem 1.1rem;
background: color-mix(in oklab, var(--color-accent) 5%, transparent);
}
.timeline-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
margin-bottom: 0.6rem;
font-family: var(--font-en);
font-size: 0.8rem;
color: var(--color-muted);
}
.timeline-pin {
font-size: 0.7rem;
letter-spacing: 0.04em;
padding: 0.1rem 0.5rem;
border-radius: 999px;
color: var(--color-accent);
background: color-mix(in oklab, var(--color-accent) 12%, transparent);
}
.timeline-time {
color: var(--color-muted);
white-space: nowrap;
}
.timeline-body {
line-height: 1.85;
}
.timeline-body p {
margin: 0 0 0.6rem;
text-wrap: pretty;
}
.timeline-body p:last-child {
margin-bottom: 0;
}
.timeline-media {
margin-top: 0.9rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.5rem;
}
.timeline-media:has(a:only-child) {
grid-template-columns: minmax(0, 320px);
}
.timeline-media a {
display: block;
}
.timeline-media img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--color-line);
border-radius: 2px;
}
</style>動き・メニュー開閉（共通・head か body の末尾に貼る）
<script>
function init() {
const drawer = document.getElementById("drawer");
const openBtn = document.querySelector(".nav-toggle");
const closeBtn = drawer?.querySelector(".drawer-close");
const sheet = drawer?.querySelector(".site-nav");
const main = document.querySelector("main");
if (drawer && openBtn && sheet && main) {
function openDrawer() {
drawer.showPopover();
document.documentElement.style.overflow = "hidden";
document.body.style.overflow = "hidden";
main.inert = true;
openBtn.setAttribute("aria-expanded", "true");
requestAnimationFrame(() => sheet.focus());
}
function closeDrawer() {
drawer.hidePopover();
document.documentElement.style.overflow = "";
document.body.style.overflow = "";
main.inert = false;
openBtn.setAttribute("aria-expanded", "false");
}
openBtn.addEventListener("click", () => {
if (drawer.matches(":popover-open")) {
closeDrawer();
} else {
openDrawer();
}
});
closeBtn?.addEventListener("click", closeDrawer);
// backdrop tap または drawer 内の sheet 外領域 click で close
drawer.addEventListener("click", (event) => {
if (!sheet.contains(event.target)) closeDrawer();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && drawer.matches(":popover-open")) {
closeDrawer();
}
});
}
// sticky header 不透明化の fallback (animation-timeline 未対応時)
if (!CSS.supports("animation-timeline: scroll()")) {
const header = document.querySelector(".site-header");
if (header) {
const onScroll = () => {
header.classList.toggle("scrolled", window.scrollY > 80);
};
document.addEventListener("scroll", onScroll, { passive: true });
onScroll();
}
}
}
// head / body どちらに置いても動くよう DOM 構築完了を待つ
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
</script>レイアウトの外枠（共通・ヘッダーと本文の枠）
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<!-- ここにページの内容を入れる -->
</main>■ 各ページの本文だけ（上の「レイアウトの外枠」の <main> の中に入れる）
TOPページ：本文だけ
<section class="hero">
<h1 class="hero-title">site name</h1>
</section>
<section class="top-section">
<h2 class="section-title">about</h2>
<p>ようこそ。ここは個人の小説サイトです。書きたいものを綴っています。</p>
<p class="top-section-more"><a href="/about.html">about を読む →</a></p>
</section>
<section class="top-section">
<h2 class="section-title">latest</h2>
<ul class="novels-list">
<li class="novel-card">
<a href="/novels/001.html">
<h3 class="novel-card-title">銀河鉄道の夜</h3>
<div class="novel-card-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
</div>
<div class="novel-card-tags">
<span class="novel-tag">短編</span>
<span class="novel-tag">現代</span>
</div>
<p class="novel-card-excerpt">
ぼんやりと白い銀河の正体を問われた日の放課後、ジョバンニは不思議な汽車に乗る。
</p>
</a>
</li>
</ul>
<p class="top-section-more"><a href="/novels/index.html">作品一覧 →</a></p>
</section>
<section class="top-section">
<h2 class="section-title">news</h2>
<ul class="top-news-list">
<li class="top-news-item">
<time datetime="2026-05-23">2026.05.23</time><span>about ページを追加しました。</span>
</li>
<li class="top-news-item">
<time datetime="2026-05-10">2026.05.10</time><span>サイトをリニューアルしました。</span>
</li>
</ul>
<p class="top-section-more"><a href="/news/index.html">お知らせ一覧 →</a></p>
</section>自己紹介ページ：本文だけ
<h1 class="page-title">about</h1>
<p>はじめまして。個人で小説を書いています。ここは作品とお知らせを置く場所です。</p>
<h2>好きなもの</h2>
<ul>
<li>長編より短編</li>
<li>現代もの / 一人称</li>
</ul>
<h2>連絡先</h2>
<dl>
<dt>mail</dt>
<dd>example [at] example.com</dd>
<dt>X</dt>
<dd><a href="#">@example</a></dd>
</dl>小説一覧ページ：本文だけ
<h1 class="page-title">novels</h1>
<ul class="novels-list">
<li class="novel-card">
<a href="/novels/001.html">
<h2 class="novel-card-title">銀河鉄道の夜</h2>
<div class="novel-card-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
<span class="novel-card-cat">小説</span>
</div>
<div class="novel-card-tags">
<span class="novel-tag">短編</span>
<span class="novel-tag">現代</span>
</div>
<p class="novel-card-excerpt">
ぼんやりと白い銀河の正体を問われた日の放課後、ジョバンニは不思議な汽車に乗る。
</p>
</a>
</li>
</ul>
<!-- 作品が無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">作品はまだありません。</p> -->小説個別ページ：本文だけ
<a href="/novels/index.html" class="novel-back">← 作品一覧へ</a>
<article>
<header class="novel-header">
<h1 class="novel-title">銀河鉄道の夜</h1>
<div class="novel-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
<span>短編 / 現代</span>
</div>
</header>
<aside class="caution" role="note">
<p class="caution-title">注意書き</p>
<p>
フィクションです。実在の人物・団体とは関係ありません。 R-18 / 暴力描写 /
ネタバレ等を含む場合はここに明記してください。
</p>
</aside>
<div class="novel-body">
<p>
「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと言われたりしていた、このぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指しながら、みんなに問いをかけました。
</p>
<p>
カムパネルラが手をあげました。それから四、五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。
</p>
<p>
ところが先生は早くもそれを見つけたのでした。「ジョバンニさん。あなたはわかっているのでしょう。」ジョバンニは勢いよく立ちあがりましたが、立ってみるともうはっきりとそれを答えることができないのでした。
</p>
<p>
ザネリが前の席からふりかえって、ジョバンニを見てくすっとわらいました。ジョバンニはもうどぎまぎしてまっ赤になってしまいました。先生がまた言いました。「大きな望遠鏡で銀河の星をよくしらべると銀河はだいたい何でしょう。」やはり星だとジョバンニは思いましたが、こんどもすぐに答えることができませんでした。
</p>
<p>
先生はしばらく困ったようすでしたが、眼をカムパネルラのほうへ向けて、「ではカムパネルラさん。」と名指しました。するとあんなに元気に手をあげたカムパネルラが、やはりもじもじ立ちあがったまま、やはり答えができませんでした。
</p>
</div>
<footer class="novel-footer">
<a href="/novels/index.html" class="novel-footer-back">作品一覧へ戻る</a>
</footer>
</article>お知らせ一覧ページ：本文だけ
<h1 class="page-title">news</h1>
<ul class="news-list">
<li class="news-item">
<time class="news-date" datetime="2026-05-23">2026.05.23</time>
<p class="news-body">about ページを追加しました。</p>
</li>
<li class="news-item">
<time class="news-date" datetime="2026-05-10">2026.05.10</time>
<p class="news-body">サイトをリニューアルしました。</p>
</li>
<li class="news-item">
<time class="news-date" datetime="2026-05-01">2026.05.01</time>
<p class="news-body">サイトを開設しました。</p>
</li>
</ul>
<!-- お知らせが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">お知らせはまだありません。</p> -->つぶやきタイムラインページ：本文だけ
<h1 class="page-title">timeline</h1>
<ul class="timeline">
<li class="timeline-item is-pinned">
<div class="timeline-meta">
<span class="timeline-pin">pinned</span>
<time class="timeline-time" datetime="2026-06-14T10:30">2026.06.14 10:30</time>
</div>
<div class="timeline-body">
<p>
ピン留めしたつぶやき。固定したいお知らせや、いちばん上に置いておきたい一言をここに。
</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-13T22:05">2026.06.13 22:05</time>
</div>
<div class="timeline-body">
<p>画像を複数そえたつぶやき。日々の記録や作業の途中経過などを、写真と一緒に短く。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-12T09:12">2026.06.12 09:12</time>
</div>
<div class="timeline-body">
<p>テキストだけの短いつぶやき。ひとことメモやリンクの共有に。</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-10T18:40">2026.06.10 18:40</time>
</div>
<div class="timeline-body">
<p>画像を1枚そえたつぶやき。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
</ul>
<!-- つぶやきが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだつぶやきはありません。</p> -->■ 各ページまるごと（HTML ファイルを 1 から作る人向け・body の中身全部）
TOPページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<section class="hero">
<h1 class="hero-title">site name</h1>
</section>
<section class="top-section">
<h2 class="section-title">about</h2>
<p>ようこそ。ここは個人の小説サイトです。書きたいものを綴っています。</p>
<p class="top-section-more"><a href="/about.html">about を読む →</a></p>
</section>
<section class="top-section">
<h2 class="section-title">latest</h2>
<ul class="novels-list">
<li class="novel-card">
<a href="/novels/001.html">
<h3 class="novel-card-title">銀河鉄道の夜</h3>
<div class="novel-card-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
</div>
<div class="novel-card-tags">
<span class="novel-tag">短編</span>
<span class="novel-tag">現代</span>
</div>
<p class="novel-card-excerpt">
ぼんやりと白い銀河の正体を問われた日の放課後、ジョバンニは不思議な汽車に乗る。
</p>
</a>
</li>
</ul>
<p class="top-section-more"><a href="/novels/index.html">作品一覧 →</a></p>
</section>
<section class="top-section">
<h2 class="section-title">news</h2>
<ul class="top-news-list">
<li class="top-news-item">
<time datetime="2026-05-23">2026.05.23</time><span>about ページを追加しました。</span>
</li>
<li class="top-news-item">
<time datetime="2026-05-10">2026.05.10</time><span>サイトをリニューアルしました。</span>
</li>
</ul>
<p class="top-section-more"><a href="/news/index.html">お知らせ一覧 →</a></p>
</section>
</main>自己紹介ページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<h1 class="page-title">about</h1>
<p>はじめまして。個人で小説を書いています。ここは作品とお知らせを置く場所です。</p>
<h2>好きなもの</h2>
<ul>
<li>長編より短編</li>
<li>現代もの / 一人称</li>
</ul>
<h2>連絡先</h2>
<dl>
<dt>mail</dt>
<dd>example [at] example.com</dd>
<dt>X</dt>
<dd><a href="#">@example</a></dd>
</dl>
</main>小説一覧ページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<h1 class="page-title">novels</h1>
<ul class="novels-list">
<li class="novel-card">
<a href="/novels/001.html">
<h2 class="novel-card-title">銀河鉄道の夜</h2>
<div class="novel-card-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
<span class="novel-card-cat">小説</span>
</div>
<div class="novel-card-tags">
<span class="novel-tag">短編</span>
<span class="novel-tag">現代</span>
</div>
<p class="novel-card-excerpt">
ぼんやりと白い銀河の正体を問われた日の放課後、ジョバンニは不思議な汽車に乗る。
</p>
</a>
</li>
</ul>
<!-- 作品が無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">作品はまだありません。</p> -->
</main>小説個別ページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<a href="/novels/index.html" class="novel-back">← 作品一覧へ</a>
<article>
<header class="novel-header">
<h1 class="novel-title">銀河鉄道の夜</h1>
<div class="novel-meta">
<time datetime="2026-05-23">2026.05.23</time>
<span>5,200 字</span>
<span>短編 / 現代</span>
</div>
</header>
<aside class="caution" role="note">
<p class="caution-title">注意書き</p>
<p>
フィクションです。実在の人物・団体とは関係ありません。 R-18 / 暴力描写 /
ネタバレ等を含む場合はここに明記してください。
</p>
</aside>
<div class="novel-body">
<p>
「ではみなさんは、そういうふうに川だと言われたり、乳の流れたあとだと言われたりしていた、このぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊した大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指しながら、みんなに問いをかけました。
</p>
<p>
カムパネルラが手をあげました。それから四、五人手をあげました。ジョバンニも手をあげようとして、急いでそのままやめました。たしかにあれがみんな星だと、いつか雑誌で読んだのでしたが、このごろはジョバンニはまるで毎日教室でもねむく、本を読むひまも読む本もないので、なんだかどんなこともよくわからないという気持ちがするのでした。
</p>
<p>
ところが先生は早くもそれを見つけたのでした。「ジョバンニさん。あなたはわかっているのでしょう。」ジョバンニは勢いよく立ちあがりましたが、立ってみるともうはっきりとそれを答えることができないのでした。
</p>
<p>
ザネリが前の席からふりかえって、ジョバンニを見てくすっとわらいました。ジョバンニはもうどぎまぎしてまっ赤になってしまいました。先生がまた言いました。「大きな望遠鏡で銀河の星をよくしらべると銀河はだいたい何でしょう。」やはり星だとジョバンニは思いましたが、こんどもすぐに答えることができませんでした。
</p>
<p>
先生はしばらく困ったようすでしたが、眼をカムパネルラのほうへ向けて、「ではカムパネルラさん。」と名指しました。するとあんなに元気に手をあげたカムパネルラが、やはりもじもじ立ちあがったまま、やはり答えができませんでした。
</p>
</div>
<footer class="novel-footer">
<a href="/novels/index.html" class="novel-footer-back">作品一覧へ戻る</a>
</footer>
</article>
</main>お知らせ一覧ページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<h1 class="page-title">news</h1>
<ul class="news-list">
<li class="news-item">
<time class="news-date" datetime="2026-05-23">2026.05.23</time>
<p class="news-body">about ページを追加しました。</p>
</li>
<li class="news-item">
<time class="news-date" datetime="2026-05-10">2026.05.10</time>
<p class="news-body">サイトをリニューアルしました。</p>
</li>
<li class="news-item">
<time class="news-date" datetime="2026-05-01">2026.05.01</time>
<p class="news-body">サイトを開設しました。</p>
</li>
</ul>
<!-- お知らせが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">お知らせはまだありません。</p> -->
</main>つぶやきタイムラインページ：body まるごと
<aside class="site-sidebar">
<div class="site-sidebar-inner">
<a href="/index.html" class="site-name">site name</a>
<div class="drawer" id="drawer" popover="manual">
<button class="drawer-close" type="button" aria-label="メニューを閉じる">✕</button>
<nav class="site-nav" tabindex="-1" aria-label="サイト内ナビゲーション">
<ul>
<li><a href="/index.html">top</a></li>
<li><a href="/about.html">about</a></li>
<li><a href="/novels/index.html">novels</a></li>
<li><a href="/news/index.html">news</a></li>
<li><a href="/timeline.html">timeline</a></li>
<li><a href="/tags.html">tags</a></li>
<li><a href="/code.html">code</a></li>
</ul>
</nav>
<p class="sidebar-profile">短い自己紹介。字書きです。</p>
<ul class="sidebar-links inline-list">
<li><a href="#">X</a></li>
<li><a href="#">pixiv</a></li>
<li><a href="#">mail / 拍手</a></li>
</ul>
</div>
<button
class="nav-toggle"
type="button"
aria-label="メニューを開く"
aria-expanded="false"
aria-controls="drawer"
>
<svg
aria-hidden="true"
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
>
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
</div>
</aside>
<main class="site-main">
<h1 class="page-title">timeline</h1>
<ul class="timeline">
<li class="timeline-item is-pinned">
<div class="timeline-meta">
<span class="timeline-pin">pinned</span>
<time class="timeline-time" datetime="2026-06-14T10:30">2026.06.14 10:30</time>
</div>
<div class="timeline-body">
<p>
ピン留めしたつぶやき。固定したいお知らせや、いちばん上に置いておきたい一言をここに。
</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-13T22:05">2026.06.13 22:05</time>
</div>
<div class="timeline-body">
<p>画像を複数そえたつぶやき。日々の記録や作業の途中経過などを、写真と一緒に短く。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-12T09:12">2026.06.12 09:12</time>
</div>
<div class="timeline-body">
<p>テキストだけの短いつぶやき。ひとことメモやリンクの共有に。</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-meta">
<time class="timeline-time" datetime="2026-06-10T18:40">2026.06.10 18:40</time>
</div>
<div class="timeline-body">
<p>画像を1枚そえたつぶやき。</p>
</div>
<div class="timeline-media">
<a
href="https://placehold.jp/1200x800.png"
data-pswp-width="1200"
data-pswp-height="800"
target="_blank"
rel="noopener"
><img
src="https://placehold.jp/300x200.png"
alt="添付画像"
width="300"
height="200"
></a
>
</div>
</li>
</ul>
<!-- つぶやきが無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだつぶやきはありません。</p> -->
</main>
<!-- つぶやき添付画像の拡大表示（PhotoSwipe v5）。各 .timeline-media を 1 ギャラリーとして扱う -->
<script type="module">
import PhotoSwipeLightbox from "https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe-lightbox.esm.min.js";
for (const media of document.querySelectorAll(".timeline-media")) {
const lightbox = new PhotoSwipeLightbox({
gallery: media,
children: "a",
pswpModule: () =>
import("https://cdn.jsdelivr.net/npm/photoswipe@5/dist/photoswipe.esm.min.js"),
});
lightbox.init();
}
</script>