インライン引用記法のデザイン変更案 - 2026/6/19
表示用サンプル
ここはブロック引用です
この段落は インライン引用 を含んでいます
現在の設定
テキストインライン引用記法テキスト
a. テキストインライン引用記法テキスト
b. テキストインライン引用記法テキスト
c. テキストインライン引用記法テキスト
d. テキストインライン引用記法テキスト
bg.icon
文脈
言い出した人：Nrem.icon
このページの目的
↑の文脈で示したページが長くなり、アイディアも混沌としてきたので、その整理のためにこのページを作りましたnyarla.icon
nyarla.iconの視点で整理した叩き台なので、ガンガン編集していって欲しいという気持ち
すばらし:igyo:.iconcaki.iconNrem.icon
ありがとうございます！Nrem.icon
↓の案の中では実際の CSS のコードを引っ張っていますが、これは動作確認がしやすいように、という意図があります
下記の css を自分の UserCSS に引き込むことによって、各自が見えているものを共有しやすい様に、という目的です
ただ、どのタイミングで css を変更するかはちょっと難しいので、そこは話の流れでやっていきましょう
今回の変更前の表示
スクリーンショット
https://gyazo.com/a6124bf52e8d58dc4ccb744bc8dd68d4
https://gyazo.com/995549aa30dd6a02e29d2a732619f0e3
変更の目的
Nrem.icon 動機
https://gyazo.com/a6124bf52e8d58dc4ccb744bc8dd68d4
旧来の「巨大引用符アイコン＋斜体×やや薄い独特の配色」スタイルの字面に問題があるように思えたので独自にデザインを分析しました。
さらに、斜めの巨大引用符アイコンと他の要素との「高さ」「線の方向」「比率」「視線の中心」も揃っていません。視覚的な安定感に欠けています
あとアクセシビリティ面。特に斜体は一部の人にとって読みづらいです
私自身が視覚過敏と（軽度の）書字障害傾向のある体質なので、体調が悪い時にはかなり内容が頭に入りづらくな る
これを積極的に選ぶ理由が自分には分からなかった。色々と直感に反します
今まで出てきた議論
日本語分で斜体を使うことについて
bg.icon案
A. 今回の変更前の表示の変更後の表示（旧スタイル）
引用
配色指定を現行のテーマ変数のものに差し替え
C. 開始引用符と終了引用符で囲む案
試作品（border有のバージョン）Nrem.icon
なぜか::afterの終了引用符が豆腐になってしまう現象に遭遇してしまい困惑しています
原因が分かりました。:is()とセレクターの指定ミスです（腑に落ちない）再発しました（）
可
.line &:is(::before,::after) {
不可
.line &:is(::before, ::after) {
.line :is(&::before, &::after) {
D.
下線でないborder-bottom案（D案）
試しに「下線型」のborderをテキストから離れた位置に置いてみた試作品ですNrem.icon
次の意見を参考にしている
https://gyazo.com/b2bedc0a7c59f5a751325e44b124b084https://gyazo.com/bdaa94f444d00f6cac51ba0cf10cda38
既存の強調的下線には見えない（たぶん）ので問題の一つは解消できるのではないか
「Cosenseの引用ブロックをそのままインライン引用にする」案（D案）
caki.iconのジャストアイデア
次のUserCSSはNrem.iconによる試作品
https://gyazo.com/96f5ddb0c4c457bb2b11ad74f92f79c7https://gyazo.com/408eb73fd7a333bdb8c4934d92fa8cd6
試作ありがたいseibe.icon
まだ試行錯誤の段階で、border が少し太めの状態となっています
やはり左縦罫線のみでは難しいと判断しました。引用文ではなく付箋か何かにしか見えない
code:blockquote-to-inline-quote.css
.line .deco-\" {
display: inline;
border: none, none, none, none !important;
border-bottom: none;
padding: 5px 3px 5px 2.5px;
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
color: var(--quote-text-color, var(--page-text-color));
font-size: 0.9em;
text-align: unset;
}
.line .deco-\"::before {
display: none !important;
}
初期案
スクリーンショット：
https://gyazo.com/f750b5a22ff6bc215f861e69266373c1
議論中での比較
ページを簡潔に保つために、スクリーンショットは初期案と現行版の2種類だけにしたいNrem.icon
どの案にするのかが問題なのです。現行バージョンでないものでスペースを取る必要はない
2026-06-28 他の案の下に移動しました。項目が長くなったため
元の文脈
先行するスクリーンショットが変更前のスタイル、その後のスクリーンショットが変更後のスタイルです
https://gyazo.com/54cacc036f51bf23cfaa0d88eb186b78https://gyazo.com/3c109659eae44ab3c2b8cf040ef9432b
https://gyazo.com/b8114747f574f34bcd915e10dd4017cchttps://gyazo.com/7bbe5c107998dc6a4a2e254cb1dae3c0
https://gyazo.com/081ce04ef01eefb5f247e737e02fb32chttps://gyazo.com/5fa8d521e10c2a9f92f5fb638072b031
ここの間に、冒頭「“」（位置は上側）＋下線、の表示の時期もあったと思うseibe.icon
現時点（2026/6/23）の状態のもの
https://gyazo.com/abde75c17e082f17ad13e433312dd304
https://gyazo.com/a9246379403d1cf7b0bb4cdda636ce11
「位置は上側」というのは、（引用テキストの高さのsuperlineではなく）余白の上側ということでしょうか？ もしそうであれば多分「1. アイコンを上側に変更する際の line-height の計算式のミス」と「2. Font Awesome の font-size-adjust の指定ミス」が積み重なった結果ですね…Nrem.icon
1. line-height: 24px; を指定する手もありますが、emでサイズ指定している以上は 1 / 0.94 * 0.7 = 1.5197568389057750759878419452 … line-height: 1.5197em; 辺りを指定するのが良さそうですNrem.icon「インライン引用記法」のデザインを変更したい#6a2e78b10000000000ba22e3←1em / 0.7のミス（修正済み）。インライン引用テキストの文字サイズ0.94emを計算に含めると通常テキストの高さになってしまう 2. インライン引用本文のfont-size-adjust:;の 指定が ::before にも適用されてしまっていたミス（修正済み）
あー、了解です。ありがとうございます（実は記号の位置ズレをどう説明したものか悩んでいたが、そもそもこちらの勘違いだったので説明自体が不要でした）Nrem.icon
引用記法で下線を使うことについて
改良案
【反映済】「デザインの後方互換性の観点からすると、引用記号の位置を上側にしたほうがよいのではないかnyarla.iconcaki.iconyosider.icon」
【取消】頭の引用符の向きを逆にするのはどうかNrem.icon
見た目の問題ではなく、文法的正しさの問題というか、引用の頭につくのは \f10d のほうなのですcaki.icon
たとえるなら 「ありがとう」 を表現するのに 」ありがとう が使われているような違和感があるcaki.icon
閉じクォートは引用を示すアイコンとして一般的に使われていますが、このご意見と、井戸端で長年 \f10d が使われてきたことを考慮して撤回Nrem.icon
2026/6/19時点の状態
スタイルは揃っていると感じるが、個人的には細い線（最初のバージョン）で揃える方が好きかもyosider.icon
「スタイルは揃っていると感じる」というご意見は実は初めてです。興味深いNrem.icon
https://gyazo.com/037a749eea2468dd2be8e87a1d99300f
細いほうがスタイリッシュな感じがする
線の太さについても意見を書くスペースを設けますか…（どこに置けばいいのか分からない）Nrem.icon
2026-07-03 細いほうがスタイリッシュな感じ──この意見がようやく分かってきた。確かに今時のスタイルがそうであるように、領域を示す輪郭線は全体から細部までスマートに揃えたほうがいいな…Nrem.icon
これを実現するためには、単純な線の幅だけでなくコントラストと合わせて今とは別の塩梅を探る必要がある
引用ブロックのborderもここまで太くする必要性がなかった。インライン引用と同じ太さでもいけそうです（3pxまで太くしなければならないという前提がただの思い込み。失敗）
変更範囲が既存記法にまで及んでいる気持ち悪さがある
わかるNrem.icon
色の調整もされているんだな
線を1pxにすると配色が判別しづらくなる問題がありまして…Nrem.icon
Nrem.iconがゴリ押し🦍しようとしている案
反対意見多数なら差し戻します
もう何も分からない。雰囲気でスタイリングしている
逆か。抽象化して再構築した結果が人からのフィードバックと必ずしも一致しない code:2026-06-19-1.css
html {
--quote-border-color: light-dark(hsl(216 10% 75%), hsl(196 10% 43%));
--quote-border-width: 3.5px;
--inline-quote-border-width: 2px;
}
.line .quote {
border-left: solid var(--quote-border-width, 1px) var(--quote-border-color, #a0a0a0); background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
}
code:2026-06-19-1.css
html {
--inline-quote-font-family: "Roboto", Helvetica, Arial, "BIZ UDゴシック", "BIZ UDGothic", "Hiragino Sans";
--inline-quote-font-size-adjust: 0.51;
}
.deco-\" {
.line & {
vertical-align: baseline;
box-sizing: content-box; /* padding: 5.5px 4.5px 0.5px 2px; */
padding: 5.5px 4px 1px 2px;
border-bottom: solid var(--inline-quote-border-width, var(--quote-border-width, 1px)) var(--quote-border-color, #a0a0a0); background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
color: var(--quote-text-color, var(--page-text-color, inherit));
font-size: .94em;
/* font-weight: var(--inline-quote-font-weight, var(--quote-font-weight, 450)); */
font-family: var(--inline-quote-font-family, var(--page-font-family, "")), var(--icons, "AppIcons"), sans-serif;
/* font-feature-settings: var(--inline-quote-font-feature-settings, var(--quote-font-feature-settings)); */
font-size-adjust: var(--inline-quote-font-size-adjust);
}
.line &::before {
content: "\f10e";
margin-right: 2px;
/* vertical-align: baseline; */
vertical-align: super; line-height: calc(1em / 0.7);
font-size: .7em; font-style: normal;
font-family: var(--icons, "Font Awesome 5 Free", "Font Awesome 5 Brand", AppIcons); font-weight: 700;
}
.line.cursor-line &::before {
display: none;
}
}