Skip to content

ランキング・関連記事の行に著者名を出す #3412

Closed

Description

@ma91n

現状

記事を1行で並べる部品(_partial/post-list-item.ejs)は 題 → NEW → 年月 → ♡ で、著者名を持っていない。この部品はホームのランキング(トレンド/年間)・関連記事・この記事を参照している記事・カテゴリ/タグ/著者/期間/「◯◯以外の記事」ページの「よく読まれている記事」がすべて使っている。

同じページの下に並ぶ新着一覧のカード(_partial/archive-post.ejs)は 日付・著者・カテゴリ・♡ を持つ。ホームで数えると、新着は 25/25 行に著者があり、ランキングは 0/25。

困ること

  • 読者にとって、技術ブログの記事は「誰が書いたか」が記事を選ぶ手がかりの1つ(同じ著者の記事を続けて読む、知っている名前で開く)。ランキングと関連記事ではそれが無く、開いてから分かる
  • 書き手にとって、トップのランキングと記事末の関連記事は一覧より目に付く場所なのに名前が出ない。名前が出る方が「自分の記事が載っている」と分かり、次を書く動機になる

直し方

  • post-list-item.ejs の .post-meta に著者名を足す。並びは 年月 → 著者 → ♡(2026.10 真野隼記 ♡12)。年月と同じ色・大きさ(ink-mute × text-meta)で、太字にしない
  • 著者名はリンクにしない。 行は ::after で行全体が1つの記事へのリンクになっていて、中にリンクを置くと1つのカーソル位置で2つの行き先が名乗る(カードの中の別行き先リンクに乗っている間はカードの hover 反応を止める #3164 / 特集パネルの説明文をマウスオーバーしてもリンクが活性化しない #3189 の線)。新着カードの著者がリンクなのは、あちらが行全体リンクではないため
  • 著者ページの「よく読まれている記事」では出さない。 全行が同じ名前になり情報が無い。NEW を withNew で呼び出し側が選ぶのと同じ形で、popular_posts_in に伏せる指定を1つ足し、author.ejs からだけ渡す(部品は受け取った通りに描く)
  • 幅375pxで .post-meta が1行に収まるか実測する(年月 7字+著者 最長の名前+♡ 3桁)。収まらないなら年月と♡の間で折り返させるのではなく、著者を省かずにどこで折るかを決めてから出す

確認

  • ホーム・カテゴリ・タグ・期間ページ・記事末(関連記事・被参照)で著者が出ること
  • 著者ページでは出ないこと
  • 幅 375 / 768 / 1280 で行が崩れないこと

Activity

  1. ma91n commented on Oct 30, 2026

    @ma91n
    CollaboratorAuthor

    幅375pxでメタ行の幅を実測した(生成した HTML と site.css をヘッドレス Chrome で描画。フォントは Noto Sans CJK)。

    行 使える幅 実データの最大 最長の名前+♡1234
    ホームのランキング 200px 154px 249px
    記事末の関連記事・被参照 204px 133px 249px
    カテゴリ・期間の「よく読まれている記事」 252px 140px 249px
    • 最長の名前は ダワージャルガルオチラル(12字・143px)。次は ヴーホアン・ミン(8字)
    • 実データでは全行が1行に収まる
    • 最長の名前に4桁の反響が付くと、ランキングと関連記事で入らない。8字の名前でも、4桁の反響ならランキングでは入らない
    • 幅768pxでは、カテゴリページの2列(240px)で最長の名前が入らない

    折る位置は♡ の前にした。メタ行の nowrap を項目ごとに移し、項目の切れ目でだけ折れるようにした。著者は省かない。年月と著者が1行目に残り、♡ が2行目に送られる。以前のままメタ行全体が nowrap だと、行が列からはみ出していた。

    PR: #3413

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions