中学生の学習をサポートするために、Obsidianでいくつかの教科の学習ノートを作成し、Ankiのデッキを生成しました。そのうち、数学ノートには以下の要件があります。

  1. パソコンで授業を行う際:既定の読書モードでは問題の解答を非表示にし、クリックすると展開して表示すること
  2. PDFを生成する際には解答内容を含め、印刷して参考にできるようにすること

試行錯誤の末、最終的な操作方法は本文の通りです。

また、作成したノートとAnkiカードを私の別のブログサイトにアップロードしました:美好新人生。もしご家庭の中学生がちょうど八年生であれば、サイトからAnkiデッキファイルをダウンロードし、Ankiにインポートすることで学習に多少役立つかもしれません(少しでも助けになれば幸いです 🤣)。

gh|700

1. 読書モードでの学習

最初は %% を使って解答部分をコメント化し、読書モードでは非表示にしました。しかし、表示するには実際のプレビューに戻る必要があり、印刷時にはコメント部分がPDFに出力されないため、%% では要件を満たせません。

gh|562

そこで、Admonitionプラグインを使用し、先頭の %% を ```ad-info に変更。設定オプションの【Default Collapse Type】を close にして解答部分を非表示にし、クリックすると表示されるようにしました。

gh|700

gh|700

2. PDFの生成

さらに、以下のCSSスニペットを作成・有効化することで、PDF生成時(print)に非表示のAdmonitionブロックもPDFに出力できるようにしました。

▼ このスニペットはAIが生成

/*
 * 目的:Admonitionプラグインの折りたたみ可能ブロックを印刷時に強制展開
 * 適用:Obsidianの「PDFに印刷」機能
 */

@media print {
    /* Admonitionプラグインが生成したdetails要素を選択 */
    .admonition.is-collapsible details:not([open]) {
        /* detailsの内容を強制的に表示するため、blockに設定 */
        display: block !important;
    }

    /* details内部のコンテンツも強制表示 */
    .admonition.is-collapsible details:not([open]) > .admonition-content,
    .admonition.is-collapsible details:not([open]) > div {
        display: block !important;
        visibility: visible !important;
    }

    /* Admonition内容ブロックが印刷時に隠れないようにする */
    .admonition-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 必要に応じて折りたたみ矢印を印刷時に非表示にする(省略可能)
    .admonition.is-collapsible .admonition-title::before {
        display: none !important;
    }
    */
}

3. 💡 関連リンク

✅ 解説記事(繁体字中国語): https://jdev.tw/blog/9009/
Explanation article (English)
解説記事(日本語)

✅ 中学生向けAnkiデッキ共有: https://jdev.tw/newlife/?tag=Anki

##