/* -------------------------------------------------------- */ /* VARIABLES */ /* -------------------------------------------------------- */ /* Variables are used like this: var(--text-color) */ :root { /* Background Colors: */ --background-color: #cbeaed; --content-background-color: #e4f8fc; --sidebar-background-color: #ffffff; /* Text Colors: */ --text-color: #4b5c78; --sidebar-text-color: #1a5b8c; --link-color: #46a6ec; --link-color-hover: #127296; /* Text: */ /* 日本語対応フォント。差し替えたいときはここだけ書き換える。 */ /* index.html などの にある Google Fonts の link も一緒に直すこと。 */ --font: "DotGothic16", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; --heading-font: "DotGothic16", "Zen Maru Gothic", sans-serif; --font-size: 16px; /* Other Settings: */ --margin: 10px; --padding: 15px; --border: none; --round-borders: 0px; --sidebar-width: 200px; /* カレンダーの日曜の色。暦は赤い日曜が見慣れているので1色だけ足している。 */ --sunday-color: #cc7a86; } /* -------------------------------------------------------- */ /* BASICS */ /* -------------------------------------------------------- */ * { box-sizing: border-box; } body { display: flex; align-items: flex-start; justify-content: center; min-height: 100vh; font-size: var(--font-size); margin: 0; padding: var(--margin); color: var(--text-color); font-family: var(--font); line-height: 1.6; background: var(--background-color); background-image: url("https://sadhost.neocities.org/images/tiles/sky.png"); } ::selection { /* (Text highlighted by the user) */ background: rgba(0, 0, 0, 0.2); } mark { /* Text highlighted by using the element */ text-shadow: 1px 1px 4px var(--link-color); background-color: inherit; color: var(--text-color); } /* Links: */ a { text-decoration: underline; } a, a:visited { color: var(--link-color); } a:hover, a:focus { color: var(--link-color-hover); text-decoration: none; } /* -------------------------------------------------------- */ /* LAYOUT */ /* -------------------------------------------------------- */ .layout { width: 100%; max-width: 1200px; display: grid; grid-gap: var(--margin); grid-template: "header header" auto "ticker ticker" auto "main rightSidebar" auto "footer footer" auto / auto var(--sidebar-width); /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } main { grid-area: main; overflow-y: auto; padding: var(--padding); background: var(--content-background-color); border: var(--border); border-radius: var(--round-borders); } /* -------------------------------------------------------- */ /* HEADER */ /* -------------------------------------------------------- */ header { grid-area: header; font-size: 1.2em; border: var(--border); border-radius: var(--round-borders); background: var(--content-background-color); } .header-content { padding: var(--padding); } .header-title { font-family: var(--heading-font); font-size: 1.5em; font-weight: bold; } .header-image img { width: 100%; height: auto; } /* -------------------------------------------------------- */ /* SIDEBARS */ /* -------------------------------------------------------- */ aside { grid-area: aside; border: var(--border); border-radius: var(--round-borders); overflow: hidden; background: var(--sidebar-background-color); padding: var(--padding); color: var(--sidebar-text-color); } .left-sidebar { grid-area: leftSidebar; } .right-sidebar { grid-area: rightSidebar; } .sidebar-title { font-weight: bold; font-size: 1.2em; font-family: var(--heading-font); } .sidebar-section:not(:last-child) { margin-bottom: 3em; } .sidebar-section ul, .sidebar-section ol { padding-left: 1.5em; } /* サイドバーの箇条書き（更新履歴など）は、1件のあいだを1行ぶん空ける。 幅が 200px しかないので1件が2〜3行に折り返してしまい、 詰めて並べるとどこで1件終わるのか分からなくなるため。 1.6em は、この場所の行間（1.6）ちょうど1行ぶん。 最初の1件の上には付けたくないので li + li にしてある。 */ .sidebar-section ul li + li, .sidebar-section ol li + li { margin-top: 1.6em; } .sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) { margin-top: 10px; } /* Sidebar Blockquote: */ .sidebar-section blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; overflow: hidden; } .sidebar-section blockquote > *:first-child { margin-top: 0; } .sidebar-section blockquote > *:last-child { margin-bottom: 0; } /* Site Button: */ .site-button { display: flex; flex-direction: column; align-items: center; } .site-button textarea { font-family: monospace; font-size: 0.7em; } /* -------------------------------------------------------- */ /* FOOTER */ /* -------------------------------------------------------- */ footer { grid-area: footer; border: var(--border); border-radius: var(--round-borders); overflow: hidden; font-size: 0.75em; padding: 15px; background: var(--content-background-color); display: flex; justify-content: center; } footer a, footer a:visited { color: var(--link-color); } footer a:hover, footer a:focus { color: var(--link-color-hover); } /* -------------------------------------------------------- */ /* NAVIGATION */ /* -------------------------------------------------------- */ nav { margin-bottom: 3em; } nav .sidebar-title { margin-bottom: 0.5em; } nav ul { margin: 0 -5px; padding: 0; list-style: none; user-select: none; } nav ul li { margin-bottom: 0; } nav > ul li > a, nav > ul li > strong { display: inline-block; } nav > ul li > a, nav > ul li > details summary, nav > ul li > strong { padding: 5px 10px; } nav > ul li > a.active, nav > ul li > details.active summary { font-weight: bold; } nav ul summary { cursor: pointer; } nav ul ul li > a { padding-left: 30px; } /* NAVIGATION IN HEADER */ header nav { margin-bottom: 0; } header nav ul { display: flex; flex-wrap: wrap; margin: 0; } header nav ul li { position: relative; } header nav ul li:first-child > a { padding-left: 0; } header nav ul li:last-child > a { padding-right: 0; } /* Subnavigation (Drop-Down): */ header nav ul ul { background: var(--content-background-color); display: none; position: absolute; top: 100%; left: 10px; padding: 0.5em; z-index: 1; border: var(--border); min-width: 100%; box-shadow: 0px 1px 5px rgba(0,0,0,0.2); } header nav ul li:hover ul, header nav ul li:focus-within ul { display: block; } header nav ul li strong { color: var(--link-color); text-decoration: underline; font-weight: normal; } header nav ul ul li a { display: block; padding-left: 0; padding-right: 0; } /* -------------------------------------------------------- */ /* CONTENT */ /* -------------------------------------------------------- */ main { line-height: 1.9; /* 日本語＋ドット絵フォントなので行間は広めに */ } main a, main a:visited { color: var(--link-color); } main a:hover, main a:focus { color: var(--link-color-hover); text-decoration-style: wavy; } main p, main .image, main .full-width-image, main .two-columns { margin: 0.75em 0; } main ol, main ul { margin: 0.5em 0; padding-left: 1.5em; } main ol li, main ul li { margin-bottom: 0.4em; line-height: 1.7; } main ol { padding-left: 2em; } main blockquote { background: rgba(0, 0, 0, 0.1); padding: 15px; margin: 1em 0; border-radius: 10px; } main pre { margin: 1em 0 1.5em; } main code { text-transform: none; } main center { margin: 1em 0; padding: 0 1em; } main hr { border: 0; border-top: var(--border); margin: 1.5em 0; } /* HEADINGS: */ main h1, main h2, main h3, main h4, main h5, main h6 { font-family: var(--heading-font); margin-bottom: 0; line-height: 1.5; } main h1:first-child, main h2:first-child, main h3:first-child, main h4:first-child, main h5:first-child, main h6:first-child { margin-top: 0; } main h1 { font-size: 1.5em; } main h2 { font-size: 1.4em; } main h3 { font-size: 1.3em; } main h4 { font-size: 1.2em; } main h5 { font-size: 1.1em; } main h6 { font-size: 1em; } /* COLUMNS: */ .two-columns { display: flex; } .two-columns > * { flex: 1 1 0; margin: 0; } .two-columns > *:first-child { padding-right: 0.75em; } .two-columns > *:last-child { padding-left: 0.75em; } /* -------------------------------------------------------- */ /* CONTENT IMAGES */ /* -------------------------------------------------------- */ .image { display: block; width: auto; height: auto; max-width: 100%; } .full-width-image { display: block; width: 100%; height: auto; } .images { display: flex; width: calc(100% + 5px + 5px); margin-left: -5px; margin-right: -5px; } .images img { width: 100%; height: auto; padding: 5px; margin: 0; overflow: hidden; } /* -------------------------------------------------------- */ /* ACCESSIBILITY */ /* -------------------------------------------------------- */ /* please do not remove this. */ #skip-to-content-link { position: fixed; top: 0; left: 0; display: inline-block; padding: 0.375rem 0.75rem; line-height: 1; font-size: 1.25rem; background-color: var(--content-background-color); color: var(--text-color); transform: translateY(-3rem); transition: transform 0.1s ease-in; z-index: 99999999999; } #skip-to-content-link:focus, #skip-to-content-link:focus-within { transform: translateY(0); } /* -------------------------------------------------------- */ /* MOBILE RESPONSIVE */ /* -------------------------------------------------------- */ /* CSS Code for devices < 800px */ @media (max-width: 800px) { body { font-size: 15px; } .layout { width: 100%; grid-template: "header" auto "ticker" auto "main" auto "aside" auto "footer" auto / 1fr; /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */ } .left-sidebar { display: none; } /* サイドバーはスマホでも表示する（本文の下に回る） */ .right-sidebar { grid-area: aside; } .sidebar-section:not(:last-child) { margin-bottom: 1.6em; } aside { border-bottom: 1px solid; padding: 9px; font-size: 0.9em; } nav { padding: 0; } nav > ul { padding-top: 0.5em; } /* 指で押せるように、リンクの当たり判定を広げる */ header nav ul { gap: 0.2em 0.4em; } nav > ul li > a, nav > ul li > details summary, nav > ul li > strong { display: flex; align-items: center; min-height: 44px; padding: 0 0.7em; } main { max-height: none; padding: 15px; } .images { flex-wrap: wrap; } .images img { width: 100%; } #skip-to-content-link { font-size: 1rem; } } /* -------------------------------------------------------- */ /* 追加スタイル（日記・プロフィール・リンク集） */ /* ここから下は自分で足した分です。自由に書き換えてOK。 */ /* -------------------------------------------------------- */ /* 日記の1件分 */ .entry { margin-bottom: 1.5em; } /* 日記の日付 */ .entry-date { font-family: var(--heading-font); font-size: 0.85em; opacity: 0.75; margin-top: 0.2em; } /* 自己紹介のプロフィール表 */ table.profile { border-collapse: collapse; margin: 0.5em 0 1em; } table.profile th, table.profile td { text-align: left; vertical-align: top; padding: 0.4em 1em 0.4em 0; } table.profile th { font-family: var(--heading-font); font-weight: normal; white-space: nowrap; opacity: 0.8; } /* リンク集 */ ul.linklist { list-style: none; padding-left: 0; } ul.linklist li { margin-bottom: 0.6em; } /* 日記のタイトルは、前の記事とすこし間をあける */ .entry h2 { margin-top: 1.2em; } .entry:first-of-type h2 { margin-top: 0.6em; } /* 日記の末尾のひとこと */ .note-more { font-size: 0.9em; opacity: 0.7; text-align: center; margin-top: 1.5em; } /* webring のナビ */ .wr-nav { font-family: var(--heading-font); font-size: 0.9em; } /* -------------------------------------------------------- */ /* 日記の書式（日付・天気・タイトル・タグ） */ /* -------------------------------------------------------- */ .entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6em; margin-top: 1.2em; } .entry:first-of-type .entry-head { margin-top: 0.6em; } .entry-head h2 { margin: 0; flex-basis: 100%; } .entry-date { font-family: var(--heading-font); font-size: 0.85em; opacity: 0.75; } .entry-weather { font-family: var(--heading-font); font-size: 0.8em; padding: 0 0.5em; border: 1px solid currentColor; border-radius: 3px; opacity: 0.75; } .entry-photo { max-width: 100%; height: auto; display: block; margin: 0.6em 0; } /* タグ */ .tags { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 0.6em; } .tags span { font-family: var(--heading-font); font-size: 0.8em; padding: 0.1em 0.7em; border-radius: 999px; background: var(--background-color); } /* -------------------------------------------------------- */ /* ページ内の目次・リスト・写真 */ /* -------------------------------------------------------- */ .toc { display: flex; flex-wrap: wrap; gap: 0.9em; font-size: 0.9em; padding: 0.6em 0.9em; margin-bottom: 0.5em; background: var(--background-color); } .toc span { opacity: 0.75; } /* 音楽などの一覧 */ ul.list { list-style: none; padding-left: 0; } ul.list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; padding: 0.35em 0; border-bottom: 1px dotted var(--background-color); } .list-meta { font-family: var(--heading-font); font-size: 0.8em; opacity: 0.7; font-variant-numeric: tabular-nums; } /* 1枚ごとのひとこと。名前と年の下に、幅いっぱいで回りこむ。 書かなかったものは ごと出力されないので、 ひとことの無い行はこれまでどおりの見た目のまま。 大きさは 16px から動かさず、濃さだけ落として本文と差をつけている （DotGothic16 は 16px の方眼で描かれていて、縮めるとぼやけるため）。 */ .list-note { flex-basis: 100%; margin-top: 0.15em; opacity: 0.78; line-height: 1.9; } /* 写真グリッド */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0.6em 0 1.2em; } .photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; } /* 画像がまだ無いところのプレースホルダー */ .ph { display: flex; align-items: center; justify-content: center; min-height: 100px; font-family: var(--heading-font); font-size: 0.8em; color: var(--text-color); opacity: 0.45; background: var(--background-color); } /* -------------------------------------------------------- */ /* スマホ（480px 以下） */ /* -------------------------------------------------------- */ @media (max-width: 480px) { body { /* 画面の端まで使えるように、外側の余白を詰める */ padding: 5px; } main, aside, .header-content { padding: 12px; } /* 見出しはドット絵フォントなので、小さくしすぎると読みにくい */ main h1 { font-size: 1.4em; } main h2 { font-size: 1.25em; } main h3 { font-size: 1.15em; } /* 日記の日付と天気は、タイトルの上に小さく並べる */ .entry-head { gap: 0.5em; } /* プロフィール表は項目名を折り返してよい */ /* 幅は「にがてなもの」の6文字（96px）＋右の余白（16px）から決めている。 box-sizing: border-box なので、余白のぶんも width に含める必要がある。 これより狭いと「にがてなも／の」で折り返す。 */ table.profile th { white-space: normal; width: 7.5em; } /* 写真は2列。1列だと大きすぎて縦に長くなる */ .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .ph { min-height: 84px; } /* 目次は縦積みにせず、詰めて折り返す */ .toc { gap: 0.5em 0.8em; font-size: 0.85em; } /* 音楽リストは、名前と年を上下に分ける */ ul.list li { flex-direction: column; gap: 0.1em; } /* 横に長いものがはみ出さないように */ pre, .site-button textarea { max-width: 100%; overflow-x: auto; } blockquote { margin-left: 0; margin-right: 0; } } /* -------------------------------------------------------- */ /* いま聴いている曲（now.js が中身を入れる） */ /* -------------------------------------------------------- */ .np p { margin: 0 0 0.15em; } .np-title { font-weight: bold; } .np-artist { font-size: 0.9em; } .np-year { font-family: var(--heading-font); font-size: 0.8em; opacity: 0.7; font-variant-numeric: tabular-nums; } /* きょうの日付 */ .st--date { font-family: var(--heading-font); font-size: 0.85em; opacity: 0.8; margin: 0 0 0.2em; } .st--sun { margin: 0; } /* ちいさなイコライザー */ .np-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; margin-bottom: 0.4em; } .np-eq i { width: 3px; height: 100%; background: currentColor; opacity: 0.55; transform-origin: bottom; animation: np-bounce 1.1s ease-in-out infinite; } .np-eq i:nth-child(2) { animation-delay: 0.15s; } .np-eq i:nth-child(3) { animation-delay: 0.35s; } .np-eq i:nth-child(4) { animation-delay: 0.05s; } .np-eq i:nth-child(5) { animation-delay: 0.25s; } @keyframes np-bounce { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } } /* 動きが苦手な人の設定を尊重して、その場合は止める */ @media (prefers-reduced-motion: reduce) { .np-eq i { animation: none; transform: scaleY(0.55); } } /* -------------------------------------------------------- */ /* ゲストブック（Atabook の埋め込み） */ /* -------------------------------------------------------- */ .guestbook-embed { display: block; width: 100%; height: 620px; border: 1px solid var(--background-color); background: #fff; } /* 枠に入りきらない分は、Atabook のページを別タブで開いて読んでもらう */ .gb-more { margin: 0.4em 0 0; font-size: 0.85em; text-align: right; } @media (max-width: 480px) { .guestbook-embed { height: 480px; } } /* -------------------------------------------------------- */ /* 横に流れるお知らせの帯（中身は now.js が入れる） */ /* -------------------------------------------------------- */ .ticker { grid-area: ticker; overflow: hidden; background: var(--content-background-color); border: var(--border); border-radius: var(--round-borders); } .ticker-inner { display: flex; width: max-content; animation: ticker-scroll 30s linear infinite; } /* 読みたい人のために、マウスを乗せているあいだは止まる */ .ticker:hover .ticker-inner, .ticker:focus-within .ticker-inner { animation-play-state: paused; } .ticker-inner span { padding: 0.45em 2.2em; font-family: var(--heading-font); font-size: 0.85em; white-space: nowrap; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* 動きが苦手な人の設定を尊重して、その場合は流さずに置いておく */ @media (prefers-reduced-motion: reduce) { .ticker { overflow-x: auto; } .ticker-inner { animation: none; } } /* -------------------------------------------------------- */ /* 工事中の札 */ /* 画像ではなく CSS で描いてあるので、色を変えたければ */ /* 下の2色（#ffd98a と var(--sidebar-text-color)）を直す。 */ /* -------------------------------------------------------- */ .construction { position: relative; display: block; padding: 1.1em 0.6em; border: 2px solid var(--sidebar-text-color); background: var(--content-background-color); text-align: center; font-family: var(--heading-font); font-size: 1.05em; line-height: 1.4; overflow: hidden; } .construction small { display: block; font-size: 0.62em; opacity: 0.65; letter-spacing: 0.04em; } /* 上下の縞。工事現場のバリケードの柄。 */ .construction::before, .construction::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background-image: repeating-linear-gradient( 45deg, #ffd98a 0 6px, var(--sidebar-text-color) 6px 12px ); animation: construction-move 0.9s linear infinite; } .construction::before { top: 0; } .construction::after { bottom: 0; } /* 45度の縞は、横に 12px x √2 ≒ 16.97px ずらすと元と同じ柄に戻る。 その1周期ぶんだけ動かすので、継ぎ目なく流れつづける。 */ @keyframes construction-move { from { background-position: 0 0; } to { background-position: 16.97px 0; } } /* 動きが苦手な人の設定を尊重して、その場合は止める */ @media (prefers-reduced-motion: reduce) { .construction::before, .construction::after { animation: none; } } /* -------------------------------------------------------- */ /* うちのバナー（88x31） */ /* -------------------------------------------------------- */ .site-button { align-items: flex-start; gap: 0.6em; margin: 0.6em 0 1.2em; } .site-button img { /* ドット絵なので、拡大縮小されてもぼやけないようにする */ image-rendering: pixelated; border: 0; } .site-button textarea { width: 100%; max-width: 34em; resize: vertical; padding: 0.5em; border: 1px solid var(--background-color); background: var(--background-color); color: var(--text-color); line-height: 1.5; } /* -------------------------------------------------------- */ /* 写真の入れ物 */ /* 写真そのものには何も加工していない（色も明るさも撮ったまま）*/ /* -------------------------------------------------------- */ .photo { display: block; overflow: hidden; line-height: 0; } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* -------------------------------------------------------- */ /* 記号のかざり */ /* */ /* 絵文字（🌸 など）ではなく記号（◆♪♡ など）を使っています。 */ /* 記号はサイトのフォントに入っているので、文字色をそのまま */ /* 継ぎ、見出しに置けばドット絵になり、どの端末でも同じ形に */ /* なります。絵文字は端末ごとに絵が変わり、色も浮きます。 */ /* */ /* 使える記号（両方のフォントで確認済み）: */ /* ◆ ◇ ○ ● ◎ △ ▽ □ ■ ★ ☆ ♪ ♭ ※ ▲ ▼ ← → ↑ ↓ 〜 ・ ＊ ♡ ♥ ☞ 〄 */ /* かざりを消したいときは、この節をまるごと削除してOKです。 */ /* -------------------------------------------------------- */ /* サイドバーの見出し。流れる帯の ◆ と揃えている。 */ .sidebar-title::before { content: "◆ "; color: var(--link-color); font-size: 0.85em; } /* 本文の中見出し */ main h2::before { content: "◇ "; color: var(--link-color); font-weight: normal; } /* h1 とページ内リンク先の見出しには付けない（うるさくなるため） */ main h1::before { content: none; } /* 箇条書きの点を、本文より薄い色にする */ main ul li::marker { color: var(--link-color); } /* now playing の曲名 */ .np-title::before { content: "♪ "; opacity: 0.7; } /* リンク集の外部リンクの後ろに矢印 */ ul.linklist a[target="_blank"]::after { content: " →"; opacity: 0.6; font-size: 0.85em; } /* -------------------------------------------------------- */ /* 外部リンクの矢印まわりの隙間 */ /* -------------------------------------------------------- */ ul.linklist a[target="_blank"]::after { margin-left: 0.15em; margin-right: 0.35em; } /* -------------------------------------------------------- */ /* イルカ（今いるページの目印） */ /* img/dolphin.gif は 32x32・4コマのアニメーション。 */ /* 全部のページに出したいときは、下の a.active を a に変える。 */ /* -------------------------------------------------------- */ header nav a { display: inline-flex; align-items: center; gap: 0.3em; } header nav a.active::before { content: ""; display: inline-block; width: 32px; height: 20px; background-image: url("img/dolphin.gif"); background-size: 32px 20px; background-repeat: no-repeat; /* ドット絵なので、縮小してもぼやけないようにする */ image-rendering: pixelated; } /* 動きが苦手な人の設定のときは、静止した画像に差し替えられないので イルカ自体を出さない（GIF は CSS からコマ送りを止められないため）。 */ @media (prefers-reduced-motion: reduce) { header nav a.active::before { display: none; } } /* -------------------------------------------------------- */ /* カレンダー（calendar.js が今月のものを描く） */ /* -------------------------------------------------------- */ .cal-month { margin: 0 0 0.3em; text-align: center; font-family: var(--heading-font); font-size: 0.95em; } .cal-table { width: 100%; border-collapse: collapse; font-size: 0.8em; line-height: 1.5; /* 数字の幅を揃えて、桁がガタつかないようにする */ font-variant-numeric: tabular-nums; } .cal-table th, .cal-table td { text-align: center; padding: 1px 0; font-weight: normal; } .cal-table th { font-family: var(--heading-font); font-size: 0.9em; border-bottom: 1px solid var(--background-color); padding-bottom: 2px; } .cal-table .sun { color: var(--sunday-color); } .cal-table .sat { color: var(--link-color); } /* 今日 */ .cal-table .cal-today { background: var(--link-color); color: #fff; font-weight: bold; border-radius: 2px; } /* -------------------------------------------------------- */ /* 見出しのうしろの記号 */ /* */ /* 全部の見出しには付けず、意味の合うところだけに置いている。 */ /* 増やしたいときは、下と同じ形で1つ足す。 */ /* セレクタ::after { content: " ♪"; } */ /* -------------------------------------------------------- */ main h2#music::after, .np-section .sidebar-title::after { color: var(--link-color); font-size: 0.8em; font-weight: normal; /* 記号の前に少しだけ間をあける */ margin-left: 0.15em; } /* サイトの名前のうしろ（カニ） */ .header-title::after { content: ""; display: inline-block; width: 32px; height: 32px; background-image: url("img/stamp-crab.gif"); background-size: 32px 32px; background-repeat: no-repeat; vertical-align: -0.35em; margin-left: 0.25em; image-rendering: pixelated; } /* 聴いた音楽 */ main h2#music::after { content: " ♪"; } /* now playing */ .np-section .sidebar-title::after { content: " ♭"; } /* -------------------------------------------------------- */ /* スタンプ（ドット絵の小さなアイコン） */ /* */ /* 16x16 の絵を2倍（32px）で表示している。整数倍なので */ /* ドットが潰れない。大きさを変えるなら 16 / 32 / 48 のように */ /* 16の倍数にすること。中途半端な数にすると絵が崩れる。 */ /* */ /* 貼り先を増やすときは、下と同じ形で1つ足す。 */ /* セレクタ::before { background-image: url("img/stamp-xxx.gif"); } */ /* -------------------------------------------------------- */ .stamp::before, main h1#diary::before, main h2#profile::before, main h2#likes::before, main h2#guestbook::before, main h2#about::before, main h2#photos::before, main h2#collection::before, main h2#music::before, main h2#links::before, main h2#webring::before, main h2#mybanner::before, .sidebar-title.st--welcome::before, .sidebar-title.st--today::before, .sidebar-title.st--np::before { content: ""; display: inline-block; width: 32px; height: 32px; background-size: 32px 32px; background-repeat: no-repeat; vertical-align: -0.4em; margin-right: 0.2em; /* ドット絵なので、拡大してもぼやけないようにする */ image-rendering: pixelated; } /* サイドバーは見出しが小さいので、スタンプも1倍（16px）にする */ .sidebar-title.st--welcome::before, .sidebar-title.st--today::before, .sidebar-title.st--np::before { width: 16px; height: 16px; background-size: 16px 16px; vertical-align: -0.2em; } /* ---- どこに何を貼るか ---- */ /* 日記 */ main h1#diary::before { background-image: url("img/stamp-wave.gif"); } /* 自己紹介 */ main h2#profile::before { background-image: url("img/stamp-flower.gif"); } main h2#likes::before { background-image: url("img/stamp-soda.gif"); } main h2#guestbook::before { background-image: url("img/stamp-letter.gif"); } main h2#about::before { background-image: url("img/stamp-palm.gif"); } /* 写真 */ main h2#photos::before { background-image: url("img/stamp-camera.gif"); } main h2#collection::before { background-image: url("img/stamp-shell.gif"); } /* リスト */ main h2#music::before { background-image: url("img/stamp-cassette.gif"); } main h2#links::before { background-image: url("img/stamp-jellyfish.gif"); } main h2#webring::before { background-image: url("img/stamp-ring.gif"); } main h2#mybanner::before { background-image: url("img/stamp-starfish.gif"); } /* サイドバー */ .sidebar-title.st--welcome::before { background-image: url("img/stamp-jellyfish.gif"); } .sidebar-title.st--today::before { background-image: url("img/stamp-cloud.gif"); } .sidebar-title.st--np::before { background-image: url("img/stamp-cassette.gif"); } /* 自己紹介のページ見出し */ main h1#intro::before { content: ""; display: inline-block; width: 32px; height: 32px; background-size: 32px 32px; background-repeat: no-repeat; vertical-align: -0.4em; margin-right: 0.2em; image-rendering: pixelated; background-image: url("img/stamp-palm.gif"); } /* ゲストブックの封筒は動く（イルカと同じ4コマのGIF）。 ハートが封筒から昇っていく。 */ main h2#guestbook::before { background-image: url("img/stamp-letter.gif"); } /* 動きが苦手な人の設定のときは、同じ絵の静止版に差し替える */ /* 動きが苦手な人の設定のときは、スタンプを全部 静止画（.png）に差し替える。 GIF は CSS からコマ送りを止められないので、同じ絵の止まっている版を用意してある。 */ @media (prefers-reduced-motion: reduce) { .header-title::after { background-image: url("img/stamp-crab.png"); } main h1#intro::before { background-image: url("img/stamp-palm.png"); } main h1#diary::before { background-image: url("img/stamp-wave.png"); } main h2#profile::before { background-image: url("img/stamp-flower.png"); } main h2#likes::before { background-image: url("img/stamp-soda.png"); } main h2#guestbook::before { background-image: url("img/stamp-letter.png"); } main h2#about::before { background-image: url("img/stamp-palm.png"); } main h2#photos::before { background-image: url("img/stamp-camera.png"); } main h2#collection::before { background-image: url("img/stamp-shell.png"); } main h2#music::before { background-image: url("img/stamp-cassette.png"); } main h2#links::before { background-image: url("img/stamp-jellyfish.png"); } main h2#webring::before { background-image: url("img/stamp-ring.png"); } main h2#mybanner::before { background-image: url("img/stamp-starfish.png"); } .sidebar-title.st--welcome::before { background-image: url("img/stamp-jellyfish.png"); } .sidebar-title.st--today::before { background-image: url("img/stamp-cloud.png"); } .sidebar-title.st--np::before { background-image: url("img/stamp-cassette.png"); } } /* -------------------------------------------------------- */ /* 追加のスタンプ */ /* -------------------------------------------------------- */ main h1#photopage::before, main h1#listpage::before, main h1#notfound::before, .sidebar-title.st--history::before, .sidebar-title.st--calendar::before, .sidebar-title.st--tags::before, .sidebar-title.st--friends::before { content: ""; display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; margin-right: 0.2em; } /* 本文の見出しは2倍（32px） */ main h1#photopage::before, main h1#listpage::before, main h1#notfound::before { width: 32px; height: 32px; background-size: 32px 32px; vertical-align: -0.4em; } /* サイドバーは等倍（16px） */ .sidebar-title.st--history::before, .sidebar-title.st--calendar::before, .sidebar-title.st--tags::before, .sidebar-title.st--friends::before { width: 16px; height: 16px; background-size: 16px 16px; vertical-align: -0.2em; } main h1#photopage::before { background-image: url("img/stamp-lighthouse.gif"); } main h1#listpage::before { background-image: url("img/stamp-anchor.gif"); } main h1#notfound::before { background-image: url("img/stamp-ring.gif"); } .sidebar-title.st--history::before { background-image: url("img/stamp-hourglass.gif"); } .sidebar-title.st--calendar::before { background-image: url("img/stamp-moon.gif"); } .sidebar-title.st--tags::before { background-image: url("img/stamp-seaglass.gif"); } .sidebar-title.st--friends::before { background-image: url("img/stamp-boat.gif"); } /* 「きょう」は天気で絵が変わる（now.js がクラスを付ける）。 クラスが付かなかったときのために、既定はおひさま。 */ .sidebar-title.st--today::before { background-image: url("img/stamp-sun.gif"); } .sidebar-title.st--today.wx-sun::before { background-image: url("img/stamp-sun.gif"); } .sidebar-title.st--today.wx-cloudy::before{ background-image: url("img/stamp-cloudy.gif"); } .sidebar-title.st--today.wx-rain::before { background-image: url("img/stamp-rain.gif"); } /* 動きが苦手な人の設定のときは、ここも静止画にする */ @media (prefers-reduced-motion: reduce) { main h1#photopage::before { background-image: url("img/stamp-lighthouse.png"); } main h1#listpage::before { background-image: url("img/stamp-anchor.png"); } main h1#notfound::before { background-image: url("img/stamp-ring.png"); } .sidebar-title.st--history::before { background-image: url("img/stamp-hourglass.png"); } .sidebar-title.st--calendar::before { background-image: url("img/stamp-moon.png"); } .sidebar-title.st--tags::before { background-image: url("img/stamp-seaglass.png"); } .sidebar-title.st--friends::before { background-image: url("img/stamp-boat.png"); } .sidebar-title.st--today::before, .sidebar-title.st--today.wx-sun::before { background-image: url("img/stamp-sun.png"); } .sidebar-title.st--today.wx-cloudy::before { background-image: url("img/stamp-cloudy.png"); } .sidebar-title.st--today.wx-rain::before { background-image: url("img/stamp-rain.png"); } } /* -------------------------------------------------------- */ /* ヘッダー右の生きものたち */ /* 増やす・減らすときは layout.js の を足し引きして、 */ /* 下に .sea--なまえ の1行を足す。 */ /* -------------------------------------------------------- */ .header-content { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; } .header-sea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sea { display: inline-block; width: 32px; height: 32px; background-size: 32px 32px; background-repeat: no-repeat; image-rendering: pixelated; } .sea--turtle { background-image: url("img/stamp-turtle.gif"); } .sea--penguin { background-image: url("img/stamp-penguin.gif"); } .sea--ray { background-image: url("img/stamp-ray.gif"); } .sea--seal { background-image: url("img/stamp-seal.gif"); } .sea--puffer { background-image: url("img/stamp-puffer.gif"); } .sea--octopus { background-image: url("img/stamp-octopus.gif"); } .sea--gull { background-image: url("img/stamp-gull.gif"); } .sea--shark { background-image: url("img/stamp-shark.gif"); } /* サイト名の横はクジラ（カニから変更） */ .header-title::after { background-image: url("img/stamp-whale.gif"); } /* 狭い画面では、生きものをナビの下に1列で並べる。 32px は 16px の絵をちょうど2倍にした大きさなので、ドットが潰れない。 入りきらないときは折り返す。 */ @media (max-width: 700px) { .header-sea { width: 100%; justify-content: center; gap: 6px; margin-top: 2px; } } @media (prefers-reduced-motion: reduce) { .header-title::after { background-image: url("img/stamp-whale.png"); } .sea--turtle { background-image: url("img/stamp-turtle.png"); } .sea--penguin { background-image: url("img/stamp-penguin.png"); } .sea--ray { background-image: url("img/stamp-ray.png"); } .sea--seal { background-image: url("img/stamp-seal.png"); } .sea--puffer { background-image: url("img/stamp-puffer.png"); } .sea--octopus { background-image: url("img/stamp-octopus.png"); } .sea--gull { background-image: url("img/stamp-gull.png"); } .sea--shark { background-image: url("img/stamp-shark.png"); } } /* -------------------------------------------------------- */ /* 中間案：ナビと箇条書きもドットにする */ /* */ /* 短い言葉ばかりの場所だけをドットにしている。長い文章は */ /* 丸ゴシックのまま（ドットだと画数の多い漢字がつぶれるため）。*/ /* 元に戻すときは、この節をまるごと削除する。 */ /* -------------------------------------------------------- */ header nav, .toc, main ul li, main ol li, .sidebar-section ul li { font-family: var(--heading-font); } /* （本文もドットになったので、大きさをそろえる調整は不要になった） */ /* -------------------------------------------------------- */ /* ページ冒頭のあいさつ（.lead） */ /* */ /* ここだけドットの字にしている。短いあいさつなので漢字が */ /* つぶれず、見出しからの流れがそのままつながる。 */ /* 他のページでも使いたいときは、段落を
*/ /* で囲むだけ。 */ /* -------------------------------------------------------- */ .lead { /* 本文もドットになったので、字の種類での差はなし。 あいさつ部分として行間だけ少し広げている。 */ line-height: 2; } .lead p { margin-bottom: 0.9em; } /* -------------------------------------------------------- */ /* スマホでのサイドバーの出し分け */ /* */ /* スマホでは本文の下にサイドバーが回るので、どのページでも */ /* 更新履歴や天気が毎回ついてきて長くなる。 */ /* 自己紹介のページでだけ出して、日記・写真・リストでは出さない。*/ /* （パソコンの画面では今まで通り、全ページに出る） */ /* -------------------------------------------------------- */ @media (max-width: 800px) { body:not(.page-index) .right-sidebar { display: none; } } /* 雪の日 */ .sidebar-title.st--today.wx-snow::before { background-image: url("img/stamp-snow.gif"); } @media (prefers-reduced-motion: reduce) { .sidebar-title.st--today.wx-snow::before { background-image: url("img/stamp-snow.png"); } } /* -------------------------------------------------------- */ /* 日の出・日の入りと、月の満ち欠け（sky.js が入れます） */ /* -------------------------------------------------------- */ /* 「日の出　　05:15」のように、名前と時刻を2列にそろえる。 1列目を 5em（＝全角5文字ぶん）に固定してあるので、 「日の出」と「日の入り」で文字数がちがっても数字の位置がそろう。 スマホでサイドバーが画面いっぱいに広がっても、離ればなれにならない。 */ .st--line { display: grid; grid-template-columns: 5em max-content; align-items: baseline; margin: 0; opacity: 0.85; } .st--line span:last-child { font-family: var(--heading-font); font-variant-numeric: tabular-nums; } .st--moon { display: flex; align-items: center; gap: 6px; margin: 0.6em 0 0; } .st--moonicon { flex: 0 0 16px; width: 16px; height: 16px; background-repeat: no-repeat; background-position: center; background-size: 16px 16px; image-rendering: pixelated; } /* 月の形は8種類。sky.js がその日の形のクラスを1つ付けます。 */ .st--moonicon.moon-new { background-image: url("img/moon-0-new.gif"); } .st--moonicon.moon-wax-crescent { background-image: url("img/moon-1-wax-crescent.gif"); } .st--moonicon.moon-first-quarter { background-image: url("img/moon-2-first-quarter.gif"); } .st--moonicon.moon-wax-gibbous { background-image: url("img/moon-3-wax-gibbous.gif"); } .st--moonicon.moon-full { background-image: url("img/moon-4-full.gif"); } .st--moonicon.moon-wane-gibbous { background-image: url("img/moon-5-wane-gibbous.gif"); } .st--moonicon.moon-last-quarter { background-image: url("img/moon-6-last-quarter.gif"); } .st--moonicon.moon-wane-crescent { background-image: url("img/moon-7-wane-crescent.gif"); } /* 動きが苦手な人の設定のときは、きらめかない静止画にする */ @media (prefers-reduced-motion: reduce) { .st--moonicon.moon-new { background-image: url("img/moon-0-new.png"); } .st--moonicon.moon-wax-crescent { background-image: url("img/moon-1-wax-crescent.png"); } .st--moonicon.moon-first-quarter { background-image: url("img/moon-2-first-quarter.png"); } .st--moonicon.moon-wax-gibbous { background-image: url("img/moon-3-wax-gibbous.png"); } .st--moonicon.moon-full { background-image: url("img/moon-4-full.png"); } .st--moonicon.moon-wane-gibbous { background-image: url("img/moon-5-wane-gibbous.png"); } .st--moonicon.moon-last-quarter { background-image: url("img/moon-6-last-quarter.png"); } .st--moonicon.moon-wane-crescent { background-image: url("img/moon-7-wane-crescent.png"); } } /* -------------------------------------------------------- */ /* 隠しリンク */ /* 本文の中の記号ひとつだけをリンクにするための指定。 */ /* 色も下線も本文のまま。カーソルの形だけが手がかりになる。 */ /* -------------------------------------------------------- */ main a.quiet-link, main a.quiet-link:visited, main a.quiet-link:hover, main a.quiet-link:focus { color: inherit; text-decoration: none; position: relative; } /* 指で押せるように、見えない当たり判定を文字のまわりに広げる。 位置指定なので、まわりの文章はずれない。 大きくしすぎると、上の行を触ったときに反応してしまうので、 横 44px・縦 32px までにとどめている。 */ main a.quiet-link::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 32px; transform: translate(-50%, -50%); } /* -------------------------------------------------------- */ /* ヘッダーの生きものは、押すと反応する */ /* */ /* steps() を使っているのは、なめらかに動かすとドットが */ /* 中途半端な位置に来てぼやけるため。カクカク動かすと、 */ /* 昔のゲームのような動きになって絵と釣り合う。 */ /* */ /* 生きものを増やしたときは、下に @keyframes を1つと */ /* .sea--なまえ.sea-act の1行を足す。 */ /* -------------------------------------------------------- */ .sea { position: relative; /* タコの墨（::after）を置く基準 */ cursor: pointer; } /* 押せることが分かるように、乗せたときだけ少し浮かせる */ .sea:hover { transform: translateY(-2px); } /* カメ：首を引っこめて、しばらくしてから出す */ @keyframes sea-turtle { 0% { transform: none; } 25% { transform: scale(1.05, 0.7) translateY(5px); } 70% { transform: scale(1.05, 0.7) translateY(5px); } 100% { transform: none; } } .sea--turtle.sea-act { animation: sea-turtle 1s steps(3) both; } /* ペンギン：二回はねる */ @keyframes sea-penguin { 0% { transform: none; } 20% { transform: translateY(-13px); } 40% { transform: none; } 60% { transform: translateY(-8px); } 80% { transform: none; } 100% { transform: none; } } .sea--penguin.sea-act { animation: sea-penguin 0.8s steps(4) both; } /* エイ：右へすーっと泳いで、上下しながら戻ってくる。 動かす幅は 14px まで。生きものは 42px 間隔で並んでいるので、 これより大きくすると隣に重なる。 */ @keyframes sea-ray { 0% { transform: none; } 50% { transform: translate(14px, -5px); } 100% { transform: none; } } .sea--ray.sea-act { animation: sea-ray 1.1s steps(7) both; } /* アザラシ：ごろんと一回転 */ @keyframes sea-seal { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .sea--seal.sea-act { animation: sea-seal 0.9s steps(8) both; } /* フグ：ふくらんで、しばらくしてしぼむ */ @keyframes sea-puffer { 0% { transform: scale(1); } 30% { transform: scale(1.75); } 65% { transform: scale(1.75); } 100% { transform: scale(1); } } .sea--puffer.sea-act { animation: sea-puffer 1.1s steps(3) both; } /* タコ：墨をはいて、その勢いで後ろへさがる */ @keyframes sea-octopus { 0% { transform: none; } 30% { transform: translate(9px, 2px); } 100% { transform: none; } } .sea--octopus.sea-act { animation: sea-octopus 0.9s steps(4) both; } .sea--octopus::after { content: ""; position: absolute; left: -1px; top: 8px; width: 15px; height: 15px; border-radius: 50%; background: #46586e; opacity: 0; pointer-events: none; } @keyframes sea-ink { 0% { opacity: 0; transform: scale(0.25) translate(8px, 0); } 22% { opacity: 0.9; transform: scale(1) translate(0, -2px); } 55% { opacity: 0.65; transform: scale(1.7) translate(-7px, -5px); } 100% { opacity: 0; transform: scale(2.6) translate(-15px, -9px); } } .sea--octopus.sea-act::after { animation: sea-ink 0.9s steps(4) both; } /* カモメ：飛び立って、少し先に降りる */ @keyframes sea-gull { 0% { transform: none; } 40% { transform: translate(7px, -19px); } 70% { transform: translate(11px, -22px); } 100% { transform: none; } } .sea--gull.sea-act { animation: sea-gull 1.2s steps(5) both; } /* サメ：さっと横切って、何事もなかったように戻る */ @keyframes sea-shark { 0% { transform: none; } 20% { transform: translateX(26px); } 32% { transform: translateX(26px); } 100% { transform: none; } } .sea--shark.sea-act { animation: sea-shark 0.8s steps(5) both; } /* 動きを控える設定の人には、反応を出さない。 押しても何も起きないだけで、情報は何も失われない。 */ @media (prefers-reduced-motion: reduce) { .sea:hover { transform: none; } .sea.sea-act, .sea.sea-act::after { animation: none; } } /* -------------------------------------------------------- */ /* 自己紹介：プロフィール表の右に写真を並べる */ /* */ /* 表は中身のぶんの幅しかないので、本文の右3分の2が空く。 */ /* そこに写真を1枚入れて、横に並べている。 */ /* -------------------------------------------------------- */ .profile-row { display: flex; align-items: flex-start; gap: 1.5em; flex-wrap: wrap; /* 入りきらなければ写真が下に回る */ margin-bottom: 1.2em; } /* 表は伸ばさない。伸ばすと項目名と中身が離れすぎて読みにくくなる。 */ .profile-row table.profile { flex: 0 1 auto; margin: 0.5em 0 0; } .profile-photo { /* 基準の幅は小さめ（200px）にしてある。ここを大きくすると、 ほんの数ピクセル足りないだけで写真が表の下へ落ちる。 実際 280px のときは、本文が 670px の画面で 1px 足りずに落ちていた。 */ flex: 1 1 200px; /* これが無いと、写真の最小幅が絵の実寸（720px）に引っぱられて 480px より細くなれない。すると本文が 840px ほど無いと横に並べず、 ノートPCの画面でも表の下に落ちていた。 0 にすると、狭いときは写真のほうが縮んで横並びのまま粘る。 */ min-width: 0; max-width: 480px; /* 横長の写真なので、正方形のときより広く取っている */ margin: 0.5em 0 0; } /* 表の横に並べられない幅では、写真を出さない。 この写真は表の右のあきを埋めるために置いているので、 下に回ってしまうと、ただページが縦に長くなるだけになる。 出す・出さないは本当は「本文の幅」で決まるが、本文の幅は画面の幅と そのままは比例しない。801px を境にサイドバーが本文の右から下へ移るので、 そこで本文だけが急に広くなる。だから条件が2つに分かれている。 境目は、写真が 240px より細くなるところに置いた。 これより細いと、表の横にあっても写真として見られない大きさになる。 ・画面 650px 以下 … サイドバーは下。スマホはここに入る ・画面 801〜860px … サイドバーが右にいるぶん、本文だけが狭い */ @media (max-width: 650px), (min-width: 801px) and (max-width: 860px) { .profile-photo { display: none; } } .profile-photo img { display: block; width: 100%; height: auto; } /* 説明文は 16px のまま。DotGothic16 は 16px の方眼で描かれているので、 小さくするとドットが画面の画素とずれてぼやける。 本文より引っこめたいので、大きさではなく濃さで差をつけている。 */ .profile-photo figcaption { margin-top: 0.6em; opacity: 0.75; line-height: 1.9; }