出版・寄稿の書籍の行に書影を添える - #3219
Merged
Merged
Conversation
書影は記事のサムネイルを既定にし、書影でないサムネの記事だけ cover: で上書きする。 技術誌には出さない（23件のうち13件が2本のまとめ記事に由来し、号ごとの表紙を持たない）。 関連タグの「外部寄稿」（4本）を「SoftwareDesign」（13本）に差し替えた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
連載・HTTF と同じ panel-card を使い、書影は縦長の器（panel-thumb-book 60×80）を variant で持たせた。3列にすると添えの「執筆者 ／ 記事タイトル」が3〜4行に折り返し、 文字の塊が書影より高くなる。 Software Design 2026年1月号は /articles/20260217a/ も寄稿記事なので magazines: を書いた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
by（無ければ記事の author）は1名なので、共著・共訳でも単著に見える。 技術誌は「その号のその章を誰が書いたか」が単位なので出したままにする。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
号が2行に分かれると同じ号を2冊と読み違える。冊数は22、寄稿は24件なので、 本文が名乗る件数は magazineCount が持つ。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
1行目が What（号の名前＋特集名。特集名は ink-mute）、2行目以降が Who（執筆者 ／ 記事）。 同じ特集に複数人が寄稿していれば人を行の中に積む。 Software Design 2026年1月号の work を特集名でそろえて1行にまとめた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
表紙は1冊だけを扱う記事のサムネイルを借りる。複数の号をまとめて紹介する記事の サムネイルは表紙のコラージュでどの号のものでもないので借りず、空き枠にする（13件）。 器の名前を panel-thumb-book から panel-thumb-cover に改めた。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
寄稿まとめ記事のサムネイルはコラージュでどの号のものでもないので、 出版社の書影を source/images/publications/ に置いて cover: で指した（12号ぶん）。 同じ号を複数の記事が指すので、記事ごとのディレクトリには置かない。 執筆者は書籍と同じ理由で出さない。連名でも1名しか出ないので単著に見える。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
特集名と記事タイトルは同じ段・同じ色で隣り合うので、色では区別が付かない。 押せる方に下線を持たせる（#2926 と同じ理由）。書籍のパネルも同じ形にそろえる。 特集名と記事の間は 8px から 12px へ。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
同じカードの中で号名（hover で下線）と記事（常時下線）が違う振る舞いになるのが 違和感の元だった。特集名を panel-card の note として題の行に置けば、添えは 記事のリンクだけになり、素の文字とリンクが隣り合わない。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
記事どうしの 4px より広く取って、組の切れ目を刻み1つぶん付ける。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
記事どうしの 4px の3倍。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
同じ「何に書いたか」の続きなので、落とすのは大きさと太さだけにする。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
12px は添え・注記の段で、色は ink-mute と対になっている（site.css の 12px を持つ 53ルールはすべて ink-mute か ink-faint）。ink-strong にするなら段も上げる。 落とすのは太さだけ。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
やったこと
/specials/publications/の書籍の行の左に書影（60×80）を添えた。あわせて関連タグの「外部寄稿」を「SoftwareDesign」に差し替えた。書影の出どころ
記事のサムネイルを借りる（新しい画像ファイルは増やさない）。書籍の紹介記事はサムネイルに書影を使うのが慣例で、8件中5件はそのまま書影として読める。書影でないサムネの記事だけ、フロントマターの
cover:が上書きする。技術誌には出さない
23件のうち13件が2本のまとめ記事に由来し、号ごとの表紙を持たない（10件は同じコラージュ1枚、3件はサムネイル自体が無い）。同じ扱いにすると欠けた行が並ぶ。
寸法
サムネイルの器の5つ目として 60×80（3:4） を足した。既存の4つ（72×48 / 88×59 / 200×135 / 1200:630）はどれも横長で、比 0.71〜0.79 の書影を
object-fit: coverで切ると書名が読めない。残っている判断
3件はサムネイルが書影として読めない。
cover:を書く先の画像が無いので、この PR ではサムネイルのままにしてある。確認したこと
make css/css_lint.mjs/font_size_lint.mjs/ textlint（publications.ejs）/ markdownlint すべて通る/tags/SoftwareDesign/（13本）が 200 で返ることを確認🤖 Generated with Claude Code