0番線デルタ

「知的生産性」という単語に振り回されないこと

QuoteのCSSを引用っぽく変更した

Obsidian

この時期になると手帳コーナーに新潮社の「マイ・ブック」というのが並ぶじゃないですか。

Image from Gyazo 『マイブック』みんなの使い方｜『マイブック―2026年の記録―』特設サイト｜新潮文庫 | 新潮社

ここに1日1つ名言や心に響いたことを書く、という使い方をしている人がいて、「いいなぁ」と思ったんですよね。

Obsidianでできるかな、とやってみます。

＊

Quote、普通に書くなら2通りですね。

  1. Blockquote
    • img|300
  2. Calloutのquote
    • img|300

うん、Blockquoteはまあ普通で悪くはない。でも、quotation以外にも使いたいからこれはキープで。calloutのquoteをもうちょっと見やすくします。

calloutの書き方は一般的なこれ

> [!quote] 運び屋
> "デイリリーは特別なんだ。一日しか咲かないけど、そのためにたくさん世話をしてやらないといけない。"
>  — "家族も同じよ"

もちろんCalloutとして最初にタイトルがあって折りたためる、というのはいいんだけど、引用の時はやっぱり引用が最初にあって右下に出典、っていうのがそれっぽい。

引用のCalloutだけCSSを当てます。

/* calloutのQuoteだけを対象に */
/* 順番を変えられるようにする */
.callout[data-callout="quote"] {
  display: flex;
  flex-direction: column;
}

/* 1. コンテンツ */
.callout[data-callout="quote"] .callout-content {
  order: 1;
  margin-top:.3em ;
  margin-left: .3em;
  margin-right: .5em
}

/* 2. アイコンとタイトル */
.callout[data-callout="quote"] .callout-icon {
  order: 2;
}
.callout[data-callout="quote"] .callout-title {
  order: 2;
  margin-top: -.2.5em;
  padding: 0;
  justify-content: flex-end;
  font-size: 0.85em;
}

/* タイトル文字を右寄せ */
.callout[data-callout="quote"] .callout-title-inner {
  margin-left: auto;
  text-align: right;
}

/* 折りたたみボタンを消す */
.callout[data-callout="quote"] .callout-fold {
    display: none;
}

img|600

引用っぽくなった。CSSってすごいなぁ。（ChatGPTにコード下書きしてもらっています）

ちなみに入力の時はAdmonitionプラグインで補助してもらってるので楽々。これでデイリーノートに「今日の一言」を入れられるようになった。来年やってみよう。