等）
* - 混在 : 4 記事
* 要素単位では表の 25%、コードの 22% が生 HTML 側にある。
*
* このため本文の装飾は .wp-block-* クラスではなく
* 「.entry-content 配下の素の要素セレクタ」で書き、両系統に等しく効かせる。
* 色・字送りなどのトークンは theme.json 側の CSS 変数を参照する。
*/
/* ==========================================================================
1. 本文の土台
========================================================================== */
.entry-content {
overflow-wrap: break-word;
}
/* 本文の縦リズム。ブロックテーマの blockGap が効かない生 HTML にも効かせる */
.entry-content > * + * {
margin-top: 1.5rem;
}
/* ==========================================================================
2. 見出し
========================================================================== */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
line-height: 1.45;
font-weight: 700;
}
.entry-content h2 {
margin-top: 3.5rem;
padding-bottom: 0.4em;
border-bottom: 3px solid var(--wp--preset--color--accent);
}
.entry-content h3 {
margin-top: 2.5rem;
padding-left: 0.6em;
border-left: 5px solid var(--wp--preset--color--accent);
}
.entry-content h4 {
margin-top: 2rem;
color: var(--wp--preset--color--contrast-2);
}
/* 見出し直後の要素は詰める */
.entry-content :is( h2, h3, h4 ) + * {
margin-top: 0.9rem;
}
/* ==========================================================================
3. リスト
========================================================================== */
/*
* 本文のリストの字下げ。
*
* pn- が付いたリストは部品側が自分で余白を決めるので対象から外す。
* `.entry-content :is( ul, ol )` は詳細度 (0,1,1) があるため、
* 部品側を `.pn-toc__list` のような素のクラス (0,1,0) で書くと負ける。
* 部品の側で毎回 `.entry-content` から書くより、一般規則の側で外すほうが安全。
*
* 部品の中にある「ふつうのリスト」（pn-note の中の箇条書きなど）は
* class を持たないので、これまでどおり字下げされる。
*/
.entry-content :is( ul, ol ):not( [class*="pn-"] ) {
padding-left: 1.6em;
}
/*
* 項目どうしの間隔。こちらも pn- の部品は対象から外す。
*
* 横並びのシェアボタンに margin-top が付くと、2 個目以降だけ下へずれて
* 1 個目の高さだけが伸びる（flex の stretch と噛み合う）。
*/
.entry-content :not( [class*="pn-"] ) > li + li {
margin-top: 0.4em;
}
.entry-content li > :is( ul, ol ) {
margin-top: 0.4em;
}
/* ==========================================================================
4. 表
--------------------------------------------------------------------------
Cocoon は the_content フィルタで を
後付けしていた（DB には無い）。同等の機能をテーマ側で持つ必要がある。
ラッパーは functions.php の personalnote_wrap_tables() が付ける。
========================================================================== */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* スクロールできることを影で示す */
background:
linear-gradient( to right, var(--wp--preset--color--base) 30%, rgba( 255, 255, 255, 0 ) ),
linear-gradient( to right, rgba( 255, 255, 255, 0 ), var(--wp--preset--color--base) 70% ) 100% 0,
radial-gradient( farthest-side at 0 50%, rgba( 0, 0, 0, 0.12 ), rgba( 0, 0, 0, 0 ) ),
radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, 0.12 ), rgba( 0, 0, 0, 0 ) ) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
line-height: 1.6;
}
.entry-content :is( th, td ) {
padding: 0.6em 0.85em;
border: 1px solid var(--wp--preset--color--line);
text-align: left;
vertical-align: top;
}
.entry-content thead th {
background-color: var(--wp--preset--color--base-2);
font-weight: 700;
white-space: nowrap;
}
.entry-content tbody tr:nth-child( even ) {
background-color: #fafbfc;
}
/* 表の中のコードは折り返さず、セルを不必要に広げない */
.entry-content td code {
white-space: nowrap;
}
/* wp-block-table の figure はラッパーを兼ねるので余白を殺す */
.entry-content figure.wp-block-table {
margin: 0;
}
/* ==========================================================================
5. コード
--------------------------------------------------------------------------
全 266 記事で
/ は 36,776 箇所。このサイトの主役なので
ブロック版（pre.wp-block-code）と生 HTML 版（裸の pre）の両方を同じ見た目にする。
========================================================================== */
.entry-content pre {
position: relative;
padding: 1.1rem;
overflow-x: auto;
background-color: var(--wp--preset--color--base-2);
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.875rem;
line-height: 1.7;
tab-size: 4;
}
.entry-content pre code {
display: block;
padding: 0;
background: none;
border: none;
font-family: inherit;
font-size: inherit;
white-space: pre;
}
/* 文中のインラインコード */
.entry-content :not( pre ) > code {
padding: 0.12em 0.4em;
background-color: var(--wp--preset--color--base-2);
border: 1px solid var(--wp--preset--color--line);
border-radius: 4px;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.9em;
word-break: break-all;
}
/*
* 言語ラベル。本文で使われている言語は bash / powershell / yaml / text /
* server / ini / python / nginx の 8 種類（実測）。
*/
/* ラベルを出すブロックだけ、その分の余白を上に足す */
.entry-content pre:has( > code[class*="language-"] ) {
padding-top: 1.9rem;
}
/* ラベルは左上。右上はコピーボタンが使う */
.entry-content pre:has( > code[class*="language-"] )::before {
position: absolute;
top: 0;
left: 0;
padding: 0.15em 0.6em;
border-bottom-right-radius: 6px;
background-color: var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
content: "code";
}
.entry-content pre:has( > code.language-bash )::before { content: "bash"; }
.entry-content pre:has( > code.language-powershell )::before { content: "PowerShell"; }
.entry-content pre:has( > code.language-yaml )::before { content: "YAML"; }
.entry-content pre:has( > code.language-ini )::before { content: "ini"; }
.entry-content pre:has( > code.language-python )::before { content: "Python"; }
.entry-content pre:has( > code.language-nginx )::before { content: "nginx"; }
.entry-content pre:has( > code.language-text )::before { content: "text"; }
.entry-content pre:has( > code.language-server )::before { content: "server"; }
/*
* 補足: 以前はコードと表だけを本文幅より広くはみ出させていたが、
* 右サイドバーを持つレイアウトにしたため、はみ出すとサイドバーに重なる。
* 本文カラム（760px）の幅に収め、それを超える分は横スクロールで見せる。
*/
/* ==========================================================================
5-5. ボタン（wp-block-button）
--------------------------------------------------------------------------
色と角丸は theme.json の styles.elements.button が与える。
ここで足すのは**並びと大きさ**だけ。
なぜ必要か:
ブロックテーマは、コアのブロック用 CSS を「そのブロックを検出したとき」にだけ読む。
記事が生 HTML（ブロックコメント無し）だと検出されず、ボタンの
display / text-align / box-sizing が当たらない。
結果、リンクが display:inline のままになり、1 文字ずつ縦に折り返す。
本番は 274 記事中 1 本しかボタンを使っておらず、それはブロック形式なので
実際には起きない。ただし「記事が 2 通りの書き方で混在するからブロックに依存しない」
というこのテーマの前提を、ボタンだけ守れていなかったので塞いでおく。
========================================================================== */
.entry-content .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-block: 1.5rem;
}
.entry-content .wp-block-button {
max-width: 100%;
}
.entry-content :is( .wp-block-button__link, .wp-element-button ) {
display: inline-block;
box-sizing: border-box;
max-width: 100%;
text-align: center;
text-decoration: none;
word-break: break-word;
line-height: 1.5;
cursor: pointer;
}
/* 枠線だけのスタイル（is-style-outline）は theme.json の色指定を打ち消す */
.entry-content .is-style-outline > :is( .wp-block-button__link, .wp-element-button ) {
border: 2px solid currentColor;
background-color: transparent;
color: var(--wp--preset--color--accent);
}
/* ==========================================================================
6. 引用・区切り線
========================================================================== */
.entry-content blockquote {
padding-left: 1.2rem;
border-left: 4px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast-2);
}
.entry-content hr {
height: 0;
margin-block: 3rem;
border: 0;
border-top: 1px solid var(--wp--preset--color--line);
}
/* ==========================================================================
7. 本文中のボックス
--------------------------------------------------------------------------
実測で本文に残っているボックス系クラスは以下の 2 系統。
(a) Cocoon 専用ブロックが出力する複合クラス（6 記事）
例: class="wp-block-cocoon-blocks-icon-box common-icon-box block-box memo-box"
(b) 生 HTML 記事で使われている素のクラス
.warning（9 記事）/ .tip（7 記事）/ .chapter-meta（8 記事）ほか
テーマを移しても本文には残るため、同名クラスに CSS を用意する。
========================================================================== */
.entry-content :is(
.block-box,
.common-icon-box,
.blank-box,
.memo-box,
.information-box,
.warning-box,
.danger-box,
.warning,
.tip,
.note,
.chapter-meta
) {
padding: 1.1rem 1.2rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
}
/* ボックス内の最初と最後の要素の余白を殺す */
.entry-content :is( .block-box, .warning, .tip, .note, .chapter-meta ) > :first-child {
margin-top: 0;
}
/* 種類ごとの色分け（左のラインで区別する） */
.entry-content :is( .information-box, .note ) {
border-left: 5px solid var(--wp--preset--color--accent);
}
.entry-content :is( .memo-box, .tip ) {
border-left: 5px solid #16a34a;
background-color: #f2fbf5;
}
.entry-content :is( .warning-box, .warning ) {
border-left: 5px solid #f59e0b;
background-color: #fffaf0;
}
.entry-content .danger-box {
border-left: 5px solid #dc2626;
background-color: #fef4f4;
}
.entry-content .blank-box {
background-color: transparent;
}
.entry-content .chapter-meta {
font-size: 0.9375rem;
color: var(--wp--preset--color--contrast-2);
}
/* ==========================================================================
8. 画像
========================================================================== */
.entry-content :is( img, video ) {
max-width: 100%;
height: auto;
}
.entry-content figure {
margin-inline: 0;
}
/* ==========================================================================
9. Font Awesome 4
--------------------------------------------------------------------------
本文に が 388 箇所（82 記事）直書きされている。
webfont は functions.php が「本文に fa fa- を含むページでだけ」読み込む。
ここでは配置の調整のみ行う。
========================================================================== */
.entry-content .fa {
margin-right: 0.25em;
color: var(--wp--preset--color--accent);
}
/* ==========================================================================
8-9. 管理者にだけ見せる注意（pn-notice-admin）
--------------------------------------------------------------------------
本文の HTML を自動補正したことを、編集権限のある人にだけ伝える。
読者には出さない。黙って直すと記事側がいつまでも直らない。
========================================================================== */
.pn-notice-admin {
margin-block: 2rem;
padding: 0.8rem 1rem;
border: 1px dashed #c05621;
border-radius: 4px;
background: #fffaf5;
color: #9c4221;
font-size: 0.875rem;
}
.pn-notice-admin p {
margin: 0;
}
/* ==========================================================================
8-95. スマートフォンの下部バー（pn-mobilebar）
--------------------------------------------------------------------------
ヘッダーは固定していないので、読んでいる間は何も出ていない。
代わりに長い記事では先頭まで戻らないとメニューに触れないので、それを補う。
載せるのはグローバルナビではなく「読書の道具」。
記事の途中にいる読者が欲しいのは HOME や About ではない。
下スクロールで隠れ、上スクロールで出る。600px 以下でのみ表示する。
========================================================================== */
.pn-mobilebar {
display: none;
}
@media ( max-width: 600px ) {
.pn-mobilebar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 50; /* ナビの全画面オーバーレイ（core は 100000 前後）より下 */
display: flex;
justify-content: space-around;
padding-bottom: env( safe-area-inset-bottom, 0 );
border-top: 1px solid var(--wp--preset--color--line);
background: rgba( 255, 255, 255, 0.94 );
backdrop-filter: blur( 6px );
box-shadow: 0 -2px 10px rgba( 42, 69, 48, 0.08 );
/* 既定は隠す。スクロールを上へ戻したときだけ出す */
transform: translateY( 100% );
transition: transform 0.22s ease;
}
.pn-mobilebar.is-visible {
transform: translateY( 0 );
}
.pn-mobilebar__btn {
display: flex;
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
min-height: 52px;
padding: 0.35rem 0.25rem;
border: 0;
background: none;
color: var(--wp--preset--color--contrast-2);
font-size: 0.6875rem;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.pn-mobilebar__btn:active {
background: var(--wp--preset--color--base-2);
}
.pn-mobilebar__btn svg {
width: 22px;
height: 22px;
}
/* バーの下に本文の末尾が隠れないよう、出ている間だけ余白を足す */
.pn-mobilebar.is-visible ~ * {
scroll-margin-bottom: 60px;
}
}
@media ( prefers-reduced-motion: reduce ) {
.pn-mobilebar {
transition: none;
}
}
@media print {
.pn-mobilebar {
display: none;
}
}
/* ==========================================================================
9-0. 記事の鮮度（pn-dates / pn-stale）
--------------------------------------------------------------------------
技術記事は陳腐化する。読者が最初に知りたいのは「この手順はいつ時点のものか」。
公開日だけでは判断できないので、更新日も並べて出す。
========================================================================== */
.pn-dates {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.1rem;
font-size: 0.8125rem;
color: var(--wp--preset--color--contrast-2);
}
.pn-dates__item {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
}
.pn-dates__label {
padding: 0.1em 0.45em;
border-radius: 3px;
background: var(--wp--preset--color--base-2);
font-size: 0.75rem;
letter-spacing: 0.04em;
}
.pn-dates__item--modified .pn-dates__label {
background: var(--wp--preset--color--accent);
color: #fff;
}
/* 古い記事の注意 */
.entry-content .pn-stale {
margin-block: 0 2rem;
padding: 0.9rem 1.1rem;
border: 1px solid #e6c98a;
border-left: 4px solid #d9a441;
border-radius: 4px;
background: #fdf8ec;
}
.entry-content .pn-stale__text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.8;
}
.entry-content .pn-stale__text::before {
content: "\f017"; /* fa-clock-o */
margin-inline-end: 0.5em;
color: #b8860b;
font-family: FontAwesome;
}
/* ==========================================================================
9-1. 見出しへのリンク（pn-anchor）
--------------------------------------------------------------------------
目次のために id は振ってある。あと 1 つタグを足すだけで
「この節を人に見せたい」に応えられる。
========================================================================== */
.entry-content .pn-anchor {
margin-inline-start: 0.4em;
color: var(--wp--preset--color--accent);
font-weight: 400;
text-decoration: none;
opacity: 0;
transition: opacity 0.15s ease;
}
.entry-content :is( h2, h3 ):hover .pn-anchor,
.entry-content .pn-anchor:focus-visible {
opacity: 0.65;
}
.entry-content .pn-anchor:hover {
opacity: 1;
}
/* 触れない端末では常に薄く出す。ホバーが無いと存在に気づけない */
@media ( hover: none ) {
.entry-content .pn-anchor {
opacity: 0.35;
}
}
/* ==========================================================================
9-2. 外部リンク（pn-external）
========================================================================== */
.entry-content a.pn-external::after {
content: "\f08e"; /* fa-external-link */
margin-inline-start: 0.3em;
font-family: FontAwesome;
font-size: 0.8em;
vertical-align: 0.05em;
opacity: 0.55;
}
/* 画像だけのリンクにはアイコンを出さない */
.entry-content a.pn-external:has( > img:only-child )::after {
content: none;
}
/* ==========================================================================
9-2b. コードの色分け（pn-hl）
--------------------------------------------------------------------------
assets/js/highlight.js が付ける class に色を当てる。
スクリプトが読まれなくてもコードはそのまま読める。
彩度は抑える。ターミナルの再現ではなく、走査を助けるのが目的。
========================================================================== */
.entry-content .pn-hl--comment { color: #6b8f7a; font-style: italic; }
.entry-content .pn-hl--str { color: #a05a2c; }
.entry-content .pn-hl--num { color: #7d5ba6; }
.entry-content .pn-hl--kw { color: #2d5a8a; font-weight: 700; }
.entry-content .pn-hl--opt { color: #4f6b56; }
.entry-content .pn-hl--var { color: #8a5a2b; }
.entry-content .pn-hl--key { color: #2d5a8a; }
/* プロンプトは選択されても困らないよう色だけ落とす */
.entry-content .pn-hl--prompt {
color: #8a9a90;
user-select: none;
}
/* ==========================================================================
9-2c. 検索結果のヒット箇所（pn-hit）
========================================================================== */
.pn-hit {
padding: 0 0.15em;
border-radius: 2px;
background: #fff2a8;
color: inherit;
}
/* ==========================================================================
9-3. 記事一覧のカード（pn-entry）
--------------------------------------------------------------------------
本番はアイキャッチが 266 記事すべて未設定で、一覧が文字だけになる。
手で 266 枚用意するのは現実的でないので、OGP 用に生成済みの画像を流用する
（inc/thumbnail.php）。アイキャッチを設定した記事はそちらが優先される。
1200×630 をそのまま並べると大きすぎるので、左に 200px で置いて本文を右へ流す。
========================================================================== */
.pn-entry {
gap: 1.25rem;
align-items: flex-start;
}
.pn-entry__thumb {
flex: 0 0 200px;
margin: 0;
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
line-height: 0;
}
.pn-entry__thumb img {
width: 100%;
height: auto;
aspect-ratio: 1200 / 630;
object-fit: cover;
transition: transform 0.25s ease;
}
.pn-entry__thumb a:hover img {
transform: scale( 1.04 );
}
.pn-entry__body {
flex: 1 1 auto;
min-width: 0; /* 長い見出しがカードを押し広げないように */
}
.pn-entry__body > * {
margin-block: 0;
}
.pn-entry__body > * + * {
margin-top: 0.4rem;
}
.pn-entry__body .wp-block-post-title {
line-height: 1.5;
}
.pn-entry__body .wp-block-post-title a {
text-decoration: none;
}
.pn-entry__body .wp-block-post-title a:hover {
text-decoration: underline;
}
.pn-entry__body .wp-block-post-excerpt {
margin-top: 0.5rem;
}
.pn-entry__body .wp-block-post-excerpt__excerpt {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--wp--preset--color--contrast-2);
}
/* 「続きを読む」は抜粋の直後に置く。既定だと段落 1 つ分空いて遠くなる */
.pn-entry__body .wp-block-post-excerpt__more-text {
margin-top: 0.25rem;
font-size: 0.875rem;
}
.pn-entry__body .wp-block-post-excerpt__more-link {
text-decoration: none;
}
.pn-entry__body .wp-block-post-excerpt__more-link::after {
content: " →";
}
.pn-entry__body .wp-block-post-excerpt__more-link:hover {
text-decoration: underline;
}
@media ( max-width: 600px ) {
.pn-entry {
flex-wrap: wrap;
gap: 0.9rem;
}
.pn-entry__thumb {
flex-basis: 100%;
}
}
/* ==========================================================================
9-4. サイトマップ（pn-sitemap）
--------------------------------------------------------------------------
本番は Cocoon の [sitemap] ショートコードで固定ページとカテゴリを出していた。
テーマ側のブロックへ引き取り、シリーズの節を足した。
件数が多いので、2 カラムに流して縦の長さを抑える。
========================================================================== */
.pn-sitemap__section + .pn-sitemap__section {
margin-top: 2.75rem;
}
.pn-sitemap__heading {
margin-bottom: 0.9rem;
padding-bottom: 0.35em;
border-bottom: 2px solid var(--wp--preset--color--accent);
font-size: 1.25rem;
font-weight: 700;
}
.pn-sitemap__list {
margin: 0;
padding: 0;
list-style: none;
}
.pn-sitemap__list > li {
padding-block: 0.4rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.pn-sitemap__list a {
text-decoration: none;
}
.pn-sitemap__list a:hover {
text-decoration: underline;
}
/* 件数は右端へ寄せる */
.pn-sitemap__count {
float: inline-end;
margin-inline-start: 0.75rem;
color: var(--wp--preset--color--contrast-2);
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
/* カテゴリとタグは項目が短いので段組みにする */
.pn-sitemap__list--terms {
columns: 2;
column-gap: 2rem;
}
.pn-sitemap__list--terms > li {
break-inside: avoid;
}
/* シリーズ配下の記事一覧 */
.pn-sitemap__list--posts {
margin-top: 0.5rem;
margin-inline-start: 1rem;
font-size: 0.9375rem;
}
.pn-sitemap__list--posts > li {
padding-block: 0.25rem;
border-bottom: 0;
}
.pn-sitemap__part {
display: inline-block;
min-width: 2.25em;
margin-inline-end: 0.5rem;
padding: 0.05em 0.4em;
border-radius: 3px;
background: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
text-align: center;
}
@media ( max-width: 600px ) {
.pn-sitemap__list--terms {
columns: 1;
}
}
/* ==========================================================================
9-5. サイトヘッダー・フッター
--------------------------------------------------------------------------
本番（Cocoon）は center_logo レイアウトで、サイト名・タグライン・ナビを中央に積む。
構成は踏襲しつつ、テーマの主題である「木漏れ日」を背景のグラデーションで表す。
背景に画像は使わない。本番はヘッダー背景に 1024×1024 の webp を敷いているが、
同じ印象はグラデーション 2 枚で出せるうえ、リクエストが 1 本減る。
========================================================================== */
.pn-site-header {
position: relative;
padding-block: 2.25rem 1.25rem;
border-bottom: 1px solid var(--wp--preset--color--line);
background:
radial-gradient( 62% 120% at 18% -20%, rgba( 255, 253, 235, 0.85 ), transparent 60% ),
radial-gradient( 48% 100% at 82% -10%, rgba( 214, 236, 205, 0.65 ), transparent 62% ),
linear-gradient( 180deg, #f4f9ef 0%, var(--wp--preset--color--base) 100% );
}
/* 木漏れ日。葉の隙間から落ちる光を薄い斑で表す。装飾なので読み上げ対象にしない */
.pn-site-header::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.5;
background:
radial-gradient( 5px 9px at 22% 30%, rgba( 255, 255, 224, 0.9 ), transparent 70% ),
radial-gradient( 8px 5px at 34% 62%, rgba( 255, 255, 224, 0.7 ), transparent 70% ),
radial-gradient( 4px 7px at 71% 24%, rgba( 255, 255, 224, 0.8 ), transparent 70% ),
radial-gradient( 7px 4px at 86% 58%, rgba( 255, 255, 224, 0.6 ), transparent 70% );
}
.pn-site-header > * {
position: relative; /* ::after より前に出す */
z-index: 1;
}
.pn-site-header__name a,
.pn-site-footer__name a {
color: var(--wp--preset--color--contrast);
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
}
.pn-site-header__name a:hover,
.pn-site-footer__name a:hover {
color: var(--wp--preset--color--accent-2);
}
.pn-site-header__tagline {
margin-top: 0.35rem;
color: var(--wp--preset--color--contrast-2);
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
/* --- グローバルナビ --- */
.pn-site-nav {
margin-top: 1.15rem;
font-size: 0.9375rem;
}
.pn-site-nav .wp-block-navigation__container {
gap: 0.25rem 1.75rem;
}
.pn-site-nav a {
position: relative;
padding-block: 0.35rem;
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
/* 下線は擬似要素で引く。text-decoration だと太さと位置を揃えられない */
.pn-site-nav a::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 2px;
background: var(--wp--preset--color--accent);
transform: scaleX( 0 );
transform-origin: center;
transition: transform 0.18s ease;
}
.pn-site-nav a:hover::after,
.pn-site-nav .current-menu-item a::after {
transform: scaleX( 1 );
}
.pn-site-nav .current-menu-item a {
color: var(--wp--preset--color--accent-2);
font-weight: 700;
}
/* --- フッター --- */
.pn-site-footer {
margin-top: 4rem;
padding-block: 2.5rem 2rem;
border-top: 1px solid var(--wp--preset--color--line);
background: linear-gradient( 180deg, var(--wp--preset--color--base) 0%, #f2f7ed 100% );
text-align: center;
}
.pn-site-footer__name a {
font-size: 1.125rem;
}
.pn-footer-nav {
margin-top: 0.9rem;
font-size: 0.875rem;
}
.pn-footer-nav .wp-block-navigation__container {
gap: 0.25rem 1.5rem;
}
.pn-footer-nav a {
color: var(--wp--preset--color--contrast-2);
text-decoration: none;
}
.pn-footer-nav a:hover {
color: var(--wp--preset--color--accent-2);
text-decoration: underline;
}
.pn-copyright {
margin-top: 1.4rem;
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
letter-spacing: 0.02em;
}
@media ( max-width: 600px ) {
/*
* 狭い画面ではナビがハンバーガー 1 個になる。
* 中央に小さなアイコンだけ置くと「押せるもの」に見えないので、
* 右上へ寄せて枠を付け、タップ領域を 44px 確保する。
*/
.pn-site-header {
position: relative;
padding-block: 1.25rem 1rem;
}
.pn-site-header__name a {
font-size: 1.25rem;
}
.pn-site-nav {
position: absolute;
top: 0.75rem;
inset-inline-end: 0.75rem;
margin-top: 0;
}
/* 開くボタン。core の既定は枠も背景も無い 24px のアイコン */
.pn-site-nav .wp-block-navigation__responsive-container-open {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
background-color: rgba( 255, 255, 255, 0.7 );
color: var(--wp--preset--color--contrast);
}
.pn-site-nav .wp-block-navigation__responsive-container-open svg {
width: 26px;
height: 26px;
}
/*
* 閉じるボタン。大きさを開くボタンと揃える。
*
* 位置はダイアログ基準で core が決めており、top / right を上書きしても動かない。
* ボタンを動かすのではなく、**リスト側に上余白を取って場所を空ける。**
*/
.pn-site-nav .wp-block-navigation__responsive-container-close {
width: 44px;
height: 44px;
}
/*
* 開いたときのメニュー。
*
* core の既定は項目が右端に寄り、閉じるボタンが 1 項目目に重なる。
* 上に余白を取り、項目は行いっぱいを押せるようにする。
* 詳細度は core の規則に勝てるところまで上げてある。
*/
.pn-site-nav .wp-block-navigation__responsive-container.is-menu-open {
padding: 1.25rem 1.25rem 2rem;
}
.pn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
align-items: stretch;
gap: 0.25rem;
/* 閉じるボタン（44px）の分を空ける */
margin-top: 3.5rem;
width: 100%;
}
.pn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
width: 100%;
}
.pn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: block;
width: 100%;
padding-block: 0.75rem;
font-size: 1.0625rem;
text-align: center;
}
/* 項目の区切り。押せる範囲が行全体だと分かるようにする */
.pn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
border-top: 1px solid var(--wp--preset--color--line);
}
}
/* ==========================================================================
10. レイアウト（本文カラム＋右サイドバー）
--------------------------------------------------------------------------
本番と同じ右サイドバー構成。本文 760px ＋ 余白 2.5rem ＋ サイドバー 320px。
幅が足りない画面では wp-block-columns の既定動作で縦積みになる。
========================================================================== */
.site-layout {
align-items: flex-start;
}
/* 本文カラムは伸び縮みさせず、サイドバー側を詰める */
.site-layout > .site-main-column {
flex-grow: 1;
min-width: 0; /* コードや表が長くてもカラムを押し広げない */
}
.site-sidebar {
position: sticky;
top: 1.5rem;
font-size: 0.9375rem;
}
/* 画面が低いとスクロールで追えなくなるため、追従は十分な高さがある時だけ */
@media ( max-height: 700px ) {
.site-sidebar {
position: static;
}
}
.sidebar-widget-title {
margin-bottom: 0.6rem;
padding-bottom: 0.4em;
border-bottom: 2px solid var(--wp--preset--color--line);
font-weight: 700;
letter-spacing: 0.02em;
}
.site-sidebar :is( .wp-block-categories, .wp-block-page-list, .wp-block-latest-posts ) {
padding-left: 0;
list-style: none;
}
.site-sidebar li {
padding-block: 0.35em;
border-bottom: 1px solid var(--wp--preset--color--line);
line-height: 1.5;
}
.site-sidebar li:last-child {
border-bottom: 0;
}
/* 子カテゴリは字下げして階層を示す */
.site-sidebar .children {
margin-top: 0.35em;
padding-left: 1em;
list-style: none;
}
.site-sidebar .wp-block-latest-posts__post-date {
display: block;
color: var(--wp--preset--color--contrast-2);
font-size: 0.8125rem;
}
.site-sidebar .profile-box {
padding: 1rem 1.1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
}
/* 広告枠。実配信前でも占有スペースが分かるようにしておく（CLS 対策） */
.ad-slot {
display: grid;
place-items: center;
min-height: 250px;
border: 1px dashed var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
}
.ad-slot-label {
margin: 0;
color: var(--wp--preset--color--contrast-2);
}
/* 前後の記事ナビ */
.entry-nav {
padding-top: 1.5rem;
border-top: 1px solid var(--wp--preset--color--line);
gap: 1rem;
}
.entry-nav .post-navigation-link-next {
margin-left: auto;
text-align: right;
}
/* ==========================================================================
11. pn- 装飾語彙
--------------------------------------------------------------------------
記事本文には見た目を書かず、意味だけを書く。仕様は VOCABULARY.md を参照。
既存 274 件のインライン style 1,349 箇所を分類した結果、装飾の意味は
6 種類しかなかった。増やさないこと。
接頭辞 pn- は必須（一般名はコアのクラスや theme.json の slug と衝突する）。
========================================================================== */
.entry-content {
counter-reset: pn-exercise;
}
/* -------- 11-1. pn-note 汎用の囲み -------- */
.entry-content .pn-note {
--pn-tone: var(--wp--preset--color--accent);
--pn-tint: #f2f7ff;
margin-block: 2rem;
padding: 1.1rem 1.2rem;
border: 1px solid var(--wp--preset--color--line);
border-left: 5px solid var(--pn-tone);
border-radius: 6px;
background-color: var(--pn-tint);
}
.entry-content .pn-note > :first-child {
margin-top: 0;
}
.entry-content .pn-note > :last-child {
margin-bottom: 0;
}
.entry-content .pn-note__title {
font-weight: 700;
color: var(--pn-tone);
}
/* アイコンはトーンごとにテーマが付ける。本文には書かない */
.entry-content .pn-note__title::before {
margin-right: 0.4em;
content: "ℹ️";
}
/*
* トーンの色は本番の既存デザイン（icn-level-* のバッジ）から採っている。
* 図書館の分類札のイメージで、彩度を抑えて本文の緑と喧嘩させない。
*/
.entry-content .pn-note--info { --pn-tone: #3a5f7a; --pn-tint: #eef3f7; }
.entry-content .pn-note--warn { --pn-tone: #8a6a1a; --pn-tint: #fdf6e3; }
.entry-content .pn-note--danger { --pn-tone: #8a3a3a; --pn-tint: #faeceb; }
.entry-content .pn-note--ok { --pn-tone: #3a6a3a; --pn-tint: #eef6e6; }
.entry-content .pn-note--neutral { --pn-tone: #4f6b56; --pn-tint: var(--wp--preset--color--base-2); }
.entry-content .pn-note--warn .pn-note__title::before { content: "⚠️"; }
.entry-content .pn-note--danger .pn-note__title::before { content: "🚨"; }
.entry-content .pn-note--ok .pn-note__title::before { content: "✅"; }
.entry-content .pn-note--neutral .pn-note__title::before { content: "📝"; }
/* -------- 11-2. pn-env 検証環境 -------- */
.entry-content .pn-env {
margin-block: 2rem;
padding: 1rem 1.2rem 1.1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
font-size: 0.9375rem;
}
/* 見出しはテーマが出す。本文に「動作確認バージョン」と書かない */
.entry-content .pn-env::before {
display: block;
margin-bottom: 0.5rem;
color: var(--wp--preset--color--contrast-2);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
content: "検証環境";
}
.entry-content .pn-env ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.entry-content .pn-env li + li {
margin-top: 0.3em;
}
.entry-content .pn-env strong {
display: inline-block;
min-width: 9em;
color: var(--wp--preset--color--contrast-2);
font-weight: 700;
}
/* -------- 11-3. pn-goals この記事で分かること -------- */
.entry-content .pn-goals {
margin-block: 2rem;
padding: 1.2rem 1.4rem;
border: 2px solid var(--wp--preset--color--accent);
border-radius: 8px;
}
.entry-content .pn-goals::before {
display: block;
margin-bottom: 0.6rem;
color: var(--wp--preset--color--accent);
font-weight: 700;
content: "この記事で分かること";
}
.entry-content .pn-goals ul {
margin: 0;
}
/* -------- 11-4. pn-steps 手順 -------- */
.entry-content .pn-steps {
margin-block: 2rem;
}
.entry-content .pn-steps ol {
margin: 0;
padding-left: 0;
list-style: none;
counter-reset: pn-step;
}
.entry-content .pn-steps > ol > li {
position: relative;
margin-top: 0;
padding: 0 0 1.4rem 2.6rem;
border-left: 2px solid var(--wp--preset--color--line);
}
.entry-content .pn-steps > ol > li:last-child {
padding-bottom: 0;
border-left-color: transparent;
}
.entry-content .pn-steps > ol > li::before {
position: absolute;
top: 0;
left: -0.95rem;
display: grid;
place-items: center;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
background-color: var(--wp--preset--color--accent);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
counter-increment: pn-step;
content: counter( pn-step );
}
/* -------- 11-5. pn-exercise 演習と解答 -------- */
.entry-content .pn-exercise {
margin-block: 2rem;
padding: 1.1rem 1.2rem;
border: 1px solid #c9a94a;
border-radius: 6px;
background-color: #fdfaf0;
}
.entry-content .pn-exercise > :first-child {
margin-top: 0;
}
.entry-content .pn-exercise__title {
font-weight: 700;
color: #8a6a1a;
}
/* 連番はテーマが振る。本文に「演習1」と書かない */
.entry-content .pn-exercise__title::before {
counter-increment: pn-exercise;
content: "演習 " counter( pn-exercise ) ": ";
}
.entry-content .pn-answer {
margin-top: 1rem;
border-top: 1px dashed var(--wp--preset--color--line);
padding-top: 0.8rem;
}
.entry-content .pn-answer > summary {
cursor: pointer;
color: var(--wp--preset--color--accent);
font-size: 0.9375rem;
font-weight: 700;
list-style: none;
}
.entry-content .pn-answer > summary::-webkit-details-marker {
display: none;
}
.entry-content .pn-answer > summary::before {
display: inline-block;
margin-right: 0.4em;
transition: transform 0.15s;
content: "▶";
}
.entry-content .pn-answer[open] > summary::before {
transform: rotate( 90deg );
}
/* -------- 11-6. pn-compare Before / After -------- */
.entry-content .pn-compare {
display: grid;
gap: 1rem;
margin-block: 2rem;
grid-template-columns: 1fr;
}
@media ( min-width: 600px ) {
.entry-content .pn-compare {
grid-template-columns: 1fr 1fr;
}
}
.entry-content .pn-compare__item {
min-width: 0;
padding: 1rem 1.1rem;
border: 1px solid var(--wp--preset--color--line);
border-top: 4px solid var(--wp--preset--color--line);
border-radius: 6px;
}
.entry-content .pn-compare__item--bad { border-top-color: #8a3a3a; }
.entry-content .pn-compare__item--good { border-top-color: #3a6a3a; }
.entry-content .pn-compare__label {
margin-top: 0;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.entry-content .pn-compare__item--bad .pn-compare__label { color: #8a3a3a; }
.entry-content .pn-compare__item--good .pn-compare__label { color: #3a6a3a; }
.entry-content .pn-compare__item > :last-child {
margin-bottom: 0;
}
/* -------- 11-7. 文中・表セル用のユーティリティ -------- */
.entry-content .pn-good { color: #3a6a3a; font-weight: 700; }
.entry-content .pn-bad { color: #8a3a3a; font-weight: 700; }
.entry-content .pn-caution { color: #8a6a1a; font-weight: 700; }
/* ==========================================================================
12. 本棚（pn-shelf）
--------------------------------------------------------------------------
本番 /infra-eng-growth-plan の本棚を、テーマのコンポーネントとして再実装したもの。
本番版との違いは 3 つ。
1. Cocoon を打ち消すためのリセット層（.icn-room 配下の !important 群）が不要
2. JavaScript を使わない。ラジオボタン＋隣接セレクタで開閉する
（本番版はインライン script 3 本・約 4.2KB を使っている）
3. 背表紙の色はデータ属性のベタ書きではなく :nth-of-type で自動的に配色する
→ シリーズが増えても CSS を足さなくてよい
並び順は flex の order で制御する。背表紙 0 → 棚板 50 → 展開カード 99。
========================================================================== */
/* --------------------------------------------------------------------------
12-0. ゾーン見出し（pn-zone）
本棚を 3 つのゾーンに区切る見出し。本番の .icn-zone-header 相当を
テーマ側へ引き取ったもの。追加 CSS を掃除しても残るようにするため、
色は本番の値をそのまま持ってきている。
-------------------------------------------------------------------------- */
.pn-zone {
display: flex;
align-items: center;
gap: 0.875rem;
max-width: var(--wp--style--global--content-size, 760px);
margin: 2.25rem auto 1rem;
padding: 1.75rem 1rem 1rem;
border-top: 2px solid var(--wp--preset--color--line, #c8dfc0);
}
.pn-zone:first-child,
.pn-zone--first {
margin-top: 0.5rem;
padding-top: 0;
border-top: 0;
}
.pn-zone__badge {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.375rem;
height: 2.375rem;
border-radius: 6px;
background: var(--wp--preset--color--accent, #3f6f4d);
color: #fff;
font-size: 1rem;
font-weight: 800;
line-height: 1;
}
.pn-zone--z1 .pn-zone__badge { background: #2d6a3f; }
.pn-zone--z2 .pn-zone__badge { background: #4a6a8a; }
.pn-zone--z3 .pn-zone__badge { background: #8a6a4a; }
.pn-zone__label {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
color: var(--wp--preset--color--contrast, #2a4530);
}
.pn-zone__sub {
margin-top: 0.125rem;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--wp--preset--color--contrast-2, #4f6b56);
}
.pn-shelf {
--pn-wood-1: #c8b898;
--pn-wood-2: #b8a88a;
--pn-wood-3: #8a7a5a;
margin-block: 2.5rem;
}
.pn-shelf__rack {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
gap: 10px;
padding: 1.5rem 1.25rem 0;
}
/* ラジオは見えないがフォーカスは受け取れるようにする */
.pn-shelf__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip-path: inset( 50% );
white-space: nowrap;
}
/* -------- 背表紙 -------- */
/*
* 高さは min-height にしている。タイトルが長い本は自然に背が高くなり、
* 棚に並んだときの見え方としてもその方が自然。
* ただし極端に長いものは max-height で頭打ちにし、末尾を省略する。
*/
.pn-book {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 48px;
min-height: var( --pn-book-h, 220px );
max-height: 320px;
padding-block: 10px;
border-radius: 3px 6px 6px 3px;
background: var( --pn-spine, linear-gradient( 180deg, #5a8a4a, #3a6a3a ) );
box-shadow: 2px 2px 6px rgba( 0, 0, 0, 0.2 ), inset -2px 0 4px rgba( 0, 0, 0, 0.15 );
cursor: pointer;
transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 ), box-shadow 0.3s ease;
}
/* 背表紙の綴じ側に入る細いハイライト */
.pn-book::before {
position: absolute;
top: 8px;
bottom: 8px;
left: 4px;
width: 2px;
border-radius: 1px;
background: rgba( 255, 255, 255, 0.18 );
content: "";
}
/*
* 上限は割合ではなく実寸で指定する。
* 親（.pn-book）の高さが min-height / max-height で決まる＝不確定なため、
* max-height: 100% は解決されず、中央揃えのまま上下に溢れて
* ラベルの先頭と末尾が両方切れてしまう。
* 実寸で止めれば、溢れるのは末尾だけになり省略記号が効く。
*/
.pn-book__label {
max-height: 300px;
overflow: hidden;
writing-mode: vertical-rl;
text-orientation: mixed;
text-overflow: ellipsis;
color: rgba( 255, 255, 255, 0.94 );
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 );
white-space: nowrap;
user-select: none;
pointer-events: none;
}
.pn-book:hover {
transform: translateY( -8px );
box-shadow: 2px 6px 14px rgba( 0, 0, 0, 0.3 ), inset -2px 0 4px rgba( 0, 0, 0, 0.15 );
}
/* 選ばれている本はさらに引き出す */
.pn-shelf__input:checked + .pn-book {
transform: translateY( -14px );
box-shadow: 2px 10px 20px rgba( 0, 0, 0, 0.35 ), inset -2px 0 4px rgba( 0, 0, 0, 0.15 );
}
.pn-shelf__input:focus-visible + .pn-book {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
}
/* -------- 新着バッジ（レインボー） --------
本番の .icn-spine-new-badge / .icn-badge-new と同じ表現。
連載中バッジと同時に出せるよう、::after ではなく実体の要素にしている。
-------------------------------------------------------------- */
@keyframes pn-rainbow-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.pn-book__new,
.pn-badge--new {
background: linear-gradient( 90deg, #ff6b6b, #ffb347, #ffe066, #6bcb77, #4d9de0, #9b59b6, #ff6b6b );
background-size: 200% 200%;
animation: pn-rainbow-shift 3s ease infinite;
color: #fff;
font-weight: 800;
letter-spacing: 0.04em;
text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.25 );
}
.pn-book__new {
position: absolute;
top: 5px;
left: 50%;
padding: 2px 5px;
transform: translateX( -50% );
border-radius: 3px;
font-size: 0.5rem;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
}
/* NEW と連載中が両方付く本では、連載中を下にずらす */
.pn-book:has( .pn-book__new )[data-status="ongoing"]::after {
top: 26px;
}
/* 連載中の帯 */
.pn-book[data-status="ongoing"]::after {
position: absolute;
top: 6px;
left: 50%;
padding: 1px 4px;
transform: translateX( -50% );
border-radius: 2px;
background: #e8c840;
color: #3a2a00;
font-size: 0.5rem;
font-weight: 700;
line-height: 1.3;
white-space: nowrap;
content: "連載中";
pointer-events: none;
}
/*
* 背表紙の配色と高さ。8 種類を繰り返すので、本が増えても CSS を足さなくてよい。
* label だけを数えるため input や div とは干渉しない。
*/
.pn-book:nth-of-type( 8n + 1 ) { --pn-spine: linear-gradient( 180deg, #5a8a4a, #3a6a3a ); --pn-book-h: 220px; }
.pn-book:nth-of-type( 8n + 2 ) { --pn-spine: linear-gradient( 180deg, #4a7a5a, #2a5a3a ); --pn-book-h: 208px; }
.pn-book:nth-of-type( 8n + 3 ) { --pn-spine: linear-gradient( 180deg, #4a6a8a, #2a4a6a ); --pn-book-h: 226px; }
.pn-book:nth-of-type( 8n + 4 ) { --pn-spine: linear-gradient( 180deg, #3a5a7a, #1a3a5a ); --pn-book-h: 214px; }
.pn-book:nth-of-type( 8n + 5 ) { --pn-spine: linear-gradient( 180deg, #4a8a9a, #2a5a6a ); --pn-book-h: 232px; }
.pn-book:nth-of-type( 8n + 6 ) { --pn-spine: linear-gradient( 180deg, #6a5a8a, #4a3a6a ); --pn-book-h: 204px; }
.pn-book:nth-of-type( 8n + 7 ) { --pn-spine: linear-gradient( 180deg, #5a4a7a, #3a2a5a ); --pn-book-h: 222px; }
.pn-book:nth-of-type( 8n + 8 ) { --pn-spine: linear-gradient( 180deg, #6a9a5a, #4a7a4a ); --pn-book-h: 212px; }
/* -------- 棚板 -------- */
.pn-shelf__board {
position: relative;
order: 50;
width: 100%;
height: 14px;
border-radius: 0 0 4px 4px;
background: linear-gradient( 180deg, var( --pn-wood-2 ) 0%, var( --pn-wood-2 ) 40%, var( --pn-wood-3 ) 100% );
box-shadow: 0 4px 8px rgba( 60, 40, 20, 0.25 ), inset 0 2px 3px rgba( 255, 240, 200, 0.15 );
}
.pn-shelf__board::before {
position: absolute;
top: -3px;
right: 0;
left: 0;
height: 3px;
border-radius: 2px 2px 0 0;
background: linear-gradient( 180deg, var( --pn-wood-1 ), var( --pn-wood-2 ) );
content: "";
}
/* -------- 引き出したときのカード -------- */
.pn-book-card {
display: none;
order: 99;
width: 100%;
margin-top: 1.5rem;
padding: 1.5rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 12px;
background-color: var(--wp--preset--color--base);
box-shadow: 0 2px 8px rgba( 42, 69, 48, 0.06 );
}
/* ここが開閉の仕組み。JavaScript は使わない */
.pn-shelf__input:checked + .pn-book + .pn-book-card {
display: block;
}
.pn-book-card__vol {
margin: 0;
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.pn-book-card__title {
margin: 0.2rem 0 0.6rem;
font-size: 1.125rem;
font-weight: 700;
line-height: 1.4;
}
.pn-book-card__desc {
margin: 0 0 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast-2);
font-size: 0.875rem;
}
.pn-book-card__list {
margin: 0;
padding: 0;
list-style: none;
}
.pn-book-card__list a {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.6rem;
border-radius: 8px;
color: inherit;
text-decoration: none;
transition: background-color 0.2s ease;
}
.pn-book-card__list a:hover {
background-color: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--accent);
}
.pn-book-card__num {
flex-shrink: 0;
min-width: 1.6em;
color: var(--wp--preset--color--contrast-2);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
text-align: center;
}
.pn-book-card__item-title {
flex: 1;
font-size: 0.875rem;
line-height: 1.5;
}
.pn-level {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 4px;
font-size: 0.6875rem;
font-weight: 600;
white-space: nowrap;
}
.pn-level--intro { background-color: #e8f5d8; color: #3a6a3a; }
.pn-level--practice { background-color: #fdf6e3; color: #8a6a1a; }
.pn-level--advanced { background-color: #faeceb; color: #8a3a3a; }
.pn-level--ref { background-color: #eef3f7; color: #3a5f7a; }
.pn-book-card__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem;
padding-top: 0.8rem;
border-top: 1px solid var(--wp--preset--color--line);
}
.pn-book-card__close {
padding: 0.45rem 1.2rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
color: var(--wp--preset--color--contrast-2);
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
}
.pn-book-card__close:hover {
background-color: var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast);
}
/* -------- 画面が狭いとき -------- */
/*
* 狭い画面。
*
* 棚板は width:100% の flex アイテムなので、本が折り返すと**最下段にしか出ない**。
* 1 段目の本が宙に浮いて見える。プラグインは 1 棚 8 冊で組むので、
* **8 冊が 1 行に収まる幅**まで詰めて折り返しを防ぐ。
*
* 360px 端末: 棚の内寸 ≈ 293px / 8×30 + 7×5 = 275px → 収まる
* 390px 端末: 棚の内寸 ≈ 324px → 余裕あり
*
* 背表紙は縦長（高さ 200px 以上）なので、幅 30px でもタップは外しにくい。
*/
@media ( max-width: 600px ) {
.pn-shelf__rack {
gap: 5px;
padding: 1rem 0.6rem 0;
}
.pn-book {
width: 30px;
min-height: 200px;
max-height: 260px;
border-radius: 2px 4px 4px 2px;
}
.pn-book__label {
font-size: 0.5625rem;
letter-spacing: 0;
}
}
/* さらに狭い端末（iPhone SE など） */
@media ( max-width: 380px ) {
.pn-shelf__rack {
gap: 4px;
padding: 1rem 0.4rem 0;
}
.pn-book {
width: 27px;
}
}
/*
* 動きを減らす設定のとき。
* 本を引き出す位置の変化そのものは「どれを選んでいるか」を示す情報なので残し、
* 補間（トランジション）と、止まらないレインボーのアニメーションだけを切る。
*/
@media ( prefers-reduced-motion: reduce ) {
.pn-book {
transition: none;
}
.pn-book__new,
.pn-badge--new {
animation: none;
background-position: 0 50%;
}
}
/* ==========================================================================
13. トップページのヒーローと特集カード
--------------------------------------------------------------------------
テーマイメージは「木漏れ日のなかの図書館」。
紙色の地に木漏れ日を落とし、下段に書架を敷く。
装飾はすべて CSS 側に置き、マークアップには一切出さない。
ヒーローの中身（見出し・説明文）はページのコンテンツであり、
ブロックパターン patterns/front-hero.php から挿入して編集する。
========================================================================== */
.pn-hero {
--pn-paper: #faf7ef;
--pn-paper-2: #f2ece0;
--pn-wood-2: #b8a88a;
--pn-wood-3: #8a7a5a;
position: relative;
overflow: hidden;
min-height: 460px;
padding: 3.5rem 1.5rem 10.5rem;
display: grid;
place-items: center;
text-align: center;
background-image:
/* 葉影（四隅） */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpath d='M60 0C30 40 0 80 10 140c10 30 30 50 50 60 20-10 40-30 50-60 10-60-20-100-50-140Z' fill='%234e7a45' fill-opacity='.2'/%3E%3Cpath d='M60 20v160' stroke='%233c6236' stroke-opacity='.18' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpath d='M60 0C30 40 0 80 10 140c10 30 30 50 50 60 20-10 40-30 50-60 10-60-20-100-50-140Z' fill='%235a8a4a' fill-opacity='.18'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cpath d='M60 0C30 40 0 80 10 140c10 30 30 50 50 60 20-10 40-30 50-60 10-60-20-100-50-140Z' fill='%234e7a45' fill-opacity='.2'/%3E%3Cpath d='M60 20v160' stroke='%233c6236' stroke-opacity='.18' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
/* 書架（背表紙 8 冊） */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 289 145'%3E%3Cg%3E%3Crect x='0' y='41' width='30' height='104' rx='3' fill='%234a7a42'/%3E%3Crect x='37' y='17' width='30' height='128' rx='3' fill='%23366a3a'/%3E%3Crect x='74' y='49' width='30' height='96' rx='3' fill='%233d6580'/%3E%3Crect x='111' y='9' width='30' height='136' rx='3' fill='%232a4a68'/%3E%3Crect x='148' y='33' width='30' height='112' rx='3' fill='%233d7d88'/%3E%3Crect x='185' y='21' width='30' height='124' rx='3' fill='%23584a78'/%3E%3Crect x='222' y='45' width='30' height='100' rx='3' fill='%234a3a68'/%3E%3Crect x='259' y='13' width='30' height='132' rx='3' fill='%23588a4a'/%3E%3C/g%3E%3C/svg%3E"),
/* 棚板 */
linear-gradient( 180deg, transparent calc( 100% - 13px ), var( --pn-wood-2 ) calc( 100% - 13px ), var( --pn-wood-3 ) 100% ),
/* 紙の地 */
radial-gradient( 60% 45% at 50% 30%, rgba( 255, 248, 214, 0.55 ) 0%, transparent 70% ),
linear-gradient( 180deg, var( --pn-paper ) 0%, #f7f2e7 55%, var( --pn-paper-2 ) 100% );
background-repeat: no-repeat;
background-position:
1% 3%,
5% 32%,
96% 5%,
center calc( 100% - 13px ),
0 0,
0 0,
0 0;
background-size:
86px auto,
48px auto,
72px auto,
289px 145px,
100% 100%,
100% 100%,
100% 100%;
}
/* 木漏れ日の光だまり。ゆっくり位置が動く */
.pn-hero::before {
position: absolute;
inset: -10%;
z-index: 1;
background-image:
radial-gradient( circle at 12% 8%, rgba( 232, 184, 64, 0.3 ) 0%, transparent 22% ),
radial-gradient( circle at 88% 20%, rgba( 248, 220, 128, 0.26 ) 0%, transparent 18% ),
radial-gradient( circle at 36% 48%, rgba( 255, 240, 180, 0.34 ) 0%, transparent 20% ),
radial-gradient( circle at 62% 12%, rgba( 240, 192, 64, 0.2 ) 0%, transparent 14% );
mix-blend-mode: multiply;
filter: brightness( 1.25 ) saturate( 0.7 );
animation: pn-hero-drift 16s ease-in-out infinite alternate;
content: "";
pointer-events: none;
}
/* 窓から差す光の筋 */
.pn-hero::after {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0.5;
background-image:
linear-gradient( 112deg, transparent 18%, rgba( 255, 250, 220, 0.5 ) 24%, transparent 30% ),
linear-gradient( 112deg, transparent 42%, rgba( 255, 250, 220, 0.38 ) 47%, transparent 53% ),
linear-gradient( 112deg, transparent 66%, rgba( 255, 250, 220, 0.3 ) 70%, transparent 76% );
animation: pn-hero-shaft 18s ease-in-out infinite alternate;
content: "";
pointer-events: none;
}
@keyframes pn-hero-drift {
to { transform: translate( 22px, 16px ) scale( 1.06 ); }
}
@keyframes pn-hero-shaft {
to { transform: translateX( 26px ); }
}
/* ヒーローの中身 */
.pn-hero > * {
position: relative;
z-index: 2;
}
.pn-hero__eyebrow {
display: inline-block;
margin: 0 auto;
padding: 0.35rem 1rem;
border: 1px solid rgba( 150, 130, 84, 0.28 );
border-radius: 999px;
background-color: rgba( 255, 255, 255, 0.72 );
color: #6b5a34;
font-size: 0.8125rem;
backdrop-filter: blur( 4px );
}
.pn-hero__title {
margin: 1.1rem 0 0.9rem;
color: #26382a;
letter-spacing: 0.18em;
}
.pn-hero__desc {
display: inline-block;
margin: 0;
padding: 1rem 1.4rem;
border: 1px solid rgba( 200, 190, 160, 0.6 );
border-radius: 8px;
background-color: rgba( 255, 255, 255, 0.82 );
font-size: 0.9375rem;
line-height: 2;
}
/* -------- 特集カード -------- */
.pn-feature {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 330px;
margin-block: 1.75rem;
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
border-left: 4px solid var(--wp--preset--color--accent);
border-radius: 4px;
background-color: var(--wp--preset--color--base);
transition: box-shadow 0.3s;
}
.pn-feature:hover {
box-shadow: 0 10px 32px rgba( 45, 90, 61, 0.14 );
}
.pn-feature__media {
position: relative;
overflow: hidden;
margin: 0;
}
.pn-feature__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.pn-feature:hover .pn-feature__media img {
transform: scale( 1.04 );
}
.pn-feature__media::after {
position: absolute;
inset: 0;
background-image: linear-gradient( 135deg, rgba( 26, 51, 37, 0.18 ) 0%, transparent 55%, rgba( 90, 173, 114, 0.08 ) 100% );
content: "";
pointer-events: none;
}
/* 偶数枚目は画像を右に置く */
.pn-feature--rev {
border-right: 4px solid var(--wp--preset--color--accent);
border-left: 1px solid var(--wp--preset--color--line);
}
.pn-feature--rev .pn-feature__media {
order: 2;
}
.pn-feature__body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.1rem 2rem;
}
.pn-feature__num {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
color: var(--wp--preset--color--contrast-2);
font-size: 0.6875rem;
letter-spacing: 0.18em;
}
.pn-feature__num::before {
width: 26px;
height: 2px;
background-color: #e8b840;
content: "";
}
/*
* 本文の h2 には下線と大きな上余白が付くが、カードの中では邪魔になるので打ち消す。
* 記事本文とトップページで同じ h2 を別扱いする、数少ない例外。
*/
.pn-feature__title,
.entry-content .pn-feature__title {
margin: 0.6rem 0 0.7rem;
padding-bottom: 0;
border-bottom: 0;
font-size: 1.5rem;
line-height: 1.4;
}
.pn-feature__desc {
margin: 0 0 1.25rem;
color: var(--wp--preset--color--contrast-2);
font-size: 0.875rem;
}
.pn-feature__cta .wp-block-button__link {
padding: 0.7rem 1.4rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 700;
}
/* -------- 更新情報 -------- */
.pn-news .wp-block-post-template {
margin: 0;
padding: 0;
list-style: none;
}
.pn-news .wp-block-post-template > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.9rem;
margin: 0;
padding: 0.75rem 0.25rem;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.pn-news .wp-block-post-template > li:last-child {
border-bottom: 0;
}
.pn-news .wp-block-post-date {
min-width: 6.5em;
margin: 0;
color: var(--wp--preset--color--contrast-2);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
}
.pn-news .wp-block-post-title {
flex: 1;
min-width: 14em;
margin: 0;
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.6;
}
@media ( max-width: 1023px ) {
.pn-feature,
.pn-feature--rev {
grid-template-columns: 1fr;
}
.pn-feature--rev .pn-feature__media {
order: 0;
}
}
@media ( prefers-reduced-motion: reduce ) {
.pn-hero::before,
.pn-hero::after {
animation: none;
}
.pn-feature__media img,
.pn-feature {
transition: none;
}
}
/* ==========================================================================
14. シリーズ導線（記事末尾）
--------------------------------------------------------------------------
HTML はプラグイン personalnote-series が組み立てる。ここは見た目だけ。
本文から内部リンクを 1 本も出していない記事が 96 件（全体の 36%）あり、
これを入れるだけで解消する。
========================================================================== */
.pn-series-nav {
margin-top: 3rem;
padding: 1.4rem 1.5rem 1.2rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
background-color: var(--wp--preset--color--base-2);
}
.pn-series-nav__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.6rem;
margin: 0 0 0.6rem;
font-size: 0.9375rem;
font-weight: 700;
}
.pn-series-nav__pos {
color: var(--wp--preset--color--contrast-2);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
font-weight: 400;
white-space: nowrap;
}
/* 進捗 */
.pn-series-nav__bar {
height: 4px;
margin-bottom: 1.1rem;
overflow: hidden;
border-radius: 2px;
background-color: var(--wp--preset--color--line);
}
.pn-series-nav__bar > span {
display: block;
height: 100%;
background-color: var(--wp--preset--color--accent);
}
/* 前後 */
.pn-series-nav__links {
display: grid;
gap: 0.8rem;
grid-template-columns: 1fr 1fr;
}
.pn-series-nav__prev,
.pn-series-nav__next {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 0.8rem 1rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base);
color: inherit;
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.pn-series-nav__prev:hover,
.pn-series-nav__next:hover {
border-color: var(--wp--preset--color--accent);
box-shadow: 0 2px 10px rgba( 45, 90, 61, 0.1 );
color: inherit;
}
/* 前後どちらかが無いときも段組みを崩さない */
.is-empty {
border: 1px dashed var(--wp--preset--color--line);
border-radius: 6px;
opacity: 0.35;
}
.pn-series-nav__next {
text-align: right;
}
.pn-series-nav__label {
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
letter-spacing: 0.06em;
}
.pn-series-nav__prev .pn-series-nav__label::before { content: "← "; }
.pn-series-nav__next .pn-series-nav__label::after { content: " →"; }
.pn-series-nav__title {
font-size: 0.875rem;
line-height: 1.5;
}
.pn-series-nav__num {
display: inline-block;
min-width: 1.8em;
margin-right: 0.4em;
padding: 0 0.35em;
border-radius: 3px;
background-color: var(--wp--preset--color--line);
color: var(--wp--preset--color--contrast-2);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
text-align: center;
}
.pn-series-nav__all {
margin: 1rem 0 0;
font-size: 0.875rem;
text-align: center;
}
/*
* シリーズ導線が出ている記事では、テンプレート側の前後ナビ（.entry-nav）は
* 同じ 2 本を指すので隠す。シリーズに属さない 52 記事では従来どおり出る。
*/
main:has( .pn-series-nav ) .entry-nav {
display: none;
}
@media ( max-width: 600px ) {
.pn-series-nav__links {
grid-template-columns: 1fr;
}
.pn-series-nav__next {
text-align: left;
}
.is-empty {
display: none;
}
}
@media print {
.pn-series-nav {
display: none;
}
}
/* ==========================================================================
15. 目次
--------------------------------------------------------------------------
HTML は inc/toc.php が組み立てる。JavaScript は使わない。
平均 15,784 文字・h2 が 1 記事平均 10.2 個あるため、Cocoon が持っていた
機能のうち最も落とせないもの。
========================================================================== */
.entry-content .pn-toc {
margin-block: 2.5rem;
padding: 1.1rem 1.4rem 1.2rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
background-color: var(--wp--preset--color--base-2);
font-size: 0.9375rem;
}
.pn-toc__title {
cursor: pointer;
font-weight: 700;
letter-spacing: 0.04em;
list-style: none;
}
.pn-toc__title::-webkit-details-marker {
display: none;
}
.pn-toc__title::before {
display: inline-block;
margin-right: 0.5em;
transition: transform 0.15s;
content: "▶";
color: var(--wp--preset--color--accent);
font-size: 0.75em;
}
.pn-toc[open] .pn-toc__title::before {
transform: rotate( 90deg );
}
.entry-content .pn-toc__list {
margin: 0.9rem 0 0;
padding-left: 1.6em;
counter-reset: pn-toc2;
}
.entry-content .pn-toc__sub {
margin: 0.35rem 0 0.5rem;
padding-left: 1.4em;
counter-reset: pn-toc3;
}
.entry-content .pn-toc__item {
margin-top: 0;
list-style: none;
line-height: 1.6;
}
.entry-content .pn-toc__item + .pn-toc__item {
margin-top: 0.45em;
}
.pn-toc__item > a {
color: inherit;
text-decoration: none;
}
.pn-toc__item > a:hover {
color: var(--wp--preset--color--accent);
text-decoration: underline;
}
/* 番号はテーマが振る。本文の見出しに番号を書かない */
.pn-toc__item--h2 > a::before {
counter-increment: pn-toc2;
content: counter( pn-toc2 ) ". ";
color: var(--wp--preset--color--contrast-2);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.875em;
}
.pn-toc__item--h3 {
font-size: 0.875rem;
color: var(--wp--preset--color--contrast-2);
}
.pn-toc__item--h3 > a::before {
counter-increment: pn-toc3;
content: counter( pn-toc2 ) "-" counter( pn-toc3 ) " ";
font-family: var(--wp--preset--font-family--mono);
font-size: 0.875em;
}
/* 目次から飛んだときに見出しが上に貼りつかないようにする */
.entry-content :is( h2, h3 ) {
scroll-margin-top: 1.5rem;
}
@media print {
.pn-toc {
display: none;
}
}
/* ==========================================================================
16. コードのコピーボタン
--------------------------------------------------------------------------
ボタンは assets/js/copy-code.js が足す。JavaScript が無ければ出ないだけ。
========================================================================== */
.pn-copy {
position: absolute;
top: 0.45rem;
right: 0.45rem;
padding: 0.2rem 0.7rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 4px;
background-color: var(--wp--preset--color--base);
color: var(--wp--preset--color--contrast-2);
font-family: inherit;
font-size: 0.75rem;
line-height: 1.6;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
/* 触れたときとキーボードで到達したときに出す */
.entry-content pre:hover .pn-copy,
.pn-copy:focus-visible {
opacity: 1;
}
.pn-copy:hover {
border-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--accent);
}
.pn-copy.is-done {
border-color: #3a6a3a;
background-color: #eef6e6;
color: #3a6a3a;
opacity: 1;
}
/* 触覚デバイスでは hover が無いので常に出す */
@media ( hover: none ) {
.pn-copy {
opacity: 1;
}
}
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip-path: inset( 50% );
white-space: nowrap;
}
/* ==========================================================================
17. 記事内の広告枠
--------------------------------------------------------------------------
HTML は inc/ads.php が差し込む。本番 Cocoon の
widget-single-content-top / middle / bottom と同じ 3 か所。
実配信前でも占有スペースを確保して、後から入って行がずれるのを防ぐ。
========================================================================== */
.pn-ad {
display: grid;
place-items: center;
min-height: 250px;
margin-block: 2.5rem;
border: 1px dashed var(--wp--preset--color--line);
border-radius: 6px;
background-color: var(--wp--preset--color--base-2);
}
.pn-ad__placeholder {
color: var(--wp--preset--color--contrast-2);
font-size: 0.875rem;
}
/* 本文の直前・直後は余白を詰める */
.pn-ad--top {
margin-top: 0;
}
.pn-ad--bottom {
margin-bottom: 0;
}
@media print {
.pn-ad,
.pn-copy {
display: none;
}
}
/* ==========================================================================
18. パンくずリスト
--------------------------------------------------------------------------
HTML は inc/breadcrumbs.php が組み立てる（ブロックとしてテンプレートに置く）。
構造化データ（BreadcrumbList）も同じファイルが head に出す。
========================================================================== */
.pn-crumbs {
margin-bottom: 1.2rem;
font-size: 0.8125rem;
line-height: 1.7;
}
.pn-crumbs__list {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.15rem 0.5rem;
margin: 0;
padding: 0;
list-style: none;
color: var(--wp--preset--color--contrast-2);
}
.pn-crumbs__item {
margin: 0;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.pn-crumbs__item + .pn-crumbs__item::before {
color: var(--wp--preset--color--line);
content: "/";
}
.pn-crumbs__item a {
color: inherit;
text-decoration: none;
}
.pn-crumbs__item a:hover {
color: var(--wp--preset--color--accent);
text-decoration: underline;
}
/* 現在地は長くなりがちなので折り返しを許す */
.pn-crumbs__item [aria-current="page"] {
color: var(--wp--preset--color--contrast);
}
@media print {
.pn-crumbs {
display: none;
}
}
/* ==========================================================================
19. 記事下の著者情報
--------------------------------------------------------------------------
HTML は inc/author-box.php が組み立てる。
アバターが無いときは頭文字の丸を描く（Gravatar を使わないため）。
========================================================================== */
.pn-author {
display: flex;
align-items: flex-start;
gap: 1.2rem;
margin-top: 2.5rem;
padding: 1.4rem 1.5rem;
border: 1px solid var(--wp--preset--color--line);
border-radius: 8px;
background-color: var(--wp--preset--color--base-2);
}
.pn-author__avatar,
.pn-author__monogram {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 50%;
}
.pn-author__avatar {
object-fit: cover;
}
.pn-author__monogram {
display: grid;
place-items: center;
background-color: var(--wp--preset--color--accent);
color: #fff;
font-size: 2rem;
font-weight: 700;
line-height: 1;
user-select: none;
}
.pn-author__body {
min-width: 0;
flex: 1;
}
.pn-author__label {
margin: 0;
color: var(--wp--preset--color--contrast-2);
font-size: 0.75rem;
letter-spacing: 0.06em;
}
.pn-author__name {
margin: 0.2rem 0 0.5rem;
font-size: 1.0625rem;
font-weight: 700;
}
.pn-author__bio {
margin: 0;
color: var(--wp--preset--color--contrast-2);
font-size: 0.875rem;
line-height: 1.8;
}
.pn-author__more {
margin: 0.7rem 0 0;
font-size: 0.875rem;
}
@media ( max-width: 600px ) {
.pn-author {
flex-direction: column;
align-items: center;
text-align: center;
}
}
@media print {
.pn-author {
display: none;
}
}
/* ==========================================================================
20. 印刷
========================================================================== */
@media print {
.entry-content pre,
.entry-content .table-scroll {
overflow: visible;
}
.site-sidebar,
.ad-slot,
.entry-nav {
display: none;
}
}