/* * 宅地造成の地盤技術の元テーマの設定（旧DBの生成CSS）に、なべちゃんの指示で足したもの。共通の additions.css のあとに読む。 * 元テーマのCSS・旧DBの生成CSSは書き換えない。 * * 1. 色テーマは今のまま（2026-10-12、なべちゃんの起票 manage の tasks/inbox/nabe_20261012-1612.md「宅造地盤のSWELL化について * 色テーマは現状を維持してほしい」）。旧DBの色（ヘッダー・フッター #393e46、主の色 #222831、地 #f5f5f5、リンク #1176d4、 * 見出し #000000）の代わりに、移行後の表示の色（takuzou-jiban の public_html/assets/css/style.css の :root）を、同じ役割の * 元テーマの色の変数に書く。対応は次のとおり（左が元テーマの設定、右が移行後の表示の変数）。 * color_main（主の色） ← --c-accent #1f5b47（主色。見出しの線・ボタン・印） * color_text（本文の字） ← --c-text #1b2620 * color_link（リンク） ← --c-link #1f5b47 * color_htag（見出しの地） ← --c-accent #1f5b47（移行後の表示の h2 の線の色。元テーマも空なら主の色を使う） * color_bg（ページの地） ← --c-page-bg #f3f6f3 * color_header_bg・color_footer_bg ← --c-dark #16412f（ヘッダーとフッターの地） * color_header_text・color_footer_text ← --c-on-dark #ffffff * 主の色から元テーマが作る色（--color_main_thin・--color_main_dark・リストの印の色）は、元テーマと同じ計算 * （classes/Style/Color.php の common() と classes/Utility/Others.php の get_rgba()。thin は各色を 1.25 倍して不透明度 0.05、 * dark は 0.75 倍）で #1f5b47 から出した値。生成CSSが主の色を直に書いている所は、記事一覧の画像の上の分類の札 * （.c-postThumb__cat）だけなので、同じセレクタで色だけを書く。差し色の赤土色（--c-clay）に当たる元テーマの設定は無い。 */ /* 1 の色の変数と、2-1 の字の大きさの変数（--swl-fz--root・--swl-fz--side。理由は下の 2-1）をここにまとめて書く */ :root{--color_main:#1f5b47;--color_text:#1b2620;--color_link:#1f5b47;--color_htag:#1f5b47;--color_bg:#f3f6f3;--color_main_thin:rgba(39, 114, 89, 0.05 );--color_main_dark:rgba(23, 68, 53, 1 );--color_list_check:#1f5b47;--color_list_num:#1f5b47;--color_header_bg:#16412f;--color_header_text:#ffffff;--color_footer_bg:#16412f;--color_footer_text:#ffffff;--swl-fz--root:16px;--swl-fz--side:16px} .c-postThumb__cat{background-color:#1f5b47} /* * 2. シニアにも優しい（2026-10-13、なべちゃん「まずはSWELLに戻してからシニアにも優しくしてな」。決まりは takuzou-jiban の AGENTS.md * 「字の大きさ — シニアにも優しいサイト」：読む字 16px 以上・添え書き 14px 以上。本文 18px・スマホ 17px は共通の additions.css）。 * 元テーマのCSSは書き換えず、下限を割る部品だけを、元テーマと同じセレクタ（このファイルは元テーマの部品と旧ポチップの CSS より後、 * CSS のいちばん最後に読む（takuzou-jiban の app/views/layout-swell.php）ので、同じ詳細度なら勝つ）で * max(元の値, 下限) にする（元の値のほうが大きい幅では元のまま）。読む字・添え書きの分け方は AGENTS.md と同じ * （添え書き：タグ・記事の分類の札・カードの分類と日付・肩書き・著作権表示・Amazon の免責文・PR の文・シェアの字・TOP・引用元・ * ヘッダーの細い帯の一文・メニューの英字の添え書き）。測り方はスキル tj-senior-optimize の measure-text.mjs（全ページ・幅 1280 と 390）。 * * 2-1. html の字の大きさ（rem の元）を全幅 16px にする。元テーマは 599px 以下で画面幅の 3.6%（390px で 14px、320px で 11.5px、599px で 21.6px） * にしていて、rem で書いた部品（計算ツール 3 本の寸法・計算フォームの説明の max(.84em, 1rem) など）が幅で伸び縮みした。 * このサイトは html を 16px のままにする決まり（AGENTS.md「計算フォームを壊さない」）。サイドバーの字の基準（--swl-fz--side。 * 960px 以上で 14px）も 16px にする（サイドバーの目次・カテゴリー・プロフィールなどが読む字）。変数は 1 の :root に書いた。 */ /* 2-2. 読む字（16px 以上） */ .p-breadcrumb__list{font-size:1rem} .c-gnav>.menu-item>a .ttl{font-size:1rem} .p-articleMetas__times,.p-articleMetas__author{font-size:1rem} .c-postTitle__date .__y{font-size:1rem} #body_wrap .p-postList .p-postList__title,#body_wrap .p-postList .p-postList__excerpt{font-size:1rem} .p-pnLinks__item{font-size:1rem} .p-blogCard__caption{font-size:1rem} .p-blogCard__excerpt{font-size:max(.8em,1rem)} .c-tabList__button{font-size:1rem} .c-pagination,[class*=page-numbers]{font-size:1rem} .c-bannerLink__label{font-size:1rem} .c-mvBtn__btn{font-size:1rem} /* 404 の「TOPページへ」（元テーマのもっと見るボタン。字は .9em で、スマホの本文 17px では 15.3px だった。2026-10-13。 404 は measure-text.mjs が応答 404 で飛ばすので、名指しで測って見つけた） */ .is-style-more_btn{--the-fz:max(.9em,1rem)} .p-profileBox__text{font-size:1rem} .p-authorBox__desc{font-size:1rem} .l-footer__nav a{font-size:1rem} .l-articleBottom__section.-related>p{font-size:1rem} .pochipp-box .pochipp-box__btn{font-size:1rem} /* 旧ポチップは箱の字をスマホ（599px 以下）で 13px（縦並びの箱は 14px）、360px 以下で 14px にする。箱の題が読む字なので、箱の基準を 16px に */ @media screen and (max-width:599px){.pochipp-box,.pochipp-box[data-lyt-mb=vrtcl]{font-size:1rem}} .wp-block-code.wp-block-code{font-size:1rem} .is-style-onborder_ttl2>.cap_box_ttl,.is-style-onborder_ttl>.cap_box_ttl,.is-style-small_ttl .cap_box_ttl,.is-style-inner>.cap_box_ttl{font-size:max(.85em,1rem)} .wp-block-embed>figcaption,.wp-block-image figcaption,.wp-block-table figcaption,.wp-block-video figcaption{font-size:max(.8em,1rem)} .post_content :not(pre)>code{font-size:max(.9em,1rem)} @media not all and (min-width:600px){ .c-widget__title{font-size:max(4vw,1rem)} .c-postTitle__date .__y{font-size:max(3vw,1rem)} .c-postTitle__date .__md{font-size:max(4.2vw,1rem)} .p-postList .c-postTitle__ttl{font-size:max(4vw,1rem)} #body_wrap .-type-card .p-postList__title,#body_wrap .-type-list .p-postList__title{font-size:max(3.6vw,1rem)} #body_wrap .-type-card.-sp-col1 .p-postList__title{font-size:max(3.8vw,1rem)} #body_wrap .-type-card .p-postList__excerpt{font-size:max(3.2vw,1rem)} #body_wrap .-type-list .p-postList__excerpt{font-size:max(3.4vw,1rem)} .p-pnLinks__item{font-size:max(3vw,1rem)} .p-blogCard__title{font-size:max(3.6vw,1rem)} .c-bannerLink__label{font-size:max(3.4vw,1rem)} .p-mainVisual__slideText{font-size:max(3.2vw,1rem)} .c-mvBtn__btn{font-size:max(3.2vw,1rem)} .p-profileBox__text{font-size:max(3.4vw,1rem)} .l-footer__nav a{font-size:max(3vw,1rem)} .c-secTitle{font-size:max(4.5vw,1rem)} } /* 2-3. 添え書き（14px 以上） */ .l-header__bar .c-catchphrase{font-size:.875rem;width:auto} /* width は 2-4 */ .c-smallNavTitle{font-size:.875rem} .p-articleMetas .p-articleMetas__termList,.p-articleMetas.-top .p-articleMetas__termList{font-size:.875rem} .p-postList .p-postList__meta{font-size:.875rem} .p-postList .c-postTitle__date .__y{font-size:.875rem} .c-postThumb .c-postThumb__cat{font-size:.875rem} .tag-cloud-link.tag-cloud-link.tag-cloud-link{font-size:.875rem!important} .p-profileBox__job{font-size:.875rem} .p-authorBox__position.u-fz-s{font-size:max(var(--swl-fz--small),.875rem)!important} .l-footer .copyright{font-size:.875rem} .c-copyedPoppup{font-size:.875rem} .c-fixBtn__label{font-size:.875rem} .p-articleThumb__caption{font-size:max(.8em,.875rem)} .post_content blockquote cite{font-size:max(.8em,.875rem)} .c-big-urlcopy .c-urlcopy__text{font-size:max(.8em,.875rem)} .pochipp-box__info{font-size:.875rem} .pochipp-box__review span{font-size:.875rem} @media not all and (min-width:600px){ .p-postList .c-postTitle__date .__md{font-size:max(4vw,.875rem)} .p-profileBox__job{font-size:max(3.2vw,.875rem)} } /* * 2-4. 字を大きくしたぶんの並び（字は縮めずに、並びと幅を変える。スキル tj-senior-optimize の「直しかたの定石」） * - ヘッダーの細い帯の一文：元テーマは帯の幅の半分（width:50%）で切る。14px にすると 1120px 以下で終わりの「| 宅地造成の地盤技術」が * 字の途中で切れたので、幅の上限を外す（右のアイコンの手前までは使う。セレクタが同じなので 2-3 の字の大きさの行に書いた） * - 上のメニュー（960px 以上。ロゴとメニューを横に並べる元テーマの -series）：字を 16px・14px にすると、ロゴと9項目が1行に入らない幅 * （1120px 以下）で、ロゴが1字ずつの縦書きに潰れて帯と記事の頭に重なり、960px では最後の項目が画面の外へ出た（2026-10-13 に撮って見た）。 * ロゴは2行より細くしない（136px＝24px の字5字と、元テーマのロゴの右の余白 16px）。1行に入らない幅ではメニューを次の行へ送る。 * 送った行の高さは、追従ヘッダーが1行のときの高さ（64px）を下限にする（下限が無いと 30px に潰れて英字の添え書きが切れた）。 * 追従ヘッダーも同じ並び。1200px 以上は元テーマのまま1行 */ @media (min-width:960px){ .-series .l-header__inner,.-series .l-fixHeader__inner{flex-wrap:wrap} .-series .l-header__logo,.-series .l-fixHeader__logo{flex:1 0 136px;max-width:max-content} .-series .l-header__gnav,.-series .l-fixHeader__gnav{min-height:64px} } /* * 2-5. スマホの本文の表（767px 以下）：元テーマと WordPress 本体の表の CSS は、本文の表（table.has-fixed-layout）を固定の組み方 * （table-layout:fixed）で幅 100% にするので、列が等分に細くなる。字を 16px 以上にすると、列が 4 字幅未満に潰れる表が 17 ページにあった * （いちばん細い列は 0.3 字幅で「支持力係数」が 5 行。2026-10-13、幅 390 で manage の tools/ux-survey.sh）。 * 移行後の表示で決めたスマホの表の下限（2026-10-01。takuzou-jiban の public_html/assets/css/style.css の「スマホで列が細くなりすぎないよう」： * 字の列は中身で字 5 字ぶん、中央揃えのセルは 5em、中央揃えの見出しのセルは下限なし）を、元テーマのセルの下限の変数（--swl-minwidth-cell） * で同じに置く。元テーマのセルの余白は左右 .75em ずつなので、字の列は 5em＋1.5em。固定の組み方のままだと下限が効かないので、 * スマホだけ自動の組み方にする（移行後の表示も自動の組み方だった）。収まらない表は枠（本体の .wp-block-table{overflow-x:auto}）の中で * 横に送り、溢れているあいだ main.js が付ける .is-scrollable で右端をぼかす（style.css の同じ規則の写し）。 * 本体の表の CSS は固定の組み方の表のセルを word-break:break-word にするので、自動の組み方では列が 1 字まで細くなれる * （「D10」が D／1／0 と折れた）。スマホだけ、移行後の表示と同じく、セルは普通の折り返し、見出しのセルは語の途中で切らない * （style.css の「見出しのセルは折り返してよいが、語の途中では切らない」）。PC は元テーマのまま */ @media not all and (min-width:768px){ .post_content .wp-block-table .has-fixed-layout{table-layout:auto} .post_content .wp-block-table .has-fixed-layout td{word-break:normal} .post_content .wp-block-table .has-fixed-layout th{word-break:keep-all;word-break:auto-phrase} .post_content .wp-block-table{--swl-minwidth-cell:calc(5em + 1.5em)} .post_content .wp-block-table th.has-text-align-center,.post_content .wp-block-table.is-all-centered th{--swl-minwidth-cell:0px} .post_content .wp-block-table td.has-text-align-center,.post_content .wp-block-table.is-all-centered td{--swl-minwidth-cell:5em} } .post_content .wp-block-table.is-scrollable:not(:focus-visible){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),rgba(0,0,0,.15));mask-image:linear-gradient(to right,#000 calc(100% - 32px),rgba(0,0,0,.15))} /* * 3. ページ送りの番号（鍋ログ系列の FPS3サイトと同じ直し。2026-10-12、なべちゃん「コントラストが足りていなければ修正」）：旧設定のページ送り（塗り）は * 今のページ以外の番号を白い字・地 #dedede で描き、濃さが 1.34:1 だった（manage の contrast.sh。このサイトは 2026-10-13 に測った）。地はそのまま、 * 字だけ本文の色（--color_text）にする。今のページ（.current）と hover は元の色（主の色の地に白い字）のまま。 */ [class*="page-numbers"]:not(.current):not(:hover){color:var(--color_text)} /* * 3-2. トップのピックアップバナーの名前（3 と同じ考え方）：旧設定の形（-cap-btm_wide）は画像の下の帯を黒 25% で描き、白い字が * 明るい画像で 4.5:1 に足りなかった（2026-10-13、manage の bg-contrast.sh で8枚を画素で測った最悪：幅 1280 で「盛土工」4.17:1、 * 35% にしても幅 390 で 3.84:1 が残った）。帯の黒だけを 55% にする（真っ白の画像の上でも 4.5:1 を超える最小の濃さ。白の上で 4.76:1。 * 字の色・大きさ・置き場所・影は元のまま。帯の下の画像は透けたまま） */ .-cap-btm_wide .c-bannerLink__label{background:rgba(0,0,0,.55)} /* * 4. 商品の箱のすぐ上の PR の行（2026-10-13、なべちゃんの答え「案 B 今の本番と同じ札と淡い小さな字・下に点線」。manage の * tasks/nabe/done/manage_takuzou-swell-pr-line.md）：旧ポチップの箱には PR の行が無いので、共通部品が箱の外のすぐ上に出す * （manage の docs/product-hub.md「旧ポチップの HTML で組む」）。見た目の指定が無いと本文の段落と同じ字になり、「PR」と文がくっついて * 「PR以下は…」と読めた。今の本番（移行後の表示の style.css の .c-productBox__pr・__pr-tag）と同じ値（字 #5f6f66＝--c-text-weak、 * 線 #d6dfd8＝--c-border、14px、角 6px）で書き、箱との間だけ詰める（旧ポチップの箱の上の余白は 2em）。PR の文は添え書き（14px 以上） */ .pochipp-box__pr{margin:0;padding-bottom:.75rem;border-bottom:1px dashed #d6dfd8;color:#5f6f66;font-size:.875rem;line-height:1.7} .pochipp-box__pr-tag{display:inline-block;margin-right:.5rem;padding:.0625rem .5rem;border:1px solid #d6dfd8;border-radius:6px;font-size:.875rem;font-weight:700} body:not(#__) .pochipp-box__pr+.pochipp-box{margin-top:1em}