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=Zen+Old+Mincho:wght@400;500;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap"
rel="stylesheet"
>装飾用スタイル（共通・head に貼る）
<style>
/*
Designed by instan <https://instan.fc2.page>
002 — classic（モノクロ明朝 + 中央寄せ + ブログ feed）
*/
/* ===== カラー・フォントの設定（ここを変えると全体の見た目が変わります） ===== */
:root {
color-scheme: light dark;
/* ライトモードの色（白背景 + 墨色文字） */
--color-bg: #ffffff;
--color-text: #15110d;
--color-muted: #6b6258;
--color-faint: #a7a098;
--color-line: #e3ddd3;
--color-line-strong: #3a322a;
/* フォント */
--font-serif-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-serif-en: "EB Garamond", "Times New Roman", serif;
--font-body: var(--font-serif-ja);
/* レイアウト */
--content-width: 640px;
--reading-width: 36rem;
--header-height: 56px;
accent-color: var(--color-text);
}
/* ダークモード（OS のダーク設定が ON のときだけ上の色を上書き） */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #0d0c0a;
--color-text: #ece6da;
--color-muted: #9a9285;
--color-faint: #615a4f;
--color-line: #26221b;
--color-line-strong: #c0b8a8;
}
}
/* Scroll-driven animation 用の registered custom properties */
@property --header-bg-alpha {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
/* ===== 文字まわりの基本設定 ===== */
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.92;
min-height: 100dvh;
display: flex;
flex-direction: column;
font-feature-settings:
"palt" 1,
"pkna" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--color-text);
color: var(--color-bg);
}
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--color-faint);
transition:
border-color 0.15s,
color 0.15s;
}
a:hover {
border-bottom-color: var(--color-text);
}
:focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
line-height: 1.45;
letter-spacing: 0.02em;
text-wrap: balance;
}
h1 {
font-size: clamp(1.7rem, 4vw, 2.1rem);
margin: 2.75rem 0 1.25rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-line-strong);
letter-spacing: 0.06em;
}
h2 {
font-size: 1.4rem;
margin: 2.5rem 0 1rem;
padding-bottom: 0.45rem;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.04em;
}
h3 {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 1.2rem;
margin: 2rem 0 0.75rem;
color: var(--color-muted);
}
h4 {
font-size: 1.05rem;
margin: 1.75rem 0 0.6rem;
color: var(--color-text);
letter-spacing: 0.05em;
}
h5 {
font-size: 0.95rem;
margin: 1.5rem 0 0.5rem;
color: var(--color-muted);
letter-spacing: 0.12em;
}
h6 {
font-family: var(--font-serif-en);
font-size: 0.75rem;
margin: 1.25rem 0 0.4rem;
color: var(--color-faint);
text-transform: uppercase;
letter-spacing: 0.2em;
}
p + p {
margin-top: 1em;
}
/* ===== 強調 / 引用 / 区切り / コード ===== */
em {
font-family: var(--font-serif-en);
font-style: italic;
color: var(--color-text);
}
strong {
font-weight: 700;
color: var(--color-text);
letter-spacing: 0.02em;
}
mark {
background: transparent;
color: var(--color-text);
box-shadow: inset 0 -0.45em 0 0 var(--color-line);
padding: 0 0.1em;
}
blockquote {
margin: 1.5em 0;
padding: 0.5em 1.25em;
border-left: 3px solid var(--color-line-strong);
color: var(--color-muted);
font-style: italic;
}
ul {
margin: 1em 0;
padding-left: 1.75em;
list-style: disc;
}
ol {
margin: 1em 0;
padding-left: 1.75em;
list-style: decimal;
}
dl {
margin: 1em 0;
}
dt {
font-weight: 500;
margin-top: 0.75em;
color: var(--color-text);
}
dd {
margin-left: 1.5em;
}
table {
width: 100%;
margin: 1.5em 0;
border-collapse: collapse;
font-size: 0.95rem;
}
th,
td {
padding: 0.5em 0.75em;
border-bottom: 1px solid var(--color-line);
text-align: left;
}
th {
font-weight: 500;
color: var(--color-muted);
}
hr {
border: 0;
border-top: 1px solid var(--color-line);
margin: 2em 0;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.9em;
background: color-mix(in oklab, var(--color-text) 8%, transparent);
padding: 0.1em 0.3em;
border-radius: 2px;
}
pre {
margin: 1.5em 0;
padding: 1em;
background: color-mix(in oklab, var(--color-text) 5%, transparent);
border-radius: 2px;
overflow-x: auto;
font-size: 0.9rem;
line-height: 1.6;
}
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-bg);
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='%236b6258' 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-bg);
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-muted);
}
.form-actions {
display: block;
text-align: center;
}
/* ===== 画面上部の固定ヘッダー（サイト名 + メニュー） ===== */
.site-header {
position: sticky;
top: 0;
z-index: 10;
height: var(--header-height);
border-bottom: 1px solid transparent;
background: color-mix(in oklab, var(--color-bg) calc(var(--header-bg-alpha) * 100%), transparent);
}
@supports (animation-timeline: scroll()) {
.site-header {
animation: header-solidify linear both;
animation-timeline: scroll(root);
animation-range: 0 80px;
}
@keyframes header-solidify {
from {
--header-bg-alpha: 0;
border-bottom-color: transparent;
}
to {
--header-bg-alpha: 1;
border-bottom-color: var(--color-line);
}
}
}
.site-header.scrolled {
--header-bg-alpha: 1;
border-bottom-color: var(--color-line);
}
.site-header-inner {
max-width: var(--content-width);
margin: 0 auto;
height: 100%;
padding: 0 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-name {
font-size: 1.05rem;
font-weight: 500;
text-decoration: none;
color: var(--color-text);
letter-spacing: 0.18em;
border: 0;
}
/* ===== ナビゲーション ===== */
.drawer {
--drawer-width: min(20rem, 80dvw);
position: fixed;
inset: 0 0 0 auto;
width: var(--drawer-width);
height: 100dvh;
margin: 0;
padding: 0;
border: 0;
background: var(--color-bg);
border-left: 1px solid var(--color-line);
box-shadow: -8px 0 24px -12px rgba(0, 0, 0, 0.25);
color: var(--color-text);
overflow: hidden;
transform: translateX(105%);
transition:
transform 0.28s cubic-bezier(0.3, 0.7, 0.3, 1),
display 0.28s allow-discrete,
overlay 0.28s allow-discrete;
}
.drawer:popover-open {
transform: translateX(0);
}
@starting-style {
.drawer:popover-open {
transform: translateX(105%);
}
}
.drawer::backdrop {
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition:
opacity 0.28s ease,
display 0.28s allow-discrete,
overlay 0.28s allow-discrete;
}
.drawer:popover-open::backdrop {
opacity: 1;
}
@starting-style {
.drawer:popover-open::backdrop {
opacity: 0;
}
}
.site-nav {
height: 100%;
overflow-y: auto;
scrollbar-width: none;
}
.site-nav::-webkit-scrollbar {
display: none;
}
.site-nav ul {
padding: 4rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
/* base ul の list-style / margin を打ち消す */
list-style: none;
margin: 0;
}
.site-nav a {
display: block;
padding: 0.9rem 0.5rem;
font-family: var(--font-serif-en);
font-size: 0.95rem;
text-decoration: none;
color: var(--color-text);
border: 0;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.site-nav a[aria-current="page"] {
color: var(--color-text);
border-bottom-color: var(--color-text);
}
.drawer-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-line);
border-radius: 0;
background: var(--color-bg);
color: var(--color-text);
font-size: 16px;
cursor: pointer;
touch-action: manipulation;
z-index: 1;
}
.drawer-close:hover {
border-color: var(--color-text);
}
.nav-toggle {
touch-action: manipulation;
display: inline-flex;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border-radius: 0;
}
.nav-toggle:hover {
background: color-mix(in oklab, var(--color-text) 6%, transparent);
}
/* PC: ヘッダー内インラインに切り替え（768px以上）*/
@media (min-width: 768px) {
.drawer {
display: contents;
}
.site-nav {
display: block;
height: auto;
overflow: visible;
}
.site-nav ul {
flex-direction: row;
gap: 1.75rem;
padding: 0;
}
.site-nav a {
display: inline;
padding: 0;
border-bottom: 0;
font-size: 0.8rem;
color: var(--color-muted);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
color: var(--color-text);
}
.drawer-close,
.nav-toggle {
display: none;
}
}
/* ===== 本文エリアの共通レイアウト ===== */
.site-main {
flex: 1;
width: 100%;
max-width: var(--content-width);
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
section + section {
margin-top: 3rem;
}
.page-title {
font-size: 1.6rem;
text-align: center;
/* base h1 の margin shorthand / 罫線を打ち消す */
margin: 0 0 1rem;
padding-bottom: 0;
border-bottom: 0;
letter-spacing: 0.1em;
}
.page-title + p {
text-align: center;
color: var(--color-muted);
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.9rem;
margin-bottom: 3rem;
}
.section-title {
font-family: var(--font-serif-en), var(--font-serif-ja);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-line);
}
/* ===== Top: hero（ブランド + tagline）===== */
.hero {
text-align: center;
padding: 1rem 0 3.5rem;
border-bottom: 1px solid var(--color-line);
margin-bottom: 3.5rem;
}
.hero-title {
font-size: clamp(1.6rem, 5vw, 1.9rem);
font-weight: 500;
letter-spacing: 0.08em;
margin: 0;
line-height: 1;
/* base h1 の罫線を打ち消す */
padding-bottom: 0;
border-bottom: 0;
}
.hero-title a {
border: 0;
}
/* ===== ブログ feed（post 一覧）===== */
.post-feed {
display: flex;
flex-direction: column;
}
.post {
padding: 0.5rem 0 3.5rem;
border-bottom: 1px solid var(--color-line);
margin-bottom: 3.5rem;
}
.post:last-child {
border-bottom: 0;
}
.post-meta {
font-family: var(--font-serif-en);
font-size: 0.75rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-muted);
text-align: center;
margin-bottom: 1.1rem;
display: flex;
justify-content: center;
gap: 0.9rem;
align-items: center;
flex-wrap: wrap;
}
.post-meta .sep {
color: var(--color-faint);
}
.post-meta .cat {
color: var(--color-text);
}
.post-title {
font-size: 1.6rem;
line-height: 1.45;
margin: 0 0 1.75rem;
text-align: center;
text-wrap: pretty;
/* base h2 の罫線を打ち消す */
padding-bottom: 0;
border-bottom: 0;
}
.post-title a {
border: 0;
background-image: linear-gradient(var(--color-text), var(--color-text));
background-size: 0 1px;
background-repeat: no-repeat;
background-position: 50% 100%;
padding-bottom: 2px;
transition: background-size 0.35s ease;
}
.post-title a:hover {
background-size: 100% 1px;
}
.post-excerpt p {
margin: 0 0 1.1em;
text-align: justify;
hanging-punctuation: allow-end;
text-wrap: pretty;
}
.post-excerpt p:last-child {
margin-bottom: 0;
}
.post-more {
display: block;
text-align: center;
margin-top: 2rem;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.875rem;
color: var(--color-muted);
border: 0;
letter-spacing: 0.06em;
}
.post-more::after {
content: " →";
font-style: normal;
}
.post-more:hover {
color: var(--color-text);
}
/* ===== ページ送り ===== */
.pagination {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-top: 1.5rem;
font-family: var(--font-serif-en);
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
}
.pagination a {
border: 0;
color: var(--color-muted);
}
.pagination a:hover {
color: var(--color-text);
}
.pagination .current {
color: var(--color-text);
border-bottom: 1px solid var(--color-text);
padding-bottom: 2px;
}
/* ===== modules（サイドメニュー領域: About / Links / Archive / Banners / Tags）===== */
.modules {
margin-top: 6rem;
padding-top: 3.5rem;
border-top: 1px solid var(--color-line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem 2.5rem;
}
@media (max-width: 560px) {
.modules {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
.module h2 {
font-family: var(--font-serif-en);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-muted);
margin: 0 0 1rem;
border-bottom: 1px solid var(--color-line);
padding-bottom: 0.625rem;
}
.module p,
.module li {
font-size: 0.875rem;
line-height: 1.85;
}
.module ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.module.full {
grid-column: 1 / -1;
}
.about-row {
display: flex;
gap: 1.125rem;
align-items: flex-start;
}
.about-avatar {
flex: 0 0 56px;
height: 56px;
border-radius: 50%;
background: var(--color-text);
position: relative;
overflow: hidden;
}
.about-avatar::after {
content: "";
position: absolute;
left: 50%;
top: 60%;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-bg);
transform: translate(-50%, 0);
}
.about-who {
font-size: 1rem;
letter-spacing: 0.04em;
margin-bottom: 0.25rem;
}
.about-handle {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.8rem;
color: var(--color-muted);
margin-bottom: 0.5rem;
}
.about-row p {
margin: 0;
}
.banners-grid {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.banner {
display: inline-block;
line-height: 0;
}
.banner img {
display: block;
width: 200px;
max-width: 100%;
height: auto;
}
.banner:hover {
opacity: 0.85;
}
.tagcloud {
display: flex;
flex-wrap: wrap;
gap: 0.625rem 0.875rem;
}
.tagcloud a {
border: 0;
font-size: 0.875rem;
color: var(--color-muted);
line-height: 1;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.tagcloud a:hover {
color: var(--color-text);
border-bottom-color: var(--color-faint);
}
.tagcloud a.lg {
font-size: 1.2rem;
color: var(--color-text);
}
.tagcloud a.md {
font-size: 1rem;
color: var(--color-text);
}
/* ===== Archive ページ（記事一覧）===== */
.archive-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.archive-item {
display: grid;
grid-template-columns: 7rem 5rem 1fr;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--color-line);
align-items: baseline;
}
.archive-date {
font-family: var(--font-serif-en);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.archive-cat {
font-family: var(--font-serif-en);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-text);
}
.archive-title {
font-size: 1rem;
}
.archive-title a {
border: 0;
}
.archive-title a:hover {
border-bottom: 1px solid var(--color-text);
}
@media (max-width: 560px) {
.archive-item {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
/* ===== ブログ本文ページ ===== */
.post-back {
display: inline-block;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 2rem;
border: 0;
}
.post-back:hover {
color: var(--color-text);
}
.post-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-line);
}
.post-header .post-meta {
margin-bottom: 1.25rem;
}
.post-header-title {
font-size: clamp(1.5rem, 5vw, 1.9rem);
line-height: 1.45;
margin: 0;
letter-spacing: 0.04em;
text-wrap: pretty;
/* base h1 の罫線を打ち消す */
padding-bottom: 0;
border-bottom: 0;
}
.post-body {
max-width: var(--reading-width);
margin: 2.5rem auto 3rem;
line-height: 2;
}
.post-body p {
margin: 0 0 1.4em;
text-align: justify;
text-wrap: pretty;
}
.post-body p:last-child {
margin-bottom: 0;
}
.post-footer {
text-align: center;
padding-top: 2rem;
border-top: 1px solid var(--color-line);
}
.post-footer-back {
display: inline-block;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.85rem;
color: var(--color-muted);
border: 0;
}
.post-footer-back:hover {
color: var(--color-text);
}
/* ===== about ページ ===== */
.about-section {
margin-bottom: 2rem;
}
.about-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem;
margin-top: 1rem;
}
.about-list dt {
font-family: var(--font-serif-en);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
padding-top: 0.25rem;
/* base dt の margin-top を打ち消す（grid 表示で不要） */
margin-top: 0;
}
/* ===== サイトフッター ===== */
.site-footer {
max-width: var(--content-width);
margin: 4.5rem auto 0;
padding: 2rem 1.5rem 3rem;
border-top: 1px solid var(--color-line);
text-align: center;
font-family: var(--font-serif-en);
font-size: 0.75rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-faint);
}
.site-footer-mark {
font-size: 0.875rem;
letter-spacing: 0.18em;
color: var(--color-muted);
margin-bottom: 0.9rem;
display: block;
}
.site-footer nav {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.site-footer nav a {
color: var(--color-muted);
border: 0;
}
.site-footer nav a:hover {
color: var(--color-text);
}
/* ===== つぶやきタイムライン ===== */
.timeline {
/* base ul の list-style / padding を打ち消す */
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.timeline-item {
padding: 1.75rem 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-line-strong);
padding: 1.75rem 1.25rem;
background: color-mix(in oklab, var(--color-text) 3%, transparent);
}
.timeline-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1rem;
margin-bottom: 0.75rem;
font-family: var(--font-serif-en);
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
}
.timeline-pin {
color: var(--color-text);
letter-spacing: 0.22em;
}
.timeline-pin::before {
content: "[ ";
color: var(--color-faint);
}
.timeline-pin::after {
content: " ]";
color: var(--color-faint);
}
.timeline-time {
color: var(--color-muted);
}
.timeline-body {
line-height: 1.92;
}
.timeline-body p {
margin: 0 0 0.75em;
text-wrap: pretty;
}
.timeline-body p:last-child {
margin-bottom: 0;
}
.timeline-media {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.5rem;
}
/* 画像が 1 枚のときは横いっぱいに引き伸ばさない */
.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);
}
/* ===== 「まだありません」表示用 ===== */
.empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-muted);
font-family: var(--font-serif-en);
font-style: italic;
}
</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>レイアウトの外枠（共通・ヘッダーと本文の枠）
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<main class="site-main">
<!-- ここにページの内容を入れる -->
</main>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>■ 各ページの本文だけ（上の「レイアウトの外枠」の <main> の中に入れる）
TOPページ：本文だけ
<section class="hero">
<h1 class="hero-title"><a href="/index.html">site name</a></h1>
</section>
<section class="post-feed" aria-label="最新の記事">
<article class="post">
<div class="post-meta">
<span class="date">May 22, 2026</span>
<span class="sep">·</span>
<span class="cat">Essay</span>
</div>
<h2 class="post-title">
<a href="/posts/001.html">五月の終わりに、机の上を片付ける話</a>
</h2>
<div class="post-excerpt">
<p>
締切の前夜になると、なぜか机を片付けたくなる。原稿が一行も進んでいないのに、ペン立てを二つに分け、文房具屋で買ってきたまま忘れていた紙やすりで、古い消しゴムの角をきれいに削っている自分がいる。<em
>逃避としての整理整頓</em
>、と私はこれを呼んでいる。
</p>
<p>
困ったことに、この逃避はわりと効く。机を整え終える頃には、書きたい一行が、たいてい一つだけ、ふと浮かんでいる。<strong
>整える</strong
>という行為は、たぶん思考にとって深呼吸のようなものなのだろう。
</p>
<p>
五月の光は、机の天板に長くまっすぐ落ちる。<mark
>その光の上で、ペンの影が動く</mark
>のを、しばらく眺めてから、ようやく書き始めた。
</p>
</div>
<a class="post-more" href="/posts/001.html">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<span class="date">May 18, 2026</span>
<span class="sep">·</span>
<span class="cat">Fiction</span>
</div>
<h2 class="post-title"><a href="#">短編「夜光虫」を上げました</a></h2>
<div class="post-excerpt">
<p>
久しぶりに
<em>夏の話</em>
を書いた。砂浜で光るあれの話。海そのものが好きなわけでもないのに、夏の夜の海の匂いだけは、書くたびに自分でも少し息が止まる。
</p>
<p>
書きながら、これは
<strong>夏ではなく、夏の手前の話</strong>
だな、と気がついた。光るものを見にいくのは、たぶんいつも、まだ何も始まっていない時期の人間の仕事だ。
</p>
<p>本編は <a href="/archive.html">archive</a> から。よければ静かな夜にどうぞ。</p>
</div>
<a class="post-more" href="#">読みに行く</a>
</article>
<article class="post">
<div class="post-meta">
<span class="date">May 12, 2026</span>
<span class="sep">·</span>
<span class="cat">Notes</span>
</div>
<h2 class="post-title"><a href="#">サイトを少しだけ整えました</a></h2>
<div class="post-excerpt">
<p>
長く触っていなかった場所に手を入れる時間が、不思議と贅沢に感じる。コードのインデントを揃え、フッターの語尾を直し、ファビコンを一回り小さくしただけで、たいぶ呼吸がしやすくなった。
</p>
<p>
更新告知を <mark>news</mark> ではなく
<mark>journal</mark>
と呼ぶようにした。理由はとくにない。<em>そう呼びたかった</em>、それだけ。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
</section>
<nav class="pagination" aria-label="ページ送り">
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next →</a>
</nav>
<section class="modules" aria-label="サイドメニュー">
<div class="module full">
<h2>About</h2>
<div class="about-row">
<div class="about-avatar" aria-hidden="true"></div>
<div>
<div class="about-who">余白 / yohaku</div>
<div class="about-handle">@yohaku_journal</div>
<p>
気が向いた夜にだけ書く人。長めのエッセイと、ときどき短編。最近は
<em>夏の手前</em>
の話ばかり書いています。
</p>
</div>
</div>
</div>
<div class="module">
<h2>Links</h2>
<ul>
<li><a href="#">pixiv</a></li>
<li><a href="#">privatter</a></li>
<li><a href="#">小説家になろう</a></li>
<li><a href="#">Misskey</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="module">
<h2>Archive</h2>
<ul>
<li><a href="#">2026 / 05 — 3 件</a></li>
<li><a href="#">2026 / 04 — 5 件</a></li>
<li><a href="#">2026 / 03 — 2 件</a></li>
<li><a href="#">2026 / 02 — 4 件</a></li>
<li><a href="/archive.html">すべて見る</a></li>
</ul>
</div>
<div class="module">
<h2>Banners</h2>
<div class="banners-grid">
<a href="#" class="banner"
><img
src="https://placehold.jp/200x40.png"
alt="リンク先サイト"
width="200"
height="40"
></a
>
<a href="#" class="banner"
><img
src="https://placehold.jp/200x40.png"
alt="リンク先サイト"
width="200"
height="40"
></a
>
</div>
</div>
<div class="module full">
<h2>Tags</h2>
<div class="tagcloud">
<a href="#" class="lg">エッセイ</a>
<a href="#" class="md">短編</a>
<a href="#">日記</a>
<a href="#" class="md">夏</a>
<a href="#">本</a>
<a href="#" class="lg">夜</a>
<a href="#">机</a>
<a href="#" class="md">手紙</a>
<a href="#">珈琲</a>
<a href="#">雨</a>
<a href="#">引越</a>
<a href="#" class="md">海</a>
<a href="#">猫</a>
<a href="#">五月</a>
</div>
</div>
</section>自己紹介ページ：本文だけ
<h1 class="page-title">about</h1>
<p>— a quiet room —</p>
<section class="about-section">
<h2 class="section-title">about</h2>
<p>
個人で運営しているブログサイトです。
気が向いた夜に、エッセイと短編をぽつぽつと書いています。
商業活動とは無関係に、書きたいときに書きたいものを公開しています。
</p>
</section>
<section class="about-section">
<h2 class="section-title">about me</h2>
<dl class="about-list">
<dt>HN</dt>
<dd>余白 / yohaku</dd>
<dt>主なジャンル</dt>
<dd>エッセイ / 短編小説 / 日記</dd>
<dt>連絡先</dt>
<dd><a href="mailto:hello@example.com">hello@example.com</a></dd>
<dt>その他</dt>
<dd>夜と本と珈琲が好きです。</dd>
</dl>
</section>
<section class="about-section">
<h2 class="section-title">notes</h2>
<p>
当サイトの文章および画像の無断転載・無断利用はご遠慮ください。
作品にはフィクションが含まれます。実在の人物・団体とは関係ありません。
</p>
</section>記事一覧ページ：本文だけ
<h1 class="page-title">archive</h1>
<p>— all entries, oldest at the bottom —</p>
<ul class="archive-list">
<li class="archive-item">
<time class="archive-date" datetime="2026-02-14">2026.02.14</time>
<span class="archive-cat">Essay</span>
<span class="archive-title"
><a href="/posts/001.html">雪の朝、柵の上のかささぎ</a></span
>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-02-09">2026.02.09</time>
<span class="archive-cat">Journal</span>
<span class="archive-title"><a href="#">柵の向こうの遠い灯</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-02-03">2026.02.03</time>
<span class="archive-cat">Notebook</span>
<span class="archive-title"><a href="#">青い影について、いくつかのメモ</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-28">2026.01.28</time>
<span class="archive-cat">Note</span>
<span class="archive-title"><a href="#">短編『冬の便り』第二章を更新しました</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-19">2026.01.19</time>
<span class="archive-cat">Essay</span>
<span class="archive-title"><a href="#">珈琲を淹れるための、長い前置き</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-11">2026.01.11</time>
<span class="archive-cat">Journal</span>
<span class="archive-title"><a href="#">青い時間、白い時間</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2025-12-22">2025.12.22</time>
<span class="archive-cat">Notebook</span>
<span class="archive-title"><a href="#">十二月の覚書（うしろのほうから）</a></span>
</li>
</ul>
<!-- 記事が無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだ記事はありません。</p> -->
<nav class="pagination" aria-label="ページ送り">
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next →</a>
</nav>記事個別ページ：本文だけ
<a href="/archive.html" class="post-back">← archive</a>
<article>
<header class="post-header">
<div class="post-meta">
<time class="date" datetime="2026-05-22">May 22, 2026</time>
<span class="sep">·</span>
<span class="cat">Essay</span>
</div>
<h1 class="post-header-title">五月の終わりに、机の上を片付ける話</h1>
</header>
<div class="post-body">
<p>
締切の前夜になると、なぜか机を片付けたくなる。原稿が一行も進んでいないのに、ペン立てを二つに分け、文房具屋で買ってきたまま忘れていた紙やすりで、古い消しゴムの角をきれいに削っている自分がいる。<em
>逃避としての整理整頓</em
>、と私はこれを呼んでいる。
</p>
<p>
困ったことに、この逃避はわりと効く。机を整え終える頃には、書きたい一行が、たいてい一つだけ、ふと浮かんでいる。<strong
>整える</strong
>という行為は、たぶん思考にとって深呼吸のようなものなのだろう。
</p>
<p>
五月の光は、机の天板に長くまっすぐ落ちる。<mark
>その光の上で、ペンの影が動く</mark
>のを、しばらく眺めてから、ようやく書き始めた。
</p>
<p>
書き始めると、片付けた机の上には、また何かが少しずつ積もっていく。湯気の立っているカップ。書きかけの紙。読みかけの本。それは「散らかる」というよりは、夜が机の上にゆっくり下りてくる、という感じに近い。
</p>
<p>
朝が来てまた整える。整えるたびに、何かを一行だけ書ける夜が来る。それで十分な気がしている。
</p>
</div>
<footer class="post-footer">
<a href="/archive.html" class="post-footer-back">← archive へ戻る</a>
</footer>
</article>つぶやきタイムラインページ：本文だけ
<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 まるごと
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<main class="site-main">
<section class="hero">
<h1 class="hero-title"><a href="/index.html">site name</a></h1>
</section>
<section class="post-feed" aria-label="最新の記事">
<article class="post">
<div class="post-meta">
<span class="date">May 22, 2026</span>
<span class="sep">·</span>
<span class="cat">Essay</span>
</div>
<h2 class="post-title">
<a href="/posts/001.html">五月の終わりに、机の上を片付ける話</a>
</h2>
<div class="post-excerpt">
<p>
締切の前夜になると、なぜか机を片付けたくなる。原稿が一行も進んでいないのに、ペン立てを二つに分け、文房具屋で買ってきたまま忘れていた紙やすりで、古い消しゴムの角をきれいに削っている自分がいる。<em
>逃避としての整理整頓</em
>、と私はこれを呼んでいる。
</p>
<p>
困ったことに、この逃避はわりと効く。机を整え終える頃には、書きたい一行が、たいてい一つだけ、ふと浮かんでいる。<strong
>整える</strong
>という行為は、たぶん思考にとって深呼吸のようなものなのだろう。
</p>
<p>
五月の光は、机の天板に長くまっすぐ落ちる。<mark
>その光の上で、ペンの影が動く</mark
>のを、しばらく眺めてから、ようやく書き始めた。
</p>
</div>
<a class="post-more" href="/posts/001.html">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<span class="date">May 18, 2026</span>
<span class="sep">·</span>
<span class="cat">Fiction</span>
</div>
<h2 class="post-title"><a href="#">短編「夜光虫」を上げました</a></h2>
<div class="post-excerpt">
<p>
久しぶりに
<em>夏の話</em>
を書いた。砂浜で光るあれの話。海そのものが好きなわけでもないのに、夏の夜の海の匂いだけは、書くたびに自分でも少し息が止まる。
</p>
<p>
書きながら、これは
<strong>夏ではなく、夏の手前の話</strong>
だな、と気がついた。光るものを見にいくのは、たぶんいつも、まだ何も始まっていない時期の人間の仕事だ。
</p>
<p>本編は <a href="/archive.html">archive</a> から。よければ静かな夜にどうぞ。</p>
</div>
<a class="post-more" href="#">読みに行く</a>
</article>
<article class="post">
<div class="post-meta">
<span class="date">May 12, 2026</span>
<span class="sep">·</span>
<span class="cat">Notes</span>
</div>
<h2 class="post-title"><a href="#">サイトを少しだけ整えました</a></h2>
<div class="post-excerpt">
<p>
長く触っていなかった場所に手を入れる時間が、不思議と贅沢に感じる。コードのインデントを揃え、フッターの語尾を直し、ファビコンを一回り小さくしただけで、たいぶ呼吸がしやすくなった。
</p>
<p>
更新告知を <mark>news</mark> ではなく
<mark>journal</mark>
と呼ぶようにした。理由はとくにない。<em>そう呼びたかった</em>、それだけ。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
</section>
<nav class="pagination" aria-label="ページ送り">
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next →</a>
</nav>
<section class="modules" aria-label="サイドメニュー">
<div class="module full">
<h2>About</h2>
<div class="about-row">
<div class="about-avatar" aria-hidden="true"></div>
<div>
<div class="about-who">余白 / yohaku</div>
<div class="about-handle">@yohaku_journal</div>
<p>
気が向いた夜にだけ書く人。長めのエッセイと、ときどき短編。最近は
<em>夏の手前</em>
の話ばかり書いています。
</p>
</div>
</div>
</div>
<div class="module">
<h2>Links</h2>
<ul>
<li><a href="#">pixiv</a></li>
<li><a href="#">privatter</a></li>
<li><a href="#">小説家になろう</a></li>
<li><a href="#">Misskey</a></li>
<li><a href="#">RSS</a></li>
</ul>
</div>
<div class="module">
<h2>Archive</h2>
<ul>
<li><a href="#">2026 / 05 — 3 件</a></li>
<li><a href="#">2026 / 04 — 5 件</a></li>
<li><a href="#">2026 / 03 — 2 件</a></li>
<li><a href="#">2026 / 02 — 4 件</a></li>
<li><a href="/archive.html">すべて見る</a></li>
</ul>
</div>
<div class="module">
<h2>Banners</h2>
<div class="banners-grid">
<a href="#" class="banner"
><img
src="https://placehold.jp/200x40.png"
alt="リンク先サイト"
width="200"
height="40"
></a
>
<a href="#" class="banner"
><img
src="https://placehold.jp/200x40.png"
alt="リンク先サイト"
width="200"
height="40"
></a
>
</div>
</div>
<div class="module full">
<h2>Tags</h2>
<div class="tagcloud">
<a href="#" class="lg">エッセイ</a>
<a href="#" class="md">短編</a>
<a href="#">日記</a>
<a href="#" class="md">夏</a>
<a href="#">本</a>
<a href="#" class="lg">夜</a>
<a href="#">机</a>
<a href="#" class="md">手紙</a>
<a href="#">珈琲</a>
<a href="#">雨</a>
<a href="#">引越</a>
<a href="#" class="md">海</a>
<a href="#">猫</a>
<a href="#">五月</a>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>自己紹介ページ：body まるごと
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<main class="site-main">
<h1 class="page-title">about</h1>
<p>— a quiet room —</p>
<section class="about-section">
<h2 class="section-title">about</h2>
<p>
個人で運営しているブログサイトです。
気が向いた夜に、エッセイと短編をぽつぽつと書いています。
商業活動とは無関係に、書きたいときに書きたいものを公開しています。
</p>
</section>
<section class="about-section">
<h2 class="section-title">about me</h2>
<dl class="about-list">
<dt>HN</dt>
<dd>余白 / yohaku</dd>
<dt>主なジャンル</dt>
<dd>エッセイ / 短編小説 / 日記</dd>
<dt>連絡先</dt>
<dd><a href="mailto:hello@example.com">hello@example.com</a></dd>
<dt>その他</dt>
<dd>夜と本と珈琲が好きです。</dd>
</dl>
</section>
<section class="about-section">
<h2 class="section-title">notes</h2>
<p>
当サイトの文章および画像の無断転載・無断利用はご遠慮ください。
作品にはフィクションが含まれます。実在の人物・団体とは関係ありません。
</p>
</section>
</main>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>記事一覧ページ：body まるごと
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<main class="site-main">
<h1 class="page-title">archive</h1>
<p>— all entries, oldest at the bottom —</p>
<ul class="archive-list">
<li class="archive-item">
<time class="archive-date" datetime="2026-02-14">2026.02.14</time>
<span class="archive-cat">Essay</span>
<span class="archive-title"
><a href="/posts/001.html">雪の朝、柵の上のかささぎ</a></span
>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-02-09">2026.02.09</time>
<span class="archive-cat">Journal</span>
<span class="archive-title"><a href="#">柵の向こうの遠い灯</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-02-03">2026.02.03</time>
<span class="archive-cat">Notebook</span>
<span class="archive-title"><a href="#">青い影について、いくつかのメモ</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-28">2026.01.28</time>
<span class="archive-cat">Note</span>
<span class="archive-title"><a href="#">短編『冬の便り』第二章を更新しました</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-19">2026.01.19</time>
<span class="archive-cat">Essay</span>
<span class="archive-title"><a href="#">珈琲を淹れるための、長い前置き</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2026-01-11">2026.01.11</time>
<span class="archive-cat">Journal</span>
<span class="archive-title"><a href="#">青い時間、白い時間</a></span>
</li>
<li class="archive-item">
<time class="archive-date" datetime="2025-12-22">2025.12.22</time>
<span class="archive-cat">Notebook</span>
<span class="archive-title"><a href="#">十二月の覚書（うしろのほうから）</a></span>
</li>
</ul>
<!-- 記事が無いときは上の <ul> を削除して以下を表示 -->
<!-- <p class="empty">まだ記事はありません。</p> -->
<nav class="pagination" aria-label="ページ送り">
<span class="current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next →</a>
</nav>
</main>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>記事個別ページ：body まるごと
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<main class="site-main">
<a href="/archive.html" class="post-back">← archive</a>
<article>
<header class="post-header">
<div class="post-meta">
<time class="date" datetime="2026-05-22">May 22, 2026</time>
<span class="sep">·</span>
<span class="cat">Essay</span>
</div>
<h1 class="post-header-title">五月の終わりに、机の上を片付ける話</h1>
</header>
<div class="post-body">
<p>
締切の前夜になると、なぜか机を片付けたくなる。原稿が一行も進んでいないのに、ペン立てを二つに分け、文房具屋で買ってきたまま忘れていた紙やすりで、古い消しゴムの角をきれいに削っている自分がいる。<em
>逃避としての整理整頓</em
>、と私はこれを呼んでいる。
</p>
<p>
困ったことに、この逃避はわりと効く。机を整え終える頃には、書きたい一行が、たいてい一つだけ、ふと浮かんでいる。<strong
>整える</strong
>という行為は、たぶん思考にとって深呼吸のようなものなのだろう。
</p>
<p>
五月の光は、机の天板に長くまっすぐ落ちる。<mark
>その光の上で、ペンの影が動く</mark
>のを、しばらく眺めてから、ようやく書き始めた。
</p>
<p>
書き始めると、片付けた机の上には、また何かが少しずつ積もっていく。湯気の立っているカップ。書きかけの紙。読みかけの本。それは「散らかる」というよりは、夜が机の上にゆっくり下りてくる、という感じに近い。
</p>
<p>
朝が来てまた整える。整えるたびに、何かを一行だけ書ける夜が来る。それで十分な気がしている。
</p>
</div>
<footer class="post-footer">
<a href="/archive.html" class="post-footer-back">← archive へ戻る</a>
</footer>
</article>
</main>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>つぶやきタイムラインページ：body まるごと
<header class="site-header">
<div class="site-header-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="/archive.html">archive</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>
</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>
</header>
<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>
<footer class="site-footer">
<span class="site-footer-mark">site name</span>
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
</footer>
<!-- つぶやき添付画像の拡大表示（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>