インライン引用記法

配色と border に関する変数定義は「引用記法」ページの方にあります

引用ブロック記法

[" quote] – 現在のデフォルト

テキストインライン引用記法テキスト

オプション：

インライン引用記法A（従来からの斜体スタイル）

[>/ quote]

テキストインライン引用記法テキスト

Text Inline quotation text

インライン引用記法B（下線スタイル）

[>_ quote]

テキストインライン引用記法テキスト

Text Inline quotation text

インライン引用記法C（両端引用符のスタイル）

[>' quote]

テキストインライン引用記法テキスト

Text Inline quotation text

インライン引用記法D（領域を架線で区切るスタイル）

[>+ quote]

テキストインライン引用記法テキスト

Text Inline quotation text

ウェブフォント（smallerフォント、weight微調整用）

Inter（Google Fonts）

Noto Sans JP（Google Fonts、ローカルの日本語環境に収録されていないことが多いバリアブルフォント版）

code:style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

C. 両端を引用符で囲む案

quote

2026-07-10 引用アイコンのサイズをfont-size: .6em;に変更

2026-06-28 記法["' quote]Nrem.icon

cf. 中央揃え記法 '

code:style.css

/* .deco-\", */

.deco-\>.deco-\'class^="deco-\> deco-\'" {

.line & {

--inline-quote-border-width: 1px;

vertical-align: baseline;

box-sizing: content-box; /* padding: 5.5px 4px 1px 2px; */

padding: 5.5px 2px 1px;

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, var(--quote-font-feature-settings)); */

font-size-adjust: var(--inline-quote-font-size-adjust);

}

.line &::before,

.line &::after {

font-size: .6em; line-height: calc(1em / 0.6);

font-family: var(--icons, "Font Awesome 5 Free", "Font Awesome 5 Brand", AppIcons); font-weight: 700; font-style: unset; font-size-adjust: none; text-decoration: none;

color: var(--quote-border-color, #a0a0a0);

}

.line &::before { content: "\f10d"; vertical-align: super; margin-right: 2px; }

.line &::after { content: "\f10e"; vertical-align: super; margin-left: 2px; }

.line.cursor-line &::before { display: none; }

}

D. 下線でないborder-bottom案

quote

インライン引用記法のデザイン変更案 - 2026/6/19#6a3fa8190000000000b9cca2

2026-07-08 > 表示するように

2026-06-28 Nrem.icon

code:style.css

/* .deco-\", */

.deco-\>.deco-\+class^="deco-\> deco-\+" {

.line & {

vertical-align: baseline;

box-sizing: content-box; /* padding: 5.5px 4px 1px 2px; */

border-left: solid var(--quote-border-width, 1px) var(--quote-border-color, #a0a0a0);

font-size: 0.94em; padding: 3px 4px 3px 0;

border-bottom: solid 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, unset));

}

.line &::before {

margin-right: 0; padding-left: 0;

content: "\f105"; font-size: 1em; line-height: 1em;

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;

color: var(--quote-border-color, #a0a0a0);

}

.line.cursor-line &::before { display: none; }

}

B. 下線型のborder案/インライン引用記法（下線スタイル）

quote

from /customize/インライン引用記法 (下線スタイル)

経緯については次のページを参照のこと

インライン引用記法のデザイン変更案 - 2026/6/19

「インライン引用記法」のデザインを変更したい

2026-07-10

引用アイコンの再調整

.7em -> .73em（原案仕様のサイズ）

2026-07-08

引用アイコンの再調整

padding-left: 1px; padding-right: 1px;

ほか.7em -> .675em（上付き表示用）

変数の推奨値を微調整

2026-07-06

文字装飾記法とスタイルの対応関係を変更した

1. [" text](デフォルト) – 変更なし

引用テキストの左側に、上付きの開始引用符アイコンを配置するスタイル

「インライン引用記法」のデザインを変更したいを経て修正されたスタイル

2. [>_ text](06-28 に追加された記法) – スタイルの一部を変更

引用テキストの左側に、下付きの閉じ引用符アイコンを配置するスタイル

原案に忠実

2026-07-04 border の配色と幅の微調整

2026-07-01 フォント指定などの変数の値を初期案のものに変更

smallerのfont-weightの微調整が反映された表示にするため、Google Fontsの「Inter」と「Noto Sans JP」のウェブフォント@import文を追加

2026-06-28 新記法のみ有効化Nrem.icon

2026-06-28 新記法追加[>_ quote]

これに伴い、次の記法の書式との衝突対策を施した

ユーザーフラッグ記法 >

下線記法 _

2026-06-23 引用符アイコンのfont-size-adjust: unset;の指定漏れを修正

2026-06-21 引用符アイコンをcontent: "\f10d";に戻した

2026-06-19 引用符アイコンをcontent: "\f10e";に変更

2026-06-19 BIZ UDゴシックに変更

2026-06-19 未使用のfont関連指定をコメントアウト

2026-06-16 font-weight: 指定を無効化（コメントアウト）

2026-06-14 vertical-align: super; に変更

line-height:指定がされていなかった問題を修正

2026-06-13 Nrem.icon

smallerフォント変数の定義

code:style.css

html {

@media (prefers-color-scheme: light) {

--inline-quote-font-family: "Inter Variable", "Inter", "Roboto Flex", "Roboto", Helvetica, "Arial", "Arimo", "BIZ UDゴシック", "BIZ UDGothic", "BIZ UDPゴシック", "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP";

--inline-quote-font-weight: 425;

}

@media (prefers-color-scheme: dark) {

--inline-quote-font-weight: unset;

/* --inline-quote-font-size-adjust: 0.51; */

}

code:style.css

.deco-\",

.deco-\>.deco-\_class^="deco-\> 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);

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, var(--quote-font-feature-settings)); */

font-size-adjust: var(--inline-quote-font-size-adjust, unset);

}

.line &::before {

content: "\f10e"; vertical-align: baseline;

margin-right: 2px; padding-left: 1px; padding-right: 1px;

font-size: .74em; line-height: calc(1em / 0.74);

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;

color: var(--quote-border-color, #a0a0a0);

}

/* デフォルトのインライン引用記法（修正B案仕様） */

.line &.deco-\":not(.deco-\>.deco-\_class^="deco-\> deco-\_")::before {

content: "\f10d"; vertical-align: super;

font-size: .675em; line-height: calc(1em / 0.675);

}

/* B案（原案仕様）のインライン引用記法 */

.line &.deco-\>.deco-\_:not(.deco-\") {

&:not(.deco-\~) { text-decoration: none; } /* 下線記法との衝突対策（ただし波線は適用される） */

&::before {

content: "\f10e"; vertical-align: baseline;

font-size: .74em; line-height: calc(1em / 0.74);

}

.line.cursor-line &::before { display: none; }

}

A案（従来の和文斜体スタイル）

from /scrasobox/拡張記法がきた！#59e5376896b9040000af691a

インライン引用記法A案

quote

2026-07-10 リファクタリング

2026-06-28 有効化（新記法のみ）Nrem.icon

2026-06-28 新記法追加[>/ quote]

2026-06-15

配色を最新の app.css のテーマ変数を参照させる形に更新した

background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));

color: var(--quote-text-color, var(--page-text-color, inherit));

::before { ... }

font-family: に --icons 変数を導入

color: var(--quote-border-color, #a0a0a0);

セレクターのリファクタリング

2026-06-13 disabledNrem.icon

code:style.css

/* .line .deco-\", */

.deco-\>.deco-\/class="deco-\> deco-\/" {

.line & {

border-radius: .2em; padding: 0 .4em; font-size: 95%; font-style: italic;

/* background-color: rgba(128,128,128,0.1); */

background-color: light-dark(hsl(0 0% 50% / .1), var(--quote-bg-color, rgba(0, 0, 0, 0.05)) );

color: var(--quote-text-color, var(--page-text-color, inherit));

}

.line &::before {

/* color: #a0a0a0; */

color: light-dark(#a0a0a0, var(--quote-border-color, #a0a0a0));

font-size: 85%; position: relative; top: -0.5em; left: -0.2em;

/* font-family: 'FontAwesome'; */

font-family: var(--icons, 'FontAwesome', 'Font Awesome 5 Free', AppIcons); font-size-adjust: none;

font-weight: 900;

content: '\f10d';

}

.line.cursor-line &::before {

display: none;

}

test

Settings.icon #引用記法

UserCSS.icon

やり方調べようとしたらドンピシャでページあった、助かる助かるマダガスカルsta.icon