/* [pkt-comment-ui-pc] PC コメント欄の見直し（twentyten・コメント欄の iframe） 作成：2026-10-15 ⚠️ **運営者がモックアップで確定した見た目**に合わせたもの。 ⚠️ **このファイルは新規。** twentyten の既存のファイルは一切変えない。 ⚠️⚠️ **`style.css` より後に読み込むこと。** テーマが ID（`#commentlist` など）で指定しているので、 後に読み込まないと負ける。 */ /* ══════════════════════════════════════════════════════════ コメント欄の見直し（2026-10-14 に運営者がモックアップで確定） ⚠️⚠️ **HTML は変えない。CSS だけで行う**（U-38 案A）。 ⚠️ **会員に関わるもの（アバター・会員の印・評価のボタン・案内の箱）は プラグインの受け持ち。** ここでは触らない。 ⚠️ **「会員以外のコメントには何も足さない（D-43）」は、 プラグインの側の決まり。** ✅ テーマの側でコメント欄全体の見た目を変えることは、これに反しない。 ## ⚠️⚠️ 並べ直しの考え方（ここが肝） ⚠️ **本物の HTML では、「返信する」が本文より前にある。**
← ⚠️ パソコン用は header、スマートフォン用は footer [
] ← ⚠️ スマートフォン用だけ、もう1枚ある 名前 | より: 返信 ← ⚠️⚠️ **ここにある** 本文 ⚠️ モックアップは「名前の行 → 本文 → 操作の行（返信＋評価）」。 ✅ **包みを `display: contents` で平らにして、`order` で並べ直す。** ⚠️ **HTML は1行も変えない。** ⚠️ **評価のボタンは `.comment-content` の中にある**（プラグインが足す）ので、 本文も平らにしないと、**返信と評価が同じ行に並べられない。** ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ ⚠️⚠️ アバターの場所は、テーマが決める（2026-10-15） ⚠️ **見た目（色・角丸・大きさ）はプラグインの受け持ち。** ⚠️ **置く場所だけ**は、**カードの内側の余白を知っている テーマでないと決められない。** ⚠️ プラグインは `left: 0; top: 0` で**カードの角に貼る**ので、 ⚠️ **カードにすると余白の外に出てしまう**（実際にそうなった）。 ⚠️⚠️ **会員以外のコメントにも、同じだけ空ける**（U-40）。 ⚠️ プラグインは**会員以外に何も足さない**（D-43）ので、 ⚠️ **空けるのはテーマの仕事。** ══════════════════════════════════════════════════════════ */ /* ── 1. カード ─────────────────────────────── */ /* * ⚠️⚠️ **`article.comment` だけに当てること。** * ⚠️ 外側にも `class="comment"` の付いた `
  • ` がある。 * 両方に当てると、**板が二重になる。** */ article.comment { box-sizing: border-box; border-radius: 8px; /* ⚠️ カードどうしの間隔 10px（モックアップの指定） */ margin: 0 0 10px; /* ⚠️⚠️ 並べ直すための入れ物 */ display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: 6px; } /* * ⚠️⚠️ **包みを平らにする。** * * ⚠️ これで、中の部品が `article` の直接の子として並ぶ。 * ⚠️ **要素の名前を条件にしないこと**（パソコン用は `header`、 * スマートフォン用は `footer` で違う）。 */ article.comment > .comment-meta, article.comment > .comment-meta > .comment-author, article.comment > .comment-content { display: contents; } /* ── 2. 名前の行（1行目）───────────────────── */ /* * ⚠️ 番号。`article` の `::before` なので、**1行目の先頭**に並ぶ。 * ⚠️ 出すかどうかは、下の「寸法」で決める（スマートフォン用は出さない）。 */ article.comment::before { order: 1; color: #888; flex: none; } /* 名前（会員以外） */ article.comment .fn { order: 2; font-weight: bold; font-style: normal; color: #c8c8c8; } /* ⚠️ 会員の名前は白（プラグインが `.pokka-name` を付ける） */ article.comment .pokka-name, article.comment .pokka-name a { color: #fff !important; } /* * ⚠️⚠️ **日時を右端へ。** * ⚠️ パソコン用は `.comment-date`、スマートフォン用は * 日時が `` に包まれた `` に指定しても、中の文字には届かない。** */ article.comment .comment-date time, article.comment a:has(time) time { color: #888 !important; font-weight: normal !important; } /* ⚠️ 「より:」は出さない（読み上げには残す） */ article.comment .says { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── 3. 本文（2行目）───────────────────────── */ article.comment .comment-content > * { order: 4; /* ⚠️⚠️ **行いっぱいを使う**（ここで行が変わる） */ flex: 0 0 100%; min-width: 0; margin: 0; color: #eee; line-height: 1.75; /* ⚠️ 長い文字列を折り返す（横にはみ出させない） */ overflow-wrap: anywhere; word-break: break-word; } /* ── 4. 操作の行（3行目）───────────────────── */ /* * ⚠️ 左に「返信する」、右に評価のボタン。 * * ⚠️⚠️ **返信の仕組みには触らない**（`addComment` などに関わらない）。 * 見た目と並び順だけを変える。 */ article.comment .comment-reply-link { order: 5; /* ⚠️ ここで行が変わる（本文が行いっぱいを使っているため） */ display: inline-flex; align-items: center; flex: none; color: #ffa500 !important; font-weight: bold; /* ⚠️ テーマのボタンの見た目を持ち込ませない */ background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } /* ⚠️ 「返信 ↓」の矢印は出さない */ article.comment .comment-reply-link > span { display: none; } /* * ⚠️⚠️ **文言を「返信する」にする**（運営者の指定）。 * ⚠️ HTML は変えないので、**CSS で差し替える。** * ⚠️ 元の文字は読み上げに残る（`aria-label` が付いている）。 */ article.comment .comment-reply-link { font-size: 0; } article.comment .comment-reply-link::before { content: "返信する"; } /* * ⚠️ 評価のボタン（プラグインが足す）を、同じ行の右端へ。 * * ⚠️ **プラグイン側の指定を打ち消さないこと。** * ここで決めるのは**並ぶ場所だけ。** */ article.comment .pokka-votes { order: 6; flex: 1 1 auto; margin-left: auto; /* ⚠️ 上の余白は、行の間隔（row-gap）に任せる */ margin-top: 0; } /* ── 5. 返信の入れ子（U-38 案A）───────────── */ /* * ⚠️⚠️ **HTML は変えない。** * * ⚠️ 実際の形（実測）： * パソコン用 … `ol.children` は **親の `
  • ` の外**（`ol#commentlist` 直下） * スマートフォン用 … `ul.children` は親の `
  • ` の中、`
    • ` の後ろ * * ⚠️ **どちらも、親の `
    `（＝カード）の外。** * * ✅ **「親のカードを、返信のぶんまで下に伸ばした」ように見せる**（2026-10-15）。 * * 1. ⚠️ 親のカードの**下の角丸を外し**、下の余白を無くす * 2. ⚠️ 返信の入れ物に**親と同じ背景**と**下の角丸**を付ける * 3. ⚠️ 返信の `article` の**背景を透明**にする（二重の板にしない） * 4. ⚠️ 返信の `li` に**縦の線**を引く（間が空かないよう `li` に付ける） * * ⚠️ **線は `li` に引くこと。** 入れ物に引くと、 * **返信どうしの間隔（8px）で線が途切れる。** * * ⚠️ 寸法（左の余白・背景の色・角丸）は、下の「寸法」で決める。 */ /* ── 5-1. 返信の `article` は、板にしない ── */ .children article.comment { background: transparent; border-radius: 0; /* ⚠️ 返信どうしの間隔 8px（モックアップの指定） */ margin: 0 0 8px; } .children > li:last-child article.comment { margin-bottom: 0; } /* ── 5-2. 返信の入れ物（親と地続きに見せる）── */ ol.children, ul.children { margin: 0; list-style: none; /* ⚠️ 親と地続きに見せるので、上の角丸は付けない */ border-radius: 0; } /* ── 5-3. 縦の線 ── */ /* * ⚠️ **`li` に引くこと。** * ⚠️ 入れ物に引くと、**返信どうしの間隔で線が途切れる。** */ .children > li { list-style: none; margin: 0; border-left: 2px solid #4a4a4a; } /* ══════════════════════════════════════════════════════════ ⚠️ 会員以外のコメントの、飾りのアイコン（2026-10-15） ⚠️ **すでに空けてある場所に、控えめな人の形を描くだけ。** ⚠️ **本文や名前の位置は、1ピクセルも動かさない**（浮かせて描く）。 ⚠️⚠️ **テーマの側の CSS だけで描く。** ⚠️ プラグインは**会員以外に何も足さない**（D-43）。 ⚠️ **画像の読み込みを増やさない**（CSS の中に直接書いた SVG）。 ⚠️ **飾りなので、読み上げには読ませない** （`::after` に文字を入れない）。 ⚠️ **会員のコメントには描かない**（アバターと二重になる）。 ⚠️ プラグインを止めると、**すべてのコメントがこれになる**（想定どおり）。 ⚠️ **会員の既定のアバター（灰色の人影）より、もう一段薄くする。** 色は、下の「寸法」で画面ごとに決める。 ══════════════════════════════════════════════════════════ */ /* * ⚠️ **浮かせるための土台。** * ⚠️ プラグインは会員のコメントにしか `position: relative` を付けない。 */ article.comment:not(:has(.pokka-avatar)) { position: relative; } article.comment:not(:has(.pokka-avatar))::after { content: ""; position: absolute; /* ⚠️ アバターと同じ角丸 */ border-radius: 8px; /* ⚠️ 人の形は、真ん中に収める */ background-repeat: no-repeat; background-position: center; background-size: 62%; /* ⚠️ 飾りなので、押せないようにする */ pointer-events: none; } /* ══════════════════════════════════════════════════════════ パソコン用の寸法（モックアップの指定） ══════════════════════════════════════════════════════════ */ /* 背景の基本の色は変えない（#2a2a2a） */ article.comment { background: #353535; padding: 12px 14px; } /* ══════════════════════════════════════════════════════════ ⚠️⚠️ アバターの場所と、本文の送り（2026-10-15） ⚠️ **カードの内側の余白（12px 14px）の分だけ内側**に置く。 ⚠️ **上端を、名前の行の上端にそろえる。** ⚠️ **本文の送り** ＝ 左の余白 ＋ アバターの幅 ＋ 間隔 親 … 14 + 56 + 12 = 82px 返信 … 14 + 48 + 12 = 74px ⚠️ **箱の最低の高さ** ＝ 上の余白 ＋ アバター ＋ 下の余白 親 … 12 + 56 + 12 = 80px 返信 … 12 + 48 + 12 = 72px ⚠️⚠️ **`#commentlist` を頭に付けて、プラグインより強くすること。** ⚠️ プラグインは `article.comment:has(.pokka-avatar[width="56"])` で 指定している。**同じ強さだと、後から読まれるプラグインが勝つ。** ══════════════════════════════════════════════════════════ */ #commentlist .pokka-avatar { left: 14px; top: 12px; } /* ⚠️ 親（会員・会員以外とも） */ #commentlist > li > article.comment { padding-left: 82px; min-height: 80px; } /* ⚠️ 返信（会員・会員以外とも）。⚠️ 14 + 48 + 12 = 74px */ #commentlist .children article.comment { padding-left: 74px; min-height: 72px; } /* ══════════════════════════════════════════════════════════ ⚠️⚠️ 返信を、親のカードの中に入れて見せる（2026-10-15） ⚠️ **パソコン用は、`ol.children` が親の `
  • ` の外にある** （HTML の閉じ忘れ。`ol#commentlist` の直下に、`li` の次に並ぶ）。 → ⚠️ **隣どうしの選択子で親を狙う。** ══════════════════════════════════════════════════════════ */ /* ⚠️ 返信が続く親は、下の角丸と下の余白を外す */ ol#commentlist > li.comment-set:has(+ ol.children) > article.comment { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; } /* ⚠️ 返信の入れ物に、親と同じ背景と下の角丸を付ける */ ol#commentlist > ol.children { background: #353535; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; /* * ⚠️ **左は、親の本文の列と同じ 82px。** * そこに縦の線が来て、右に返信が並ぶ。 * ⚠️ 下は、カードの内側の余白と同じ 12px。 */ padding: 0 14px 12px 82px; /* ⚠️ 親のカードとの隙間を無くし、次のコメントとは 10px 空ける */ margin: 0 0 10px; } /* ⚠️ 線の右の間隔 12px（モックアップの指定） */ ol#commentlist > ol.children > li { padding-left: 12px; } /* * ⚠️⚠️ **一覧の字下げを消す**（2026-10-15 に踏んだ）。 * * ⚠️ テーマが `ol#commentlist, ol.children { margin: 40px }` と * **要素の名前つきで**指定している。 * ⚠️ `#commentlist` だけでは**条件の強さで負ける。** * → ⚠️ **コメントの一覧全体が、左に 40px ずれていた。** */ ol#commentlist { margin: 0; padding: 0; list-style: none; } /* * ⚠️⚠️ **番号を、名前の行の中に出す**（U-39）。 * * ⚠️ いまは `
      ` の**自動の番号**が、 * カードの外（左）に出ている。 * ⚠️ **カードにすると、外に出た番号が板から浮いて見える。** * * ✅ **数えるのは同じ `
        ` なので、出る番号は今までと同じ。** * ⚠️ 返信（`ol.children`）は別の `
          ` なので 1 から数え直す * （モックアップと同じ）。 */ #commentlist, #commentlist .children { counter-reset: pokka-comment; } #commentlist > li, #commentlist .children > li { counter-increment: pokka-comment; /* ⚠️ 自動の番号は消す（二重に出さない） */ list-style: none; } #commentlist > li::marker, #commentlist .children > li::marker { content: ""; } article.comment::before { content: counter(pokka-comment) "."; font-size: 11px; } /* 文字の大きさ（モックアップの指定） */ article.comment .fn, article.comment .pokka-name, article.comment .pokka-name a { font-size: 13px; } article.comment .comment-date, article.comment a:has(time) { font-size: 11px; } article.comment .comment-content > * { font-size: 13px; } article.comment .comment-reply-link::before { font-size: 11px; } article.comment .comment-reply-link { /* ⚠️ 押せる範囲（パソコン用 28px） */ height: 28px; padding: 0 8px; margin-left: -8px; } /* ══════════════════════════════════════════════════════════ 会員以外の飾りのアイコン（パソコン用） ══════════════════════════════════════════════════════════ */ /* * ⚠️ 大きさと場所は、会員のアバターとまったく同じ。 * ⚠️ 親 56px（左14・上12）／返信 48px。 */ #commentlist > li > article.comment:not(:has(.pokka-avatar))::after { left: 14px; top: 12px; width: 56px; height: 56px; } #commentlist .children article.comment:not(:has(.pokka-avatar))::after { left: 14px; top: 12px; width: 48px; height: 48px; } /* * ⚠️ **カードの板（#353535）より少しだけ明るい四角に、さらに薄い人の形。** * ⚠️ 会員の既定のアバター（もっとはっきりした灰色）と見分けが付く。 */ #commentlist article.comment:not(:has(.pokka-avatar))::after { background-color: #3d3d3d; background-image: url("data:image/svg+xml,"); }