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=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Hina+Mincho&family=Italiana&display=swap"
rel="stylesheet"
>装飾用スタイル（共通・head に貼る）
<style>
/*
Designed by instan <https://instan.fc2.page>
003 — snow shadow（クリーム紙 + 藍紫の影 + Hina Mincho × Italiana）
ライト固定（藍紫の影は雪の上に落ちる色なのでダーク反転は意図しない）
*/
/* ===== カラー・フォントの設定（ここを変えると全体の見た目が変わります） ===== */
:root {
color-scheme: light only;
/* 色（クリーム紙 + 墨 + 雪に落ちる藍紫の影） */
--color-bg: #f1e8cf;
--color-bg-soft: #e9dfc2;
--color-text: #1c1813;
--color-muted: #534838;
--color-faint: #8c8273;
--color-line: #cfc4a8;
--color-shadow: #a6a9b3;
--color-shadow-tint: rgba(166, 169, 179, 0.18);
--color-hl: rgba(166, 169, 179, 0.55);
/* フォント */
--font-serif-ja: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
--font-serif-en: "Cormorant Garamond", "EB Garamond", serif;
--font-display: "Italiana", "Cormorant Garamond", serif;
--font-body: var(--font-serif-ja);
/* レイアウト */
--content-width: 640px;
--reading-width: 36rem;
--header-height: 56px;
}
/* Scroll-driven animation 用の registered custom properties */
@property --header-bg-alpha {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
/* ===== 文字まわりの基本設定 ===== */
html {
font-feature-settings:
"palt" 1,
"pkna" 1;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: 16px;
line-height: 2;
word-break: auto-phrase;
line-break: strict;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
/* ページ全体に薄く落ちる藍紫のヴェール（雪原の影） */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(120% 60% at 50% 0%, transparent 0%, var(--color-shadow-tint) 80%),
radial-gradient(80% 50% at 100% 80%, var(--color-shadow-tint) 0%, transparent 70%),
radial-gradient(60% 40% at 0% 60%, var(--color-shadow-tint) 0%, transparent 70%);
z-index: -1;
}
::selection {
background: var(--color-text);
color: var(--color-bg);
}
a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--color-line);
transition:
border-color 0.2s,
color 0.2s;
}
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: 400;
line-height: 1.5;
text-wrap: balance;
}
h1 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.2rem);
margin: 2.5rem 0 1.25rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.06em;
}
h2 {
font-size: 1.35rem;
margin: 2.25rem 0 1rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.06em;
}
h3 {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 1.15rem;
margin: 2rem 0 0.75rem;
color: var(--color-muted);
}
h4 {
font-size: 1rem;
margin: 1.75rem 0 0.6rem;
letter-spacing: 0.08em;
}
h5 {
font-size: 0.92rem;
margin: 1.5rem 0 0.5rem;
color: var(--color-muted);
letter-spacing: 0.14em;
}
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.24em;
}
p + p {
margin-top: 1em;
}
/* ===== 強調 / 引用 / 区切り / コード ===== */
em {
font-family: var(--font-serif-en);
font-style: italic;
color: var(--color-text);
}
strong {
background: linear-gradient(
transparent 62%,
var(--color-hl) 62%,
var(--color-hl) 92%,
transparent 92%
);
padding: 0 0.04em;
}
mark {
background: transparent;
color: inherit;
border-bottom: 1px dotted var(--color-text);
padding: 0 0.04em;
}
blockquote {
margin: 1.6em 0;
padding: 18px 22px;
background: var(--color-shadow-tint);
color: var(--color-text);
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.95rem;
line-height: 1.85;
border-left: 1px solid var(--color-shadow);
}
blockquote cite {
display: block;
margin-top: 10px;
font-style: normal;
font-family: var(--font-serif-en);
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-muted);
}
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 {
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 {
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.88em;
background: color-mix(in oklab, var(--color-text) 7%, 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='%23534838' 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);
}
}
}
/* JS fallback (main.js が .scrolled クラスを付与) */
.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-family: var(--font-display);
font-size: 1.1rem;
color: var(--color-text);
letter-spacing: 0.18em;
border: 0;
}
/* ===== ナビゲーション =====
1 つの <nav class="site-nav"> をリンク編集の唯一の場所として運用する。
SP では .drawer を popover + transform: translateX で右からスライドインするドロワー化、
PC では .drawer を display: contents でフラット化してヘッダー内インラインにする。 */
/* SP: ハンバーガーで開くドロワー（デフォルト挙動） */
.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.2);
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(28, 24, 19, 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;
color: var(--color-text);
border: 0;
border-bottom: 1px solid var(--color-line);
letter-spacing: 0.28em;
text-transform: uppercase;
}
.site-nav a:hover,
.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.78rem;
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: 2rem 1.5rem 4rem;
}
section + section {
margin-top: 3rem;
}
.page-title {
font-family: var(--font-display), var(--font-serif-ja);
font-size: clamp(1.8rem, 4vw, 2.2rem);
text-align: center;
/* base h1 の margin shorthand / 罫線を打ち消す */
margin: 1rem 0 1rem;
padding-bottom: 0;
border-bottom: 0;
letter-spacing: 0.12em;
}
.page-title + p {
text-align: center;
color: var(--color-muted);
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.9rem;
margin: 0 0 3rem;
}
.section-title {
font-family: var(--font-serif-en), var(--font-serif-ja);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-muted);
text-align: center;
/* base h2 の margin / 罫線を打ち消す */
margin: 0 0 1.25rem;
padding-bottom: 0;
border-bottom: 0;
}
/* ===== トップページの masthead（hero）===== */
.hero {
text-align: center;
position: relative;
padding: 2.5rem 0 2rem;
margin-bottom: 2.5rem;
}
.hero-title {
display: block;
font-family: var(--font-display), var(--font-serif-ja);
font-size: clamp(2.4rem, 7vw, 3.4rem);
letter-spacing: 0.04em;
line-height: 1.1;
/* base h1 の margin / 罫線を打ち消す */
margin: 0;
padding-bottom: 0;
border-bottom: 0;
}
/* hero / intro を仕切る中央ヘアライン */
.intro::before,
.intro::after {
content: "";
display: block;
width: 120px;
height: 1px;
background: var(--color-line);
margin: 2rem auto;
}
/* ===== トップページ：イントロ段落 ===== */
.intro {
text-align: center;
margin: 0 auto 3.5rem;
max-width: 520px;
}
.intro p {
margin: 0;
font-size: 0.94rem;
line-height: 2.05;
text-align: justify;
hanging-punctuation: allow-end;
text-wrap: pretty;
}
/* ===== ブログ feed（post 一覧）===== */
.post-feed {
display: flex;
flex-direction: column;
}
.post {
padding: 3rem 0;
border-top: 1px solid var(--color-line);
}
.post:first-child {
border-top: 0;
padding-top: 0.5rem;
}
.post-meta {
text-align: center;
margin-bottom: 1.1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.post-meta .date {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.88rem;
color: var(--color-muted);
letter-spacing: 0.06em;
}
.post-meta .sep {
display: inline-block;
width: 18px;
height: 1px;
background: var(--color-shadow);
opacity: 0.6;
}
.post-meta .cat {
font-family: var(--font-serif-en);
font-size: 0.7rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--color-faint);
}
.post-title {
text-align: center;
font-family: var(--font-serif-ja);
font-size: 1.55rem;
line-height: 1.7;
/* base h2 の margin / 罫線を打ち消す */
margin: 0 0 1.6rem;
padding-bottom: 0;
border-bottom: 0;
letter-spacing: 0.06em;
}
.post-title a {
border: 0;
}
.post-title a:hover {
color: var(--color-muted);
}
.post-excerpt p {
margin: 0 0 1.1em;
text-align: justify;
hanging-punctuation: allow-end;
text-wrap: pretty;
font-size: 0.94rem;
line-height: 2.05;
}
.post-excerpt p:last-child {
margin-bottom: 0;
}
/* 各 entry の最初の段落に dropcap */
.post-excerpt p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 3.2em;
line-height: 0.95;
float: left;
padding: 0.1em 0.18em 0 0;
color: var(--color-text);
}
.post-more {
display: block;
text-align: center;
margin-top: 1.75rem;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.82rem;
color: var(--color-muted);
letter-spacing: 0.06em;
border: 0;
}
.post-more::after {
content: " →";
font-style: normal;
}
.post-more:hover {
color: var(--color-text);
}
/* ===== ページ送り ===== */
.pagination {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--color-line);
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.82rem;
color: var(--color-muted);
letter-spacing: 0.06em;
}
.pagination a {
border: 0;
}
.pagination a:hover {
color: var(--color-text);
}
.pagination .current {
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-style: normal;
}
/* ===== modules（サイドメニュー領域：footer 寄りの paper-soft 帯） ===== */
.modules {
margin-top: 4rem;
padding: 4rem 0 0;
border-top: 1px solid var(--color-line);
display: flex;
flex-direction: column;
gap: 3.5rem;
}
.module h2 {
font-family: var(--font-serif-ja);
font-size: 1.05rem;
letter-spacing: 0.08em;
text-align: center;
/* base h2 の margin / 罫線を打ち消す */
margin: 0 0 1.2rem;
padding: 0;
border-bottom: 0;
}
.module p,
.module li {
font-size: 0.88rem;
line-height: 1.95;
}
.module ul {
list-style: none;
margin: 0;
padding: 0;
}
/* about-mini */
.about-mini {
text-align: center;
max-width: 480px;
margin: 0 auto;
line-height: 2;
}
.about-mini p {
margin: 0;
}
.about-mini .signature {
display: block;
margin-top: 1.1rem;
font-family: var(--font-serif-en);
font-style: italic;
color: var(--color-muted);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
/* links（2 カラム column-count） */
.links-list {
max-width: 420px;
margin: 0 auto;
columns: 2;
column-gap: 2.25rem;
line-height: 2.4;
}
.links-list li {
break-inside: avoid;
}
.links-list a {
border: 0;
}
.links-list a::before {
content: "·";
margin-right: 0.5em;
color: var(--color-shadow);
}
.links-list a:hover {
color: var(--color-muted);
}
/* archive-month（footer module 内：月別アーカイブ） */
.archive-month {
max-width: 460px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.archive-month li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.9rem;
padding: 0.5rem 0;
border-bottom: 1px dotted var(--color-line);
}
.archive-month a {
border: 0;
flex: 1;
}
.archive-month .count {
font-family: var(--font-serif-en);
font-style: italic;
color: var(--color-faint);
font-size: 0.82rem;
}
/* banners */
.banners-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.9rem;
}
.banner {
display: inline-block;
line-height: 0;
}
.banner img {
display: block;
width: 200px;
max-width: 100%;
height: auto;
}
.banner:hover {
opacity: 0.85;
}
.banner-self {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
/* tagcloud（4 段階の大きさ） */
.tagcloud {
text-align: center;
max-width: 480px;
margin: 0 auto;
line-height: 2.4;
}
.tagcloud a {
border: 0;
display: inline-block;
margin: 0 0.5rem;
color: var(--color-muted);
font-size: 0.88rem;
}
.tagcloud a:hover {
color: var(--color-text);
}
.tagcloud a.s1 {
font-size: 0.78rem;
color: var(--color-faint);
}
.tagcloud a.s2 {
font-size: 0.88rem;
}
.tagcloud a.s3 {
font-size: 1.05rem;
color: var(--color-text);
}
.tagcloud a.s4 {
font-size: 1.3rem;
color: var(--color-text);
font-style: italic;
font-family: var(--font-serif-ja);
}
/* contacts（mail / wavebox 等のリンク） */
.contacts {
text-align: center;
max-width: 420px;
margin: 0 auto;
font-size: 0.88rem;
line-height: 2.1;
}
.contacts-note {
display: block;
margin: 0 0 0.6rem;
font-family: var(--font-serif-en);
font-style: italic;
color: var(--color-muted);
}
.contacts-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem 1.5rem;
}
.contacts-list a {
border: 0;
}
.contacts-list a:hover {
color: var(--color-text);
border-bottom: 1px solid var(--color-text);
}
/* ===== 全記事一覧（archive.html）===== */
.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-style: italic;
font-size: 0.78rem;
letter-spacing: 0.12em;
color: var(--color-muted);
}
.archive-cat {
font-family: var(--font-serif-en);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--color-faint);
}
.archive-title {
font-size: 0.98rem;
}
.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;
}
}
/* ===== つぶやきタイムライン（timeline.html）===== */
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.timeline-item {
padding: 2rem 0;
border-top: 1px solid var(--color-line);
}
.timeline-item:first-child {
border-top: 0;
padding-top: 0.5rem;
}
/* ピン留め：藍紫の影をうっすら敷いて、左に細いアクセント罫を足す控えめな強調 */
.timeline-item.is-pinned {
position: relative;
padding: 2rem 1.25rem;
background: var(--color-shadow-tint);
}
.timeline-item.is-pinned::before {
content: "";
position: absolute;
top: 2rem;
bottom: 2rem;
left: 0;
width: 1px;
background: var(--color-shadow);
}
.timeline-meta {
display: flex;
align-items: baseline;
gap: 0.9rem;
margin-bottom: 0.85rem;
}
/* pinned ラベル：イタリック小キャプスの控えめなマーカー */
.timeline-pin {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: lowercase;
color: var(--color-faint);
}
.timeline-time {
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.82rem;
letter-spacing: 0.1em;
color: var(--color-muted);
}
.timeline-body {
line-height: 2;
}
.timeline-body p {
margin: 0;
font-size: 0.94rem;
text-align: justify;
hanging-punctuation: allow-end;
text-wrap: pretty;
}
.timeline-body p + p {
margin-top: 1em;
}
/* 添付画像：1 枚なら幅を抑えて、複数なら整然と折り返すグリッド */
.timeline-media {
margin-top: 1.1rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.6rem;
max-width: 420px;
}
.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);
}
/* ===== ブログ本文ページ（posts/NNN.html）===== */
.post-back {
display: inline-block;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 1.5rem;
border: 0;
}
.post-back:hover {
color: var(--color-text);
}
.post-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-line);
}
.post-header .post-meta {
margin-bottom: 1.25rem;
}
.post-header-title {
font-family: var(--font-serif-ja);
font-size: clamp(1.5rem, 5vw, 1.85rem);
line-height: 1.6;
/* base h1 の margin / 罫線を打ち消す */
margin: 0;
padding-bottom: 0;
border-bottom: 0;
letter-spacing: 0.06em;
}
.post-body {
max-width: var(--reading-width);
margin: 2.5rem auto 3rem;
line-height: 2.05;
}
.post-body p {
margin: 0 0 1.4em;
text-align: justify;
hanging-punctuation: allow-end;
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.74rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
padding-top: 0.25rem;
/* base dt の margin-top を打ち消す（grid 表示で不要） */
margin-top: 0;
}
/* ===== サイトフッター（colophon） ===== */
.site-footer {
max-width: var(--content-width);
margin: 4rem auto 0;
padding: 2.5rem 1.5rem 3.5rem;
border-top: 1px solid var(--color-line);
text-align: center;
font-family: var(--font-serif-en);
font-style: italic;
font-size: 0.78rem;
color: var(--color-muted);
letter-spacing: 0.06em;
line-height: 1.9;
}
.site-footer-mark {
font-family: var(--font-display);
font-style: normal;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--color-faint);
display: block;
margin-top: 0.5rem;
}
.site-footer nav {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.site-footer nav a {
color: var(--color-muted);
border: 0;
}
.site-footer nav a:hover {
color: var(--color-text);
}
/* ===== 「まだありません」表示用 ===== */
.empty {
text-align: center;
padding: 3rem 1rem;
color: var(--color-muted);
font-family: var(--font-serif-en);
font-style: italic;
}
/* ===== レスポンシブ ===== */
@media (max-width: 720px) {
.hero {
padding-top: 1.5rem;
}
.post {
padding: 2.5rem 0;
}
.post-title {
font-size: 1.3rem;
}
.post-excerpt p:first-of-type::first-letter {
font-size: 2.6em;
}
.links-list {
columns: 1;
}
}
</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">journal</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">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</footer>■ 各ページの本文だけ（上の「レイアウトの外枠」の <main> の中に入れる）
TOPページ：本文だけ
<section class="hero">
<h1 class="hero-title">site name</h1>
</section>
<section class="intro">
<p>
音のない朝のことや、影が青く伸びる午後のことを、ぽつぽつと書きとめておく場所。短い便りと、いくらか長い文章が混ざります。気が向いたときに、栞を挟むようにして読んでいってください。
</p>
</section>
<section class="post-feed" aria-label="最新の記事">
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-14">February 14, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Essay</span>
</div>
<h2 class="post-title"><a href="/posts/001.html">雪の朝、柵の上のかささぎ</a></h2>
<div class="post-excerpt">
<p>
窓を開けると、まだ夜の匂いがうっすらと残っていて、庭の柵に一羽のかささぎが止まっていた。音のない朝、というのはきっとこういう日のことを言うのだろうと思った。雪は降りやんでいて、東の空はうっすらと暖かい色をしていた。
</p>
<p>
かささぎは
<em
>しばらく身じろぎもせず</em
>、まるで景色のほうが動くのを待っているように見えた。庭の影は青くひいていて、地面のほうがむしろ温かい白に見える。光と影が逆になったみたいな朝で、しばらく、台所に戻るのも忘れていた。
</p>
<blockquote>
The shadow is not the absence of light — it is light, of another colour.
<cite>— a note, somewhere in a sketchbook</cite>
</blockquote>
<p>
影が青いのは光の色のせいだ、という話を以前どこかで読んだ。あれを
<strong>本当だな</strong>
と思ったのは、今朝この景色を見て、ようやくだった。
</p>
</div>
<a class="post-more" href="/posts/001.html">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-09">February 9, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Journal</span>
</div>
<h2 class="post-title"><a href="#">柵の向こうの遠い灯</a></h2>
<div class="post-excerpt">
<p>
日の落ちかける頃、塀の向こうにぽつりと灯がついた。誰か早めに帰ってきたのだろう。台所の窓らしい、温かい色のあかり。家々の輪郭が薄い藍色に沈んでゆく時間で、その一点だけが浮かんで見えた。
</p>
<p>
こういう時間に外を歩くのが昔から好きだ。誰の生活でもないのに、街全体がひとつの家のような気がしてくる。風はもう冷たくて、息は白い。コートの襟を立て、しばらく立ち止まって眺めていた。
</p>
<p>
角を曲がる手前で、二階の窓にもう一つ灯がともった。ふたつ並ぶと、それはもう
<em>誰かが帰ってきた</em>
という事実のようで、私もそろそろ家に戻ろうと思った。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-03">February 3, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Notebook</span>
</div>
<h2 class="post-title"><a href="#">青い影について、いくつかのメモ</a></h2>
<div class="post-excerpt">
<p>
雪の上の影が青く見えるのは、空の青がそこに落ちているからだという。光は黄色く、影は青く、その二つの色が混ざらず、隣り合って雪の上にある。これを最初に絵に描き留めた人は、たぶん少しだけ怖かったんじゃないかと思う。世界はずっとそう見えていたのに、誰もそう描いてこなかったのだから。
</p>
<p>
近頃、自分の文章にも
<mark>同じことをしたい</mark>
と思っている。ずっとそこにあったのに、誰も書き留めなかった色のようなものを、なんとか言葉に置き換えること。うまくいかない日のほうが多い。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-01-28">January 28, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Note</span>
</div>
<h2 class="post-title"><a href="#">短編『冬の便り』第二章を更新しました</a></h2>
<div class="post-excerpt">
<p>
長らく止めていた連載を再開しています。今回は冬の場面が長くなり、章のあいだに季節がもう一つ過ぎることになりそうです。引き続き、ゆっくりとお付き合いいただけたらうれしいです。
</p>
</div>
<a class="post-more" href="#">本編を読む</a>
</article>
</section>
<nav class="pagination" aria-label="ページ送り">
<span></span>
<span class="current">page 1 / 7</span>
<a href="#">older →</a>
</nav>
<section class="modules" aria-label="サイドメニュー">
<div class="module">
<h2>about me</h2>
<div class="about-mini">
<p>
季節と、影と、家のあいだの光について書いています。短い便りと、いくらか長い文章を、行き来しながら。返信のいらない手紙のように受け取っていただけたら。
</p>
<span class="signature">— 鵲</span>
</div>
</div>
<div class="module">
<h2>links</h2>
<ul class="links-list">
<li><a href="#">青いノートの記録</a></li>
<li><a href="#">遠雷便箋</a></li>
<li><a href="#">霜のかかる窓</a></li>
<li><a href="#">月読みの庭</a></li>
<li><a href="#">紙魚と砂時計</a></li>
<li><a href="#">朝霧の通信</a></li>
</ul>
</div>
<div class="module">
<h2>archive</h2>
<ul class="archive-month">
<li><a href="#">2026 · February</a><span class="count">no. 3</span></li>
<li><a href="#">2026 · January</a><span class="count">no. 5</span></li>
<li><a href="#">2025 · December</a><span class="count">no. 4</span></li>
<li><a href="#">2025 · November</a><span class="count">no. 6</span></li>
<li><a href="#">2025 · October</a><span class="count">no. 3</span></li>
<li>
<a href="/archive.html">earlier archives<span class="count">— →</span></a>
</li>
</ul>
</div>
<div class="module">
<h2>topics</h2>
<div class="tagcloud">
<a href="#" class="s3">essay</a>
<a href="#" class="s4">冬</a>
<a href="#" class="s2">notebook</a>
<a href="#" class="s1">music</a>
<a href="#" class="s3">小説</a>
<a href="#" class="s2">journal</a>
<a href="#" class="s4">影</a>
<a href="#" class="s2">connection</a>
<a href="#" class="s1">cinema</a>
<a href="#" class="s3">手紙</a>
<a href="#" class="s2">読書</a>
<a href="#" class="s1">memo</a>
</div>
</div>
<div class="module">
<h2>banners</h2>
<div class="banners-grid">
<span class="banner banner-self"
><img
src="https://placehold.jp/200x40.png"
alt="サイト名（配布用バナー）"
width="200"
height="40"
></span
>
<a class="banner" href="#"
><img
src="https://placehold.jp/200x40.png"
alt="青いノートの記録"
width="200"
height="40"
></a
>
<a class="banner" href="#"
><img src="https://placehold.jp/200x40.png" alt="遠雷便箋" width="200" height="40"></a
>
<a class="banner" href="#"
><img
src="https://placehold.jp/200x40.png"
alt="朝霧の通信"
width="200"
height="40"
></a
>
</div>
</div>
<div class="module">
<h2>contact</h2>
<div class="contacts">
<span class="contacts-note">return mail is not required.</span>
<ul class="contacts-list">
<li><a href="mailto:hello@example.com">mail</a></li>
<li><a href="#">wavebox</a></li>
<li><a href="#">marshmallow</a></li>
</ul>
</div>
</div>
</section>自己紹介ページ：本文だけ
<h1 class="page-title">about</h1>
<p>a few words from the author</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>(your name)</dd>
<dt>書くもの</dt>
<dd>エッセイ / 短編 / 日記</dd>
<dt>連絡</dt>
<dd><a href="mailto:hello@example.com">hello@example.com</a></dd>
</dl>
</section>
<section class="about-section">
<h2 class="section-title">notes</h2>
<p>
当サイトの文章および画像の無断転載・無断利用はご遠慮ください。
作品にはフィクションが含まれます。実在の人物・団体とは関係ありません。
</p>
</section>記事一覧ページ：本文だけ
<h1 class="page-title">journal</h1>
<p>— all entries, newest first —</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></span>
<span class="current">page 1 / 7</span>
<a href="#">older →</a>
</nav>記事個別ページ：本文だけ
<a href="/archive.html" class="post-back">← journal</a>
<article>
<header class="post-header">
<div class="post-meta">
<time class="date" datetime="2026-02-14">February 14, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Essay</span>
</div>
<h1 class="post-header-title">雪の朝、柵の上のかささぎ</h1>
</header>
<div class="post-body">
<p>
窓を開けると、まだ夜の匂いがうっすらと残っていて、庭の柵に一羽のかささぎが止まっていた。音のない朝、というのはきっとこういう日のことを言うのだろうと思った。雪は降りやんでいて、東の空はうっすらと暖かい色をしていた。
</p>
<p>
かささぎは
<em
>しばらく身じろぎもせず</em
>、まるで景色のほうが動くのを待っているように見えた。庭の影は青くひいていて、地面のほうがむしろ温かい白に見える。光と影が逆になったみたいな朝で、しばらく、台所に戻るのも忘れていた。
</p>
<blockquote>
The shadow is not the absence of light — it is light, of another colour.
<cite>— a note, somewhere in a sketchbook</cite>
</blockquote>
<p>
影が青いのは光の色のせいだ、という話を以前どこかで読んだ。あれを
<strong>本当だな</strong>
と思ったのは、今朝この景色を見て、ようやくだった。
</p>
<p>
湯気の立つ珈琲をカップに移して窓辺に戻ると、もうかささぎはいなかった。柵の上には雪がうっすらと盛り上がっていて、さっきまでそこに鳥がいた、ということだけが、わずかな凹みになって残っていた。
</p>
<p>
<mark
>世界はずっとそう見えていたのに、誰もそう描いてこなかった</mark
>、というのは、青い影について何かの本で読んだ言葉だ。書くこともきっとそうで、ずっとあったのに誰も書き留めなかった色のようなものを、すこしずつ言葉にしておきたいと思う。今朝のかささぎは、たぶんそういう一日の始まりだった。
</p>
</div>
<footer class="post-footer">
<a href="/archive.html" class="post-footer-back">← journal へ戻る</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">journal</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">site name</h1>
</section>
<section class="intro">
<p>
音のない朝のことや、影が青く伸びる午後のことを、ぽつぽつと書きとめておく場所。短い便りと、いくらか長い文章が混ざります。気が向いたときに、栞を挟むようにして読んでいってください。
</p>
</section>
<section class="post-feed" aria-label="最新の記事">
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-14">February 14, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Essay</span>
</div>
<h2 class="post-title"><a href="/posts/001.html">雪の朝、柵の上のかささぎ</a></h2>
<div class="post-excerpt">
<p>
窓を開けると、まだ夜の匂いがうっすらと残っていて、庭の柵に一羽のかささぎが止まっていた。音のない朝、というのはきっとこういう日のことを言うのだろうと思った。雪は降りやんでいて、東の空はうっすらと暖かい色をしていた。
</p>
<p>
かささぎは
<em
>しばらく身じろぎもせず</em
>、まるで景色のほうが動くのを待っているように見えた。庭の影は青くひいていて、地面のほうがむしろ温かい白に見える。光と影が逆になったみたいな朝で、しばらく、台所に戻るのも忘れていた。
</p>
<blockquote>
The shadow is not the absence of light — it is light, of another colour.
<cite>— a note, somewhere in a sketchbook</cite>
</blockquote>
<p>
影が青いのは光の色のせいだ、という話を以前どこかで読んだ。あれを
<strong>本当だな</strong>
と思ったのは、今朝この景色を見て、ようやくだった。
</p>
</div>
<a class="post-more" href="/posts/001.html">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-09">February 9, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Journal</span>
</div>
<h2 class="post-title"><a href="#">柵の向こうの遠い灯</a></h2>
<div class="post-excerpt">
<p>
日の落ちかける頃、塀の向こうにぽつりと灯がついた。誰か早めに帰ってきたのだろう。台所の窓らしい、温かい色のあかり。家々の輪郭が薄い藍色に沈んでゆく時間で、その一点だけが浮かんで見えた。
</p>
<p>
こういう時間に外を歩くのが昔から好きだ。誰の生活でもないのに、街全体がひとつの家のような気がしてくる。風はもう冷たくて、息は白い。コートの襟を立て、しばらく立ち止まって眺めていた。
</p>
<p>
角を曲がる手前で、二階の窓にもう一つ灯がともった。ふたつ並ぶと、それはもう
<em>誰かが帰ってきた</em>
という事実のようで、私もそろそろ家に戻ろうと思った。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-02-03">February 3, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Notebook</span>
</div>
<h2 class="post-title"><a href="#">青い影について、いくつかのメモ</a></h2>
<div class="post-excerpt">
<p>
雪の上の影が青く見えるのは、空の青がそこに落ちているからだという。光は黄色く、影は青く、その二つの色が混ざらず、隣り合って雪の上にある。これを最初に絵に描き留めた人は、たぶん少しだけ怖かったんじゃないかと思う。世界はずっとそう見えていたのに、誰もそう描いてこなかったのだから。
</p>
<p>
近頃、自分の文章にも
<mark>同じことをしたい</mark>
と思っている。ずっとそこにあったのに、誰も書き留めなかった色のようなものを、なんとか言葉に置き換えること。うまくいかない日のほうが多い。
</p>
</div>
<a class="post-more" href="#">続きを読む</a>
</article>
<article class="post">
<div class="post-meta">
<time class="date" datetime="2026-01-28">January 28, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Note</span>
</div>
<h2 class="post-title"><a href="#">短編『冬の便り』第二章を更新しました</a></h2>
<div class="post-excerpt">
<p>
長らく止めていた連載を再開しています。今回は冬の場面が長くなり、章のあいだに季節がもう一つ過ぎることになりそうです。引き続き、ゆっくりとお付き合いいただけたらうれしいです。
</p>
</div>
<a class="post-more" href="#">本編を読む</a>
</article>
</section>
<nav class="pagination" aria-label="ページ送り">
<span></span>
<span class="current">page 1 / 7</span>
<a href="#">older →</a>
</nav>
<section class="modules" aria-label="サイドメニュー">
<div class="module">
<h2>about me</h2>
<div class="about-mini">
<p>
季節と、影と、家のあいだの光について書いています。短い便りと、いくらか長い文章を、行き来しながら。返信のいらない手紙のように受け取っていただけたら。
</p>
<span class="signature">— 鵲</span>
</div>
</div>
<div class="module">
<h2>links</h2>
<ul class="links-list">
<li><a href="#">青いノートの記録</a></li>
<li><a href="#">遠雷便箋</a></li>
<li><a href="#">霜のかかる窓</a></li>
<li><a href="#">月読みの庭</a></li>
<li><a href="#">紙魚と砂時計</a></li>
<li><a href="#">朝霧の通信</a></li>
</ul>
</div>
<div class="module">
<h2>archive</h2>
<ul class="archive-month">
<li><a href="#">2026 · February</a><span class="count">no. 3</span></li>
<li><a href="#">2026 · January</a><span class="count">no. 5</span></li>
<li><a href="#">2025 · December</a><span class="count">no. 4</span></li>
<li><a href="#">2025 · November</a><span class="count">no. 6</span></li>
<li><a href="#">2025 · October</a><span class="count">no. 3</span></li>
<li>
<a href="/archive.html">earlier archives<span class="count">— →</span></a>
</li>
</ul>
</div>
<div class="module">
<h2>topics</h2>
<div class="tagcloud">
<a href="#" class="s3">essay</a>
<a href="#" class="s4">冬</a>
<a href="#" class="s2">notebook</a>
<a href="#" class="s1">music</a>
<a href="#" class="s3">小説</a>
<a href="#" class="s2">journal</a>
<a href="#" class="s4">影</a>
<a href="#" class="s2">connection</a>
<a href="#" class="s1">cinema</a>
<a href="#" class="s3">手紙</a>
<a href="#" class="s2">読書</a>
<a href="#" class="s1">memo</a>
</div>
</div>
<div class="module">
<h2>banners</h2>
<div class="banners-grid">
<span class="banner banner-self"
><img
src="https://placehold.jp/200x40.png"
alt="サイト名（配布用バナー）"
width="200"
height="40"
></span
>
<a class="banner" href="#"
><img
src="https://placehold.jp/200x40.png"
alt="青いノートの記録"
width="200"
height="40"
></a
>
<a class="banner" href="#"
><img src="https://placehold.jp/200x40.png" alt="遠雷便箋" width="200" height="40"></a
>
<a class="banner" href="#"
><img
src="https://placehold.jp/200x40.png"
alt="朝霧の通信"
width="200"
height="40"
></a
>
</div>
</div>
<div class="module">
<h2>contact</h2>
<div class="contacts">
<span class="contacts-note">return mail is not required.</span>
<ul class="contacts-list">
<li><a href="mailto:hello@example.com">mail</a></li>
<li><a href="#">wavebox</a></li>
<li><a href="#">marshmallow</a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</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">journal</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 few words from the author</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>(your name)</dd>
<dt>書くもの</dt>
<dd>エッセイ / 短編 / 日記</dd>
<dt>連絡</dt>
<dd><a href="mailto:hello@example.com">hello@example.com</a></dd>
</dl>
</section>
<section class="about-section">
<h2 class="section-title">notes</h2>
<p>
当サイトの文章および画像の無断転載・無断利用はご遠慮ください。
作品にはフィクションが含まれます。実在の人物・団体とは関係ありません。
</p>
</section>
</main>
<footer class="site-footer">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</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">journal</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">journal</h1>
<p>— all entries, newest first —</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></span>
<span class="current">page 1 / 7</span>
<a href="#">older →</a>
</nav>
</main>
<footer class="site-footer">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</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">journal</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">← journal</a>
<article>
<header class="post-header">
<div class="post-meta">
<time class="date" datetime="2026-02-14">February 14, 2026</time>
<span class="sep" aria-hidden="true"></span>
<span class="cat">Essay</span>
</div>
<h1 class="post-header-title">雪の朝、柵の上のかささぎ</h1>
</header>
<div class="post-body">
<p>
窓を開けると、まだ夜の匂いがうっすらと残っていて、庭の柵に一羽のかささぎが止まっていた。音のない朝、というのはきっとこういう日のことを言うのだろうと思った。雪は降りやんでいて、東の空はうっすらと暖かい色をしていた。
</p>
<p>
かささぎは
<em
>しばらく身じろぎもせず</em
>、まるで景色のほうが動くのを待っているように見えた。庭の影は青くひいていて、地面のほうがむしろ温かい白に見える。光と影が逆になったみたいな朝で、しばらく、台所に戻るのも忘れていた。
</p>
<blockquote>
The shadow is not the absence of light — it is light, of another colour.
<cite>— a note, somewhere in a sketchbook</cite>
</blockquote>
<p>
影が青いのは光の色のせいだ、という話を以前どこかで読んだ。あれを
<strong>本当だな</strong>
と思ったのは、今朝この景色を見て、ようやくだった。
</p>
<p>
湯気の立つ珈琲をカップに移して窓辺に戻ると、もうかささぎはいなかった。柵の上には雪がうっすらと盛り上がっていて、さっきまでそこに鳥がいた、ということだけが、わずかな凹みになって残っていた。
</p>
<p>
<mark
>世界はずっとそう見えていたのに、誰もそう描いてこなかった</mark
>、というのは、青い影について何かの本で読んだ言葉だ。書くこともきっとそうで、ずっとあったのに誰も書き留めなかった色のようなものを、すこしずつ言葉にしておきたいと思う。今朝のかささぎは、たぶんそういう一日の始まりだった。
</p>
</div>
<footer class="post-footer">
<a href="/archive.html" class="post-footer-back">← journal へ戻る</a>
</footer>
</article>
</main>
<footer class="site-footer">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</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">journal</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">
<nav>
<a href="/index.html">Top</a>
<a href="/about.html">About</a>
<a href="/archive.html">Journal</a>
<a href="/tags.html">Tags</a>
<a href="/code.html">Code</a>
</nav>
<span class="site-footer-mark">site name</span>
</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>