の中ではなく、本文側とサイドバーの兄弟として #content（.l-content）の直下に置いてある。 .l-content は flex-wrap の横並びなので、width:100% の子をひとつ入れるとそこだけ1行を占め、本文側とサイドバーがその下にそろって並ぶ。 order で先頭に回すのは、記事下の .kh-postFoot（order:99）と同じやり方。見出しを

の中に戻すと、そのぶん記事カードだけが下がり、サイドバーの上端とずれる。 -------------------------------------------------------------------------- */ .l-content > .kh-archiveHead { order: -1; width: 100%; } /* 帯の幅は左の記事カード側にそろえる。サイドバーの上まで伸ばさない。行そのものは width:100% のまま（そうしないと本文側と同じ行に収まってしまう）で、中身だけをサイドバーの手前で止める。 SWELLが2カラムに組むのは960px以上。それ未満は1カラムなので幅は全部使う。 */ @media (min-width: 960px) { .l-content > .kh-archiveHead > * { max-width: calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin)); } } /* 下の余白。見出しの線と記事カードの上辺が近いと、線がカードの飾りに見えてしまう。行がひとつ分空くくらいまで離す。 */ .kh-archiveHead { margin: 8px 0 52px; } /* 下の余白が線との距離になる。行の高さ1.65が文字の下に7pxほどの余りを作るので、見た目の間隔はこの数字より広い。詰めるときはここを動かす。 */ .kh-archiveHead__title { margin: 0; padding: 0 0 12px; border: none; border-radius: 0; background: none; font-family: var(--kh-font-ui); font-weight: var(--kh-weight-ui); font-size: 23px; line-height: 1.65; letter-spacing: 0.02em; font-feature-settings: "palt" 1; color: var(--kh-ink); text-align: left; border-bottom: 2px solid var(--kh-frame); } /* 説明文は帯の外に置くので、帯とのあいだを空ける */ .kh-archiveHead__desc { margin: 16px 0 0; max-width: 720px; font-size: 14px; line-height: 1.9; color: var(--kh-ink); } .kh-archiveHead__desc p { margin: 0; } /* -------------------------------------------------------------------------- カテゴリー／タグから探す下敷きはサイボウズ式の「おすすめのタグ」。名前を色のピルにして、横に流して折り返す。左がカテゴリー、右がタグの2列。札の見た目は両方そろえてあり、分けているのは見出しだけ。タグの数が増えても、折り返すだけで高さが伸びる。 -------------------------------------------------------------------------- */ .kh-taxo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 88px; align-items: start; } /* 列が1つだけのとき（タグが無いなど）は全幅に伸ばさず、左半分に置く。ピルは短いので、全幅に引き伸ばしても隙間が増えるだけになる。 */ .kh-taxo__col { min-width: 0; } /* 見出しは .kh-section__title を共有している。列の中では上の余白が要らないので、ここでは触らずセクション側の余白にまかせている。 */ .kh-taxo__list { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; } .kh-taxo__item { margin: 0; } /* ピル。カテゴリーもタグも同じ線だけの札にしている。塗りつぶしにすると、白い面の上で緑が強く出すぎて、すぐ下の新着記事より先に目に入ってしまう。中で折り返すと札の形が崩れるので nowrap。書体はウェイト500しか読み込んでいないので太さは触らないこと。 */ .kh-taxo__pill { display: inline-block; padding: 6px 16px; border: 1px solid var(--kh-line); border-radius: 999px; background: transparent; color: var(--kh-ink); font-family: var(--kh-font-ui); font-weight: var(--kh-weight-ui); font-size: 14px; line-height: 1.6; text-decoration: none; white-space: nowrap; transition: background var(--kh-hover-dur) var(--kh-hover-ease), border-color var(--kh-hover-dur) var(--kh-hover-ease), color var(--kh-hover-dur) var(--kh-hover-ease); } .kh-taxo__pill:hover { border-color: var(--kh-green-soft); background: var(--kh-green-soft); color: #fff; } /* -------------------------------------------------------------------------- スマホ -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* 画面が狭いと80pxの角は丸すぎて、面の中身が角に食われる。幅が狭いぶん同じ値でも丸みが目立つので、PCよりかなり浅くする。乗り上げる深さは丸みを参照しているので、ここでは触らない。上書き先は body。style.css が body に宣言しているので、 :root に書いても body 自身の宣言に負けて効かない。 */ body { --kh-panel-radius: 32px; --kh-panel-pad: 72px; } .kh-section { margin-top: 40px; } .kh-section__title { margin-bottom: 24px; padding: 15px 16px; font-size: 17px; } .kh-section__title::before { width: 5px; } /* 2列に並べる幅がないので、カテゴリーの下にタグを置く */ .kh-taxo { grid-template-columns: 1fr; gap: 40px; } .kh-taxo__list { gap: 12px; } .kh-taxo__pill { padding: 5px 14px; font-size: 13px; } .kh-front__white { margin-top: 56px; } .kh-pickup + .kh-front__white { margin-top: calc(var(--kh-panel-lap) * -1); } .kh-grid, .kh-grid.-cols2, .kh-grid.-cols3 { grid-template-columns: 1fr; gap: 18px; } .kh-archiveHead { margin-bottom: 36px; } .kh-archiveHead__title { font-size: 20px; } /* 1列に落ちるとカードが画面幅いっぱいまで広がり、17pxのタイトルが間延びする。資料DLのカードと同じ16pxまで下げ、上のピルと下の日付も同じ割合で詰める。3つの大小関係（日付 < ピル < タイトル）は変えない。 */ .kh-card__title { font-size: 16px; margin-bottom: 12px; } .kh-card__cat { height: 26px; padding: 0 14px; font-size: 12px; } .kh-card__date { font-size: 11px; } .kh-card__body { padding: 34px 18px 20px; } } /* -------------------------------------------------------------------------- 一覧ページのサイドバー（カテゴリー・タグ） -------------------------------------------------------------------------- 記事ページのサイドバーは白いカードで組むが、一覧ページは本文側が記事カードの並びなので、右にもう一枚白い面を置くとカードが二重に見える。ここは地色の上に直に置き、見出しと中身だけで読ませる。見出しは記事本文のH2と同じ作り（グレーの帯＋左端に角丸の緑バー）にそろえる。 SWELLの -side は下に半端な罫線を引くので、それは消す。 -------------------------------------------------------------------------- */ /* 白いカードを外す。囲いのぶんの余白も返す */ .kh-archiveSidebar .c-widget { background: none; box-shadow: none; border: none; border-radius: 0; padding: 0; margin-bottom: 64px; } .kh-archiveSidebar .c-widget:last-child { margin-bottom: 0; } /* 見出し。帯や囲いは持たせず、文字の下に黒い線を1本引くだけにする。 style.css の .c-widget__title（左に5pxの緑線）はここで打ち消す */ .kh-archiveSidebar .c-widget__title { position: relative; background: none; border: none; border-bottom: 2px solid var(--kh-frame); border-radius: 0; padding: 0 0 10px; margin-bottom: 18px; font-family: var(--kh-font-ui); font-weight: var(--kh-weight-ui); font-size: 18px; line-height: 1.5; letter-spacing: 0.02em; font-feature-settings: "palt" 1; color: var(--kh-ink); text-align: left; } /* SWELLが擬似要素で足す飾り線は出さない（style.css で消してあるものを戻さない） */ .kh-archiveSidebar .c-widget__title::before, .kh-archiveSidebar .c-widget__title::after { content: none; } /* タグは白いピル。SWELLが薄いグレーの地を !important で固めているので、こちらも !important で白に戻す（フッターのタグと同じ理由） */ .kh-archiveSidebar .tagcloud .tag-cloud-link { background: var(--kh-card) !important; } /* サイドバーの文字の大きさは、SWELLのカスタマイザー（--swl-fz--side）が 15.48pxを配っている。PCではちょうどよいが、SPは本文が1列に落ちてカードのタイトルが16pxまで下がるため、行き先の一覧がそれとほぼ同じ大きさになり、どちらが主役か分からなくなる。SPだけ14pxに下げて、カードより一段下に置く。 */ @media (max-width: 767px) { .kh-archiveSidebar .c-listMenu a { font-size: 14px; } }