インライン引用記法 (下線スタイル)
author: Nrem.icon
UserCSS.icon UserScript.icon
[> quote]
例：
インライン引用
inline quotation
content: "\f10e"; vertical-align: baseline;
content: "\f10d"; vertical-align: super;
/icons/hr.icon
UserCSS.icon
(ver. 7 or later)
? Cosense の Font Awesome がバージョンアップされるまで利用不可
(ver. 7 or later)
元々のデザイン案ではこちらを利用
? Cosense の Font Awesome がバージョンアップされるまで利用不可
? こちらで代用中
code:style.css
code:style.css
.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, unset);
font-family: var(--inline-quote-font-family, var(--page-font-family, "")), var(--icons, "Font Awesome 5 Free", "Font Awesome 5 Brand", AppIcons), sans-serif;
font-feature-settings: var(--inline-quote-font-feature-settings, unset);
font-size-adjust: var(--inline-quote-font-size-adjust, none);
}
.line &::before {
content: "\f10e"; vertical-align: baseline; /* 引用アイコンを border の上隣に表示（推奨） */
/* content: "\f10d"; vertical-align: super; */ /* 引用アイコンをテキストの superline に表示（オプション） */
margin-right: 2px; padding-left: 1px; padding-right: 1px;
font-size: .65em; line-height: calc(1em / 0.65);
font-family: var(--icons, "Font Awesome 5 Free", "Font Awesome 5 Brand", AppIcons); font-weight: 700; font-style: normal; font-size-adjust: none;
text-decoration: none;
}
.line.cursor-line &::before { display: none; }
}
変数の推奨値
code:style.css
html {
--inline-quote-font-family: "Inter Variable", "Inter", "Roboto Flex", "Roboto", Helvetica, "Arial", "Arimo", "BIZ UDゴシック", "BIZ UDGothic", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP";
--inline-quote-font-weight: 425; /* フォントの線の太さ（想定値：400 – 450） */
/* --inline-quote-font-size-adjust: 0.51; */
--inline-quote-border-width: 2.5px; /* インライン引用記法の下線の太さ（想定値：2px – 3px） */
--quote-border-width: 2px;
--quote-border-color: hsl(216 15% 74%); /* ライトテーマ用 */
/* --quote-border-color: hsl(196 10% 44%); */ /* ダークテーマ用 */
/* --quote-border-color: light-dark(hsl(216 15% 74%), hsl(196 10% 44%)); */ /* Auto Dark Themes */
}
引用ブロックと共にスタイルを調整する場合のCSS（オプション）
code:style.css
.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));
}
/icons/hr.icon
UserScript.icon
code:script.js
scrapbox.PopupMenu.addButton({
title: 'インライン引用',
onClick: text => text.split('\n').map(line => [> ${line}]).join('\n')
})
/icons/hr.icon
2026-07-08
引用アイコンの微調整
.7em -> .65em
他padding-left: 1px; padding-right: 1px;
変数の推奨値を微調整
2026-07-04 引用アイコンに打ち消し線などが適用されないように
text-decoration: none;
2026-07-01
変数の推奨値を追加
Google Fonts ホストのウェブフォントInterと Noto Sans JP の@import
::beforeの代用アイコンを\f10e に変更した
2026-06-20
引用アイコンにfont-size-adjust:が適用されてしまっていた不具合を修正
::before { font-size-adjust: none; } の指定漏れ
2026-06-16
変数未定義時の font-weight: の初期値をunsetに
これは文字サイズの違いによる「線の密度の差」というコントラストに関係するパラメータです
Cosenseの標準的な閲覧環境における本文テキストの日本語フォントは多くの場合バリアブルフォントではないため、（この記法に対して）有効なフォント指定がされていない時の font-weight: 450; は実際には 400 や 500 の太さで表示されてしまう問題への対応
::beforeの引用アイコンの表示位置の初期値を vertical-align: baseline; に差し戻し
引用ブロック記法との統一性に関する懸念材料
2026-06-15
::beforeの引用アイコンの表示位置の初期値を vertical-align: super; に変更した
::beforeの引用アイコンの表示位置を vertical-align: 指定で変更できない実装不備を修正
line-height: calc(1em / 0.7);の指定を追加した
2026-06-08
CSS変数font-size-adjust: var(--inline-quote-font-size-adjust);を追加
2026-05-04 /customize にページ移植
2026-04-28 リファクタリング
2026-04-15 カーソル行時に引用アイコンを表示しないように