| にする UI が無い。そのため
--_entry--table-th-background-color が出るのはヘッダー行のみで、
残りのセルはすべて td として本文セルの色になる。
コアの :where(td, th) の 1px の罫は currentColor のまま残している。
セレクターの詳細度はクラス2＋要素1で、コアの :where(0) より強い。 */
.single-post .c-entry__content th {
background-color: var(--_entry--table-th-background-color);
}
.single-post .c-entry__content td {
background-color: var(--_entry--table-td-background-color);
}
/* コアのストライプ表は縞に #f0f0f0 を敷き、下端にも同じ色の罫を引くだけで
文字色は触らない。ダーク背景では縞の行の白文字が読めなくなる。
縞を「わずかに明るい暗色」に置き換えて、白文字のまま成立させる。
currentColor から作っているので、明るい面に置いても縞として機能する。
縞は行（tr）に敷くが、上に載る td が不透明だと隠れて全行が同じ色に見える。
ストライプ表に限り td の背景を透過させて行の色を出す。ヘッダー行の th は
#050505 のまま残し、見出しとして区別できるようにする。 */
.single-post .c-entry__content .wp-block-table.is-style-stripes td {
background-color: transparent;
}
.single-post .c-entry__content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: color-mix(in srgb, currentColor 8%, transparent);
}
.single-post .c-entry__content .wp-block-table.is-style-stripes tbody tr:nth-child(even) {
background-color: color-mix(in srgb, currentColor 20%, transparent);
}
/* 20% の行は #504d4c 相当まで明るくなる。ここでは金の強調とリンク（#a4901f）が
2.63:1 まで落ちて読めないため、ストライプ表の中だけ明るい金へ寄せる。
#e8d986 なら 20% の行で 5.86:1、8% の行で 8.87:1 となり本文の 4.5:1 を満たす。
白の本文は 20% の行でも 8.38:1 あるので触らない。 */
.single-post .c-entry__content .wp-block-table.is-style-stripes :is(strong, a:not(.wp-element-button)) {
color: var(--lighter-accent-color);
}
.single-post .c-entry__content .wp-block-table.is-style-stripes {
border-bottom-color: var(--_hairline-color);
}
/* コーポレートサイトはリンクの既定色がアクセントの金。ダーク背景の
#24201f 上では金のコントラストが 5.03:1 で AA を満たすため、
明るい面向けの --_link-color-on-light ではなく金をそのまま使う。
下線はブラウザ既定のまま残し、色に頼らない手がかりを保つ。 */
.single-post .c-entry__content a:not(.wp-element-button) {
color: var(--wp--preset--color--sm-accent);
}
/* 強調はリンクと同じ金にする。ダーク背景 #24201f 上で 5.03:1 で AA を満たす。
リンクと同色になるが、リンクは下線・強調は太字で区別が付くため色は共通で
問題ない。
.single-post .c-entry__content の配下に閉じているため、固定ページ・法定
ページ・記事一覧・カテゴリー・タグ・WooCommerce の各画面には効かない。
b タグはエディターが出力しないので対象にしていない。 */
.single-post .c-entry__content strong {
color: var(--wp--preset--color--sm-accent);
}
/* ----------------------------
* アコーディオン
*
* コーポレートサイトの「よくある質問･お問い合わせ」（/faq-contact/）に合わせる。
* あちらは Snow Monkey Blocks の smb-accordion で、実装値は以下。プラグインの
* blocks/accordion/style-index.css と、項目に直接書かれたインライン変数
* （--smb-accordion-item--background-color:var(--_dark-color-gray)）から実測した。
*
* 項目の間隔 --_margin-1（1.2rem）
* 見出しの背景 --_dark-color-gray（#666）
* 見出しの文字色 inherit。記事はダーク背景に白文字なので #666 上で 5.74:1
* 見出しの余白 calc(--_padding-1 * .5) --_padding-1（0.6rem 1.2rem）
* 見出しの文字 本文と同じ 1rem。SMB のラベルは文字サイズを持たない
* 本文の余白 --_padding1（1.8rem）
* アイコン 右端で下向き。開くと 180 度回る
*
* ストア側はコアのアコーディオンブロックでクラス名が違う。役割の対応は
* smb-accordion__item__title → .wp-block-accordion-heading__toggle
* smb-accordion__item__body → .wp-block-accordion-panel
*
* 開閉の判定はアイテムの .is-open ではなくボタンの aria-expanded を見ている。
* .is-open は Interactivity API が付けるクラスで、状態はサーバー側の出力にも
* aria-expanded として入っているため、こちらのほうが取りこぼしがない。
* ---------------------------- */
.single-post .c-entry__content .wp-block-accordion > * + * {
margin-top: var(--_margin-1);
}
/* 見出しは帯そのもの。h3 の既定の文字サイズを本文サイズへ戻す。 */
.single-post .c-entry__content .wp-block-accordion-heading {
--_font-size-level: 0;
margin: 0;
font-size: var(--_font-size);
line-height: var(--_line-height);
}
/* ボタンの既定の見た目を落として帯にする。 */
.single-post .c-entry__content .wp-block-accordion-heading__toggle {
display: flex;
align-items: center;
width: 100%;
padding: calc(var(--_padding-1) * 0.5) var(--_padding-1);
border: none;
border-radius: 0;
background-color: var(--_dark-color-gray);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
/* SMB は不可視のチェックボックスに outline を出している。こちらはボタンが
実体なのでボタンへ直接付ける。太さと形は向こうに合わせる。 */
.single-post .c-entry__content .wp-block-accordion-heading__toggle:focus-visible {
outline: 1px solid currentColor;
}
.single-post .c-entry__content .wp-block-accordion-heading__toggle-title {
flex: 1 1 auto;
}
/* アイコン。ブロックが出力する「+」の文字は font-size: 0 で消す。
コアはこのスパンへ display: flex と width/height: 1.2em を与えている。
font-size を 0 にすると em も 0 になり、中身が flex アイテムとして
潰れてしまう。実寸の rem で指定し直し、display も block へ戻す。 */
.single-post .c-entry__content .wp-block-accordion-heading__toggle-icon {
display: block;
flex: 0 0 auto;
width: 0.75rem;
height: 0.75rem;
margin-left: var(--_margin-1);
font-size: 0;
transition: transform var(--_global--transition-duration)
var(--_global--transition-function-timing) var(--_global--transition-delay);
}
/* 設定でアイコンを変えると svg が出るので隠す。 */
.single-post .c-entry__content .wp-block-accordion-heading__toggle-icon svg {
display: none;
}
/* 下向きの山形。border を45度回す描き方はコアの flex 指定と噛み合わないため、
SVG をマスクにして currentColor で塗る。コーポレートサイト側の
Snow Monkey Blocks も同じ手法でアイコンを差し替えている。
viewBox は 16×16 で、山形は y=3〜13 に置いて上下の中心を合わせてある。 */
.single-post .c-entry__content .wp-block-accordion-heading__toggle-icon::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13 0 5l2-2 6 6 6-6 2 2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13 0 5l2-2 6 6 6-6 2 2z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.single-post
.c-entry__content
.wp-block-accordion-heading__toggle[aria-expanded="true"]
.wp-block-accordion-heading__toggle-icon {
transform: rotate(180deg);
}
/* 本文。is-prose の縦のリズムは .c-entry__content の直下にしか効かないため、
パネルの中の間隔はここで作る。先頭要素に上余白を付けないことで、
padding の 1.8rem がそのまま上下の余白になる。 */
.single-post .c-entry__content .wp-block-accordion-panel {
min-height: 0;
overflow: hidden;
padding: var(--_padding1);
}
/* 閉じているパネルは hidden="until-found" になる。これは content-visibility:
hidden 相当で、中身は描画されないが箱そのものは残る。padding を残すと
上下 1.8rem ずつ、計 3.6rem の見えない余白が項目の間に居座る。
コアは margin-block-start だけを 0 にしていて padding は面倒を見ない。
左右は高さに関わらないので、詰めるのは padding-block だけでよい。 */
.single-post .c-entry__content .wp-block-accordion-panel[hidden] {
padding-block: 0;
opacity: 0;
}
/* 開閉のアニメーション。
コアは .wp-block-accordion-item に transition: grid-template-rows .3s
ease-out を宣言しているが、行を定義している CSS がどこにも無いため
効いていない。ここでグリッドを与えて、その宣言を生かす。行は
「見出し = auto」「パネル = 0fr / 1fr」の2本で、パネル側の
overflow: hidden と min-height: 0 が高さの伸縮を成立させる。
コアの宣言は @media (prefers-reduced-motion: no-preference) の中にあるため、
動きを減らす設定の環境では自動的に止まる。こちらの transition も同じ条件に
入れて挙動を揃える。
padding-block を一緒に遷移させているのは、閉じ切る前に上下の余白だけが
残って最後にカクつくのを防ぐため。
content-visibility と display を allow-discrete で遷移させると、閉じる間も
中身が描画され続け、アニメーションの終わりで隠れる。hidden の値が
until-found になるか通常の hidden になるかはブラウザーによって変わるので
両方を対象にしている。allow-discrete に未対応のブラウザーでは中身が先に
消えるだけで、開閉そのものは破綻しない。 */
@media (prefers-reduced-motion: no-preference) {
/* 開くとき。遷移に使われるのは「行き先の状態」に書いた指定なので、
hidden が外れる側はこちらが効く。文字は箱が広がり始めてから追いかける
ように 0.1s 遅らせる。同時に出すと文字が潰れた状態から伸びて見える。 */
.single-post .c-entry__content .wp-block-accordion-panel {
transition:
padding-block 0.3s ease-out,
opacity 0.25s ease-out 0.1s,
content-visibility 0.3s allow-discrete,
display 0.3s allow-discrete;
}
/* 閉じるとき。文字を先に消して、あとは箱が縮むだけにする。遅延は入れない。
詳細度が上の [hidden] なので、閉じる側ではこちらが上の指定に勝つ。 */
.single-post .c-entry__content .wp-block-accordion-panel[hidden] {
transition:
padding-block 0.3s ease-out,
opacity 0.15s ease-out,
content-visibility 0.3s allow-discrete,
display 0.3s allow-discrete;
}
}
.single-post .c-entry__content .wp-block-accordion-item {
display: grid;
grid-template-rows: auto 0fr;
}
.single-post .c-entry__content .wp-block-accordion-item.is-open {
grid-template-rows: auto 1fr;
}
.single-post .c-entry__content .wp-block-accordion-panel > * {
margin-top: 0;
margin-bottom: 0;
}
.single-post .c-entry__content .wp-block-accordion-panel > * + * {
margin-top: var(--_margin1);
}
/* ----------------------------
* 目次
*
* h2 が3つ以上ある投稿へ、functions.php の
* ninoichi_store_prepend_table_of_contents() が最初の h2 の直前に差し込む。
* ページ内の移動は html { scroll-behavior: smooth } が受け持つので
* JavaScript は使わない。
*
* is-prose の縦のリズムは .c-entry__content の直下にだけ効くため、外枠の
* nav は段落と同じ 1.8rem で並ぶ。内側の p と ol にはブラウザ既定の余白が
* 出るので、ここで打ち消す。
*
* クラス名は Snow Monkey に対応する部品が無いため、c- の接頭辞だけを合わせた
* 独自の名前にしている。Snow Monkey Blocks の目次ブロックへ将来置き換える
* 場合は、この節と functions.php の関数がまとめて不要になる。
* ------------------------- */
/* 色は表と共用する。囲みの地は td、見出し（INDEX）の帯は th と同じ。
罫を残しているのは、地色 #33302f と本文の地色 #24201f の差が 1.5:1 しか
なく、罫が無いと囲みの輪郭がほぼ見えないため。
padding を外枠に置かず帯と一覧へ振り分けているのは、帯を囲みの端まで
伸ばすため。 */
.c-toc {
background-color: var(--_entry--table-td-background-color);
border-radius: 10px;
}
.c-toc__title {
margin: 0;
padding: var(--_padding-1) var(--_padding1);
border-radius: 10px 10px 0 0;
background-color: var(--_entry--table-th-background-color);
font-size: var(--wp--preset--font-size--sm-l);
font-weight: 700;
text-align: center;
}
/* 左だけ連番の桁を足す。ブラウザ既定の padding-left: 40px を打ち消しつつ
連番が囲みの内側へ収まる。 */
.c-toc__list {
margin: 0;
padding: var(--_padding1);
padding-left: calc(var(--_padding1) + 1.4em);
}
.c-toc__item + .c-toc__item {
margin-top: var(--_margin-2);
}
/* 下線は付けない。囲みと連番でリンクの並びだと分かるため。
本文のリンク（金・下線あり）と見分けが付く状態にもなる。 */
.c-toc__link {
color: inherit;
text-decoration: none;
}
/* hover と focus は --light-accent-color（#ddc74c）にする。本文と同じ
金（#a4901f）は地色が #24201f なら 5.03:1 で足りるが、目次の地色
#33302f 上では 4.11:1 で AA に届かない。明るい金なら 7.70:1。 */
.c-toc__link:hover,
.c-toc__link:focus-visible {
color: var(--light-accent-color);
text-decoration: underline;
}
/* 目次から飛んだ見出しが sticky ヘッダーの下へ潜らないようにする。
ヘッダーの高さはロゴ（507×209 を幅 81px / 101px で描画）と余白の合計で、
SP が約 60px、1024px 以上が約 80px。余裕を見て一段大きい値にしている。
管理バーはログイン中だけ 46px / 32px 乗るため別に足す。 */
.single-post .c-entry__content h2 {
--_toc-scroll-margin: 5rem;
scroll-margin-top: var(--_toc-scroll-margin);
}
@media (min-width: 1024px) {
.single-post .c-entry__content h2 {
--_toc-scroll-margin: 6.5rem;
}
}
.admin-bar.single-post .c-entry__content h2 {
scroll-margin-top: calc(var(--_toc-scroll-margin) + 46px);
}
@media (min-width: 783px) {
.admin-bar.single-post .c-entry__content h2 {
scroll-margin-top: calc(var(--_toc-scroll-margin) + 32px);
}
}
/* ----------------------------
* 前後の記事ナビ
*
* 片方しか無いときも正しい側に寄るよう、grid ではなく flex で組む。
* 次の記事だけのときは margin-left: auto で右へ送られる。
* ------------------------- */
.c-prev-next-nav {
max-width: var(--_entry--content-width);
margin-top: var(--_margin2);
margin-inline: auto;
padding-top: var(--_padding1);
border-top: 1px solid var(--_hairline-color);
}
.c-prev-next-nav .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--_s-1);
}
.c-prev-next-nav .nav-next {
margin-left: auto;
text-align: right;
}
/* 768px 以上は2列に並べる。折り返していたのは記事タイトルが長く、flex 項目の
既定（min-width: auto）が内容の幅より縮まないため。min-width: 0 で縮む
ようにして、flex: 1 1 0 で幅を半分ずつに割る。タイトルは列の中で折り返す。
片方しか無いときの寄せ方は変わらない。1項目だけなら幅いっぱいに伸びて、
前の記事は左（既定）、次の記事は text-align: right で右へ寄る。 */
@media (min-width: 768px) {
.c-prev-next-nav .nav-links {
flex-wrap: nowrap;
gap: var(--_s1);
}
.c-prev-next-nav .nav-previous,
.c-prev-next-nav .nav-next {
flex: 1 1 0;
min-width: 0;
}
}
.c-prev-next-nav a {
display: block;
text-decoration: none;
}
.c-prev-next-nav__label {
display: block;
--_font-size-level: -1;
color: var(--wp--preset--color--sm-accent);
font-size: var(--_font-size);
line-height: var(--_line-height);
}
.c-prev-next-nav__title {
display: block;
margin-top: 0.2em;
}
/* ----------------------------
* 記事一覧・カテゴリーアーカイブ
*
* クラス名は Snow Monkey の c-entries--simple / c-entry-summary に合わせる。
* index.php は検索結果でも同じマークアップを使うため、この節の色は
* currentColor から作って明るい背景でも成立するようにしてある。
* ------------------------- */
/* カテゴリーの絞り込み。記事一覧とカテゴリーアーカイブの先頭に置く。
記事本文と同じ幅に合わせて左端を揃える。 */
.c-taxonomy-nav {
max-width: var(--_entry--content-width);
margin-inline: auto;
margin-bottom: var(--_margin1);
padding-bottom: var(--_padding-1);
border-bottom: 1px solid var(--_hairline-color);
}
/* テーマ既定の ul は padding-left: 1.5em を持つため打ち消す。 */
.c-taxonomy-nav__list {
display: flex;
flex-wrap: wrap;
gap: 0.6em 1.4em;
margin: 0;
padding: 0;
list-style: none;
}
.c-taxonomy-nav__link {
--_font-size-level: -1;
display: inline-block;
padding-bottom: 0.2em;
border-bottom: 1px solid transparent;
color: var(--_muted-color);
font-size: var(--_font-size);
line-height: var(--_line-height);
text-decoration: none;
}
.c-taxonomy-nav__link:hover {
color: var(--wp--preset--color--sm-accent);
}
/* 表示中のカテゴリーは金の下線で示す。色だけに頼らないよう線も引く。 */
.c-taxonomy-nav__link[aria-current="page"] {
border-bottom-color: var(--wp--preset--color--sm-accent);
color: var(--wp--preset--color--sm-accent);
}
/* 一覧も記事本文と同じ幅に揃える。832px のうち画像が 34% でおよそ 283px、
本文が 520px 前後になる。 */
.c-entries {
max-width: var(--_entry--content-width);
margin-inline: auto;
}
.c-entries__item + .c-entries__item {
margin-top: var(--_margin1);
padding-top: var(--_margin1);
border-top: 1px solid var(--_hairline-color);
}
.c-entry-summary {
position: relative;
display: flex;
flex-direction: column;
gap: var(--_s-1);
}
@media (min-width: 768px) {
.c-entry-summary {
flex-direction: row;
gap: var(--_s1);
}
.c-entry-summary__figure {
flex: 0 0 34%;
}
}
.c-entry-summary__figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: filter var(--_global--transition-duration) var(--_global--transition-function-timing);
}
.c-entry-summary:hover .c-entry-summary__figure img {
filter: brightness(85%);
}
.c-entry-summary__body {
flex: 1 1 auto;
min-width: 0;
}
.c-entry-summary__meta {
--_font-size-level: -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3em 0.9em;
font-size: var(--_font-size);
line-height: var(--_line-height);
}
/* カテゴリーはカード全体のリンク（タイトルの擬似要素）より手前に重ね、
独立したリンクとして機能させる。z-index を外すと擬似要素に覆われて
カード側のリンクだけが効くようになる。 */
.c-entry-summary__term {
position: relative;
z-index: 1;
color: var(--wp--preset--color--sm-accent);
text-decoration: none;
}
.c-entry-summary__term:hover {
text-decoration: underline;
}
.c-entry-summary__date {
color: var(--_muted-color);
}
.c-entry-summary__title {
--_font-size-level: 1;
margin: var(--_margin-2) 0 0;
padding-bottom: var(--_padding-2);
border-bottom: 1px solid var(--_hairline-color);
font-size: var(--_fluid-font-size);
line-height: var(--_line-height);
}
.c-entry-summary__title a {
text-decoration: none;
}
/* カード全体をクリックできるようにする。リンクの実体はタイトルだけなので、
支援技術には記事タイトルを読み上げる1つのリンクとして伝わる。
カテゴリーをリンクにしていないのは、この擬似要素と入れ子になるため。 */
.c-entry-summary__title a::after {
content: "";
position: absolute;
inset: 0;
}
.c-entry-summary__content {
--_font-size-level: -1;
margin-top: var(--_margin-1);
color: var(--_muted-color);
font-size: var(--_font-size);
line-height: var(--_line-height);
}
/* the_excerpt() は で出力する。テーマに p のマージンリセットが無いため
ブラウザ既定の 1em が付く。 */
.c-entry-summary__content p {
margin: 0;
}
/* ----------------------------
* ページ送り
*
* the_posts_pagination() が出す .navigation.pagination が対象。
* ------------------------- */
.pagination {
margin-top: var(--_margin2);
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--_s-2);
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.4em;
padding: 0.4em 0.7em;
border: 1px solid var(--_hairline-color);
text-decoration: none;
}
.pagination .page-numbers.current {
border-color: var(--wp--preset--color--sm-accent);
background-color: var(--wp--preset--color--sm-accent);
color: var(--_color-white);
}
.pagination .page-numbers.dots {
border-color: transparent;
}
/* ============================
* 画像グリッド
*
* 本文中に並べた画像を、スマートフォンでは縦、タブレット以上では横に並べる。
* 商品説明は classic editor（WooCommerce の商品データ）で書くためカラム
* ブロックが使えない。テキストタブで .c-media-grid の div を書き、段組みは
* ここで与える。投稿本文でも同じクラスで使える。
*
* 境目を 768px にしているのは iPad の縦置き（768px）を横並びに含めるため。
* ========================= */
.c-media-grid {
display: grid;
gap: var(--_margin-1);
margin-block: var(--_margin1);
}
@media (min-width: 768px) {
.c-media-grid {
grid-template-columns: repeat(2, 1fr);
align-items: start;
}
}
/* classic editor はキャプション付き画像の figure に style="width: 600px" を
書き戻す。インラインの指定には詳細度で勝てないため !important で外す。
このクラスの中だけの指定なので影響範囲は閉じている。 */
.c-media-grid > * {
width: auto !important;
max-width: 100%;
margin: 0;
}
.c-media-grid img {
display: block;
width: 100%;
height: auto;
}
/* キャプション。本文より一段小さくし、暗い背景で沈む色に寄せる。 */
.c-media-grid .wp-caption-text {
margin-block: 0.6em 0;
color: var(--_color-text-muted-on-dark);
font-size: var(--wp--preset--font-size--sm-s);
line-height: 1.6;
}
/* ============================
* 管理バーとの調整
*
* 管理バーは 601px 以上で position: fixed になるため、追従するヘッダーが
* その裏に隠れる。バーの高さ（783px 以上は 32px、それ未満は 46px）だけ下げる。
* ドロワーは常に position: fixed なので、内側に余白を足して中身を逃がす。
* いずれもログイン中のみ影響する。
* ========================= */
@media (min-width: 601px) {
.admin-bar .l-header {
top: 46px;
}
}
@media (min-width: 783px) {
.admin-bar .l-header {
top: 32px;
}
}
.admin-bar .c-drawer__inner {
padding-top: calc(var(--_space) + 46px);
}
@media (min-width: 783px) {
.admin-bar .c-drawer__inner {
padding-top: calc(var(--_space) + 32px);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
}
}
|