/* Theme Name: simple diary Theme URI: Author: tokyo site Description: 日付と題だけが静かに並ぶ、日記のためのテーマ。コメント欄・サイドバー・検索窓は持ちません。書体・文字の大きさ・本文の幅はカスタマイザー（外観 → カスタマイズ → 文字と幅）から変えられます。 Version: 1.1.3 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: simple-diary Tags: minimal, diary, japanese */ /* ================================================================== 変数（色・書体・大きさ） 書体と大きさは、カスタマイザーの値が functions.php から の :root に流し込まれて、ここの初期値を上書きします。 ※ここに書いた変数を @media の中で定義し直さないこと。 head で差し込む :root があとから効くため、@media 側が打ち消されます。 画面幅で変えたいときは、変数を使う側（calc など）で調整します。 ================================================================== */ :root{ /* 紙とインク */ --paper:#fcfcfa; --ink:#232019; --soft:#6d685e; --faint:#a8a29a; --line:#e9e5dd; --river:#5c7b78; /* 多摩川の色。いまは操作位置の枠（focus）だけに使う */ --link-line:#e9e5dd; /* リンクの下線。--line（罫線）と同じ薄さで、気配だけ引く */ /* 書体（カスタマイザーが上書き） */ --font-body:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; --font-name:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; --font-site:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif; /* サイトの名前だけ。別に選べる */ --font-num:'EB Garamond','Shippori Mincho',serif; --w-title:500; /* 題の太さ。一種類しかない書体では 400 になる */ /* 大きさ（カスタマイザーが上書き） */ --fs-body:15.5px; /* 本文 */ --lh-body:2.05; /* 行間 */ --fs-title:21px; /* 日記の題 */ --fs-list:15px; /* 一覧の題 */ --fs-name:19px; /* サイトの名前。トップでも中のページでも同じ大きさ */ --fs-ptitle:17px; /* 固定ページの題（404の見出しも） */ --fs-listtitle:15px; /* 一覧の見出し（カテゴリー・月別・検索） */ --fs-nav:12px; /* 行き先（メニュー）。足もとは少し小さく出る */ --fs-sheet:16px; /* スマホで開く、全画面のメニューの文字 */ --fs-small:12.5px; /* 日付・書き出し・ページ送りなど、小さな文字 */ /* 柱の幅（カスタマイザーが上書き） 本文・一覧・ヘッダー画像が共通で使う、内側の柱の広さ。 左右の余白（24px）はこれとは別に外側へ足されます。 */ --wrap-max:544px; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-wrap:break-word; } img{ max-width:100%; height:auto; } a{ color:inherit; } /* 読み上げだけに出す文字 */ .screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .screen-reader-text:focus{ position:static; width:auto; height:auto; margin:0; padding:8px 14px; clip-path:none; background:var(--paper); color:var(--ink); font-size:13px; text-decoration:none; } .wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 24px; } /* ------------------------------------------------------------------ サイトの名前 ------------------------------------------------------------------ */ .site-head{ padding:76px 0 0; text-align:center; position:relative; } .site-name,.site-sub,.nav-main{ padding-left:24px; padding-right:24px; } .site-head.is-inner{ padding-top:44px; } .site-name{ font-family:var(--font-site); font-weight:400; font-size:var(--fs-name); letter-spacing:.42em; text-indent:.42em; margin:0; line-height:1.6; } /* 中のページでも、名前の大きさはトップと同じ（--fs-name 一つで決まる）。 ここで小さくしないこと。上下の余白（.site-head.is-inner の padding）だけで 「いまは中のページ」を出す。 */ .is-inner .site-name{ font-size:var(--fs-name); } .site-name a{ text-decoration:none; } .site-sub{ margin:16px 0 0; font-size:calc(var(--fs-small) - .5px); color:var(--soft); letter-spacing:.06em; } .is-inner .site-sub{ display:none; } /* ------------------------------------------------------------------ ヘッダー画像（トップの一枚目だけ） 幅は本文とそろえる。.site-head がすでに左右24pxをあけているので、 ここで --wrap-max と 24px を足すと、日記の本文とぴったり同じ幅の柱になる。 4：1 に切り抜いて低い帯にするのは、写真が題より前に出ないようにするため。 ------------------------------------------------------------------ */ .head-img{ max-width:var(--wrap-max); margin:34px auto 0; padding:0 24px; } /* .wrap と同じ寸法にそろえる */ .head-img img{ display:block; width:100%; height:auto; aspect-ratio:4/1; object-fit:cover; } /* 名前の下の行き先（パソコン） */ .nav-main{ margin:30px 0 0; } .is-inner .nav-main{ margin-top:20px; } .nav-main ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:1.6em; font-size:var(--fs-nav); } .nav-main a{ color:var(--soft); text-decoration:none; } .nav-main a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:.5px; text-decoration-color:var(--link-line); } /* ------------------------------------------------------------------ スマホの、静かな印（ハンバーガー） 線もパネルも動かさず、白がすっと重なるだけ。 ------------------------------------------------------------------ */ .menu-mark,.menu-close{ display:none; position:absolute; top:22px; right:18px; width:38px; height:38px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; } .menu-mark{ flex-direction:column; justify-content:center; align-items:flex-end; gap:6px; } .menu-mark i{ display:block; width:17px; height:1px; background:#8d8880; } .menu-close i{ position:absolute; top:18px; right:10px; display:block; width:17px; height:1px; background:#8d8880; } .menu-close i:first-child{ transform:rotate(45deg); } .menu-close i:last-child{ transform:rotate(-45deg); } .menu-mark:focus-visible,.menu-close:focus-visible{ outline:1px solid var(--river); outline-offset:2px; } .menu-sheet{ position:fixed; inset:0; z-index:50; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; opacity:0; visibility:hidden; /* 閉じるときは、薄くなりきってから見えなくする。開くときはすぐ見える状態にして、 キーボードの操作位置（フォーカス）がちゃんと中へ入れるようにする。 */ transition:opacity .34s ease, visibility 0s linear .34s; } .menu-sheet ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:30px; } .menu-sheet a{ font-family:var(--font-body); font-size:var(--fs-sheet); letter-spacing:.16em; color:var(--ink); text-decoration:none; } .menu-open .menu-sheet{ opacity:1; visibility:visible; transition:opacity .34s ease, visibility 0s; } .menu-open{ overflow:hidden; } /* ------------------------------------------------------------------ 日記の一覧 ------------------------------------------------------------------ */ .list{ padding:60px 0 0; } .list-title{ font-family:var(--font-name); font-weight:400; font-size:var(--fs-listtitle); letter-spacing:.14em; color:var(--soft); margin:0 0 42px; text-align:center; } .year{ display:grid; grid-template-columns:4.5rem 1fr; padding:0 0 34px; } .year-n{ font-family:var(--font-num); font-size:calc(var(--fs-small) + .5px); color:var(--faint); letter-spacing:.08em; padding-top:.5em; } /* 西暦の囲み（外観 → カスタマイズ → 文字と幅 →「一覧の西暦の出し方」）。 .year-n は grid の升目なので、そのまま枠を付けると列の幅・行の高さいっぱいの 縦長の箱になる。justify-self / align-self で、数字の大きさまで縮めている。 線と地の色は数字と同じ（--faint）。 */ .year-box-thin .year-n, .year-box-soft .year-n, .year-box-fill .year-n{ justify-self:start; align-self:start; line-height:1; } .year-box-thin .year-n{ padding:.32em .55em .26em; border:1px solid currentColor; margin-top:.3em; } .year-box-soft .year-n{ padding:.55em .62em .5em; border:.5px solid currentColor; margin-top:.15em; letter-spacing:.12em; } .year-box-fill .year-n{ padding:.38em .6em .32em; background:var(--faint); color:var(--paper); margin-top:.3em; letter-spacing:.1em; } .entries{ display:flex; flex-direction:column; gap:30px; margin:0; padding:0; list-style:none; } .entry a{ text-decoration:none; display:flex; gap:.85em; align-items:baseline; } .entry-body{ display:block; } .entry .md{ font-family:var(--font-num); font-size:var(--fs-small); color:var(--faint); font-variant-numeric:tabular-nums; flex:none; width:3.1em; } .entry .t{ margin:0; font-weight:400; font-size:var(--fs-list); line-height:1.75; } .entry .ex{ display:block; font-size:var(--fs-small); line-height:1.95; color:var(--soft); margin:.6em 0 0; } /* 一覧の題は、カーソルを合わせても下線を出さない（並びを静かに保つため）。 押せることは、操作位置の枠（下の focus-visible）で分かるようにしている。 */ .entry a:focus-visible{ outline:1px solid var(--river); outline-offset:4px; } /* ------------------------------------------------------------------ ページ送り 出し方は三通り（外観 → カスタマイズ → 文字と幅 →「ページ送りの出し方」）。 more … まん中に「MORE」の枠。次の一枚ぶんが下に続く感じ。 numbers … まん中に 1 2 3 … の数字（前後の矢印は出さない）。 text … まん中に「新しい日記／過去の日記」の文字だけ。 どれもまん中ぞろえで、上の空きも同じにしてあります。 ------------------------------------------------------------------ */ .pager{ display:flex; flex-direction:column; align-items:center; gap:18px; padding:46px 0 0; font-size:var(--fs-small); } .pager a{ color:var(--soft); text-decoration:none; } .pager a:hover{ color:var(--ink); } /* MORE のときだけ、「新しい日記」へ戻る細い一行を上に小さく置く。 文字だけの出し方では二つを対等に並べるので、ここでは薄くしない。 */ .pager-more .newer a{ color:var(--faint); letter-spacing:.08em; } .pager-more .newer a:hover{ color:var(--soft); } /* MORE の枠 */ .pager-more .more a{ display:inline-block; padding:.95em 2.9em; border:1px solid var(--line); color:var(--soft); font-family:var(--font-num); letter-spacing:.28em; text-indent:.28em; transition:border-color .3s ease, color .3s ease; } .pager-more .more a:hover{ border-color:var(--faint); color:var(--ink); } /* 文字だけの出し方。まん中に、中黒ほどの間をあけて並べる。 */ .pager-text{ flex-direction:row; justify-content:center; gap:2.2em; flex-wrap:wrap; } /* 数字のページ送り（the_posts_pagination が出す形に合わせる） */ .navigation.pagination{ padding:46px 0 0; } .navigation.pagination .nav-links{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.15em; font-family:var(--font-num); font-size:var(--fs-small); } .navigation.pagination .page-numbers{ display:inline-block; min-width:2.4em; padding:.6em .35em; text-align:center; color:var(--soft); text-decoration:none; font-variant-numeric:tabular-nums; } .navigation.pagination a.page-numbers:hover{ color:var(--ink); } .navigation.pagination .page-numbers.current{ color:var(--ink); border-bottom:1px solid var(--faint); } .navigation.pagination .page-numbers.dots{ color:var(--faint); min-width:1.4em; } .navigation.pagination .page-numbers:focus-visible{ outline:1px solid var(--river); outline-offset:2px; } .none{ font-size:var(--fs-body); line-height:var(--lh-body); padding:20px 0 0; } /* ------------------------------------------------------------------ 日記のページ・固定ページ ------------------------------------------------------------------ */ .article{ padding:70px 0 0; } .a-title{ font-family:var(--font-body); font-weight:var(--w-title); font-size:var(--fs-title); line-height:1.75; margin:0; text-wrap:balance; } .a-meta{ margin:18px 0 0; font-size:calc(var(--fs-small) - 1px); color:var(--faint); font-family:var(--font-num); letter-spacing:.06em; } .a-meta .cat{ font-family:var(--font-body); margin-left:1em; } .a-meta a{ color:inherit; text-decoration:none; } .a-meta a:hover{ color:var(--ink); } .a-body{ margin-top:44px; } .a-body p,.a-body li{ font-size:var(--fs-body); line-height:var(--lh-body); } .a-body p{ margin:0 0 1.85em; } .a-body h2,.a-body h3,.a-body h4{ font-weight:var(--w-title); line-height:1.8; margin:2.6em 0 1.2em; font-size:calc(var(--fs-body) + 1.5px); } .a-body ul,.a-body ol{ margin:0 0 1.85em; padding-left:1.4em; } .a-body li{ margin:0 0 .6em; } .a-body blockquote{ margin:0 0 1.85em; padding:0 0 0 1.2em; border-left:1px solid var(--line); color:var(--soft); } .a-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:.28em; text-decoration-thickness:.5px; text-decoration-color:var(--link-line); } .a-body img{ display:block; margin:0 auto; } .a-body figure{ margin:0 0 1.85em; } .a-body figcaption,.a-body .wp-caption-text{ font-size:calc(var(--fs-small) - 1px); line-height:1.9; color:var(--faint); margin:.8em 0 0; text-align:left; } .a-body .wp-caption{ max-width:100%; margin:0 0 1.85em; } /* 写真だけの段落は、間隔をつめて縦に並べる */ .a-body p:has(> img:only-child){ margin-bottom:14px; } .a-body p:has(> a > img:only-child){ margin-bottom:14px; } .a-body .alignleft{ float:left; margin:0 1.4em 1.2em 0; } .a-body .alignright{ float:right; margin:0 0 1.2em 1.4em; } .a-body .aligncenter{ margin-left:auto; margin-right:auto; } .a-body::after{ content:""; display:block; clear:both; } .a-body ruby rt{ font-size:.5em; color:var(--soft); } .a-pages{ font-size:var(--fs-small); color:var(--soft); } .a-pages a{ color:var(--soft); } .a-foot{ margin-top:56px; border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; gap:20px; font-size:var(--fs-small); } .a-foot a{ color:var(--soft); text-decoration:none; line-height:1.85; } .a-foot a:hover{ color:var(--ink); } .a-foot .next{ text-align:right; margin-left:auto; } .p-title{ font-family:var(--font-name); font-weight:400; font-size:var(--fs-ptitle); letter-spacing:.14em; margin:0 0 40px; } /* ------------------------------------------------------------------ 足もと ------------------------------------------------------------------ */ .foot{ margin-top:70px; padding:26px 24px 40px; text-align:center; border-top:1px solid var(--line); } .foot ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:1.4em; font-size:calc(var(--fs-nav) - .5px); } .foot a{ color:var(--soft); text-decoration:none; } .foot a:hover{ color:var(--ink); } .foot small{ display:block; margin-top:16px; font-size:calc(var(--fs-small) - 2px); color:var(--faint); font-family:var(--font-num); letter-spacing:.08em; } /* ------------------------------------------------------------------ 画面の出方（ページが出てくるとき・ページをうつるとき） ページが出てきたとき、中身ぜんたいがそっと濃くなりながら、ほんのわずか 上へ上がる。リンクを押して次のページへ移るときは、いったん薄くなってから 移る（そちらは assets/page-fade.js が に is-leaving を付ける）。 どちらも同じ向きなので、行き来してもひと続きの間合いに見える。 長さを変えたいときは、下の三つの数字だけ触ればよい。 --page-in-dur … 出てくるまでの長さ --page-in-rise … 上がる幅。0px にすると「濃くなるだけ」になる --page-out-dur … 押してから次のページへ移るまでの長さ 出方をやめたいときは、長さを 0s にする （0s なら page-fade.js も横取りをやめ、リンクはすぐ開く）。 JavaScript が動かない端末でも、出てくるときのフェードはCSSだけで動く。 その場合「うつるとき薄くなる」だけが無くなり、リンクはすぐ開く。 端末側で「動きを減らす」を選んでいる人には、どちらも動かさない。 ------------------------------------------------------------------ */ :root{ --page-in-dur:0.75s; --page-in-rise:0px; --page-out-dur:0.3s; } /* 薄くなっているあいだに地の色が白く抜けないよう、html にも紙の色を敷く （body を薄くすると body の背景も一緒に薄くなるため）。 */ html{ background:var(--paper); } @keyframes simple-diary-page-in{ from{ opacity:0; transform:translateY(var(--page-in-rise)); } to{ opacity:1; transform:none; } } /* 【重要】fill は backwards（both にしないこと）。 both だと動き終わったあとも body に transform が残り続ける。transform の効いた 要素の中では position:fixed が画面に貼りつかなくなり（その要素の中での位置決めに 変わる）、スマホのメニュー（.menu-sheet）が画面をおおわず、ページの末尾へ 落ちてしまう。CSSの仕様で、見た目には現れないので気づきにくい。 終わったあとの姿は body の通常の指定（opacity 1・transform なし）と同じなので、 forwards は要らない。 */ body{ animation:simple-diary-page-in var(--page-in-dur) ease-out backwards; } /* リンクを押したあと、次のページへ移るまでのあいだ。 */ html.is-leaving body{ opacity:0; transition:opacity var(--page-out-dur) ease-in; } /* ------------------------------------------------------------------ 画面が狭いとき ------------------------------------------------------------------ */ @media (max-width:620px){ .site-head{ padding-top:56px; } .site-head.is-inner{ padding-top:40px; } .wrap{ padding:0 22px; } .head-img, .site-name,.site-sub,.nav-main{ padding-left:22px; padding-right:22px; } .year{ grid-template-columns:1fr; gap:12px; } .year-n{ padding-top:0; } /* 西暦が題の上に一行で出る幅。囲みは上の空きだけ取り消す（形はそのまま） */ .year-box-thin .year-n, .year-box-soft .year-n, .year-box-fill .year-n{ margin-top:0; } .nav-main{ display:none; } /* 上の横一列はしまって…… */ .menu-mark{ display:flex; } /* …右上の細い線にする */ .menu-close{ display:block; } /* 前後の日記は狭い画面でも横一列のまま、左右の端へ。 題が長いと一行に入らないので、片側が半分を超えないようにして折り返す */ .a-foot{ gap:16px; } .a-foot a{ max-width:46%; } } @media (prefers-reduced-motion:reduce){ .menu-sheet{ transition:none; } body{ animation:none; } html.is-leaving body{ transition:none; opacity:1; } }