CSS は @稻米鼠から提供されました。ブログ：https://zji.me/3544f76e-7c66-4216-9ba9-32309f86e566.html
これは Obsidian のカードスタックビューで、特定の Callout 構文をカードスタックスタイルにレンダリングするものです。これは並列したコンテンツに適用され、具体的な使用シーンは自分で探求してください。
デモ#
カードが折りたたまれたときのデモ：
カードをクリックして展開したときのデモ：
設定#
CSS コードファイルをコードスニペットフォルダに配置するだけです：
Cards-Show.cssというファイルを作成し、末尾のコードをコピーしてファイルに保存します。Cards-Show.cssファイルを CSS コードスニペットフォルダに配置します。具体的なパス：Obsidian - 設定 - 外観 - CSS コードスニペット - 右側のフォルダアイコンをクリックしてコードスニペットフォルダを開きます。- CSS コードスニペット設定ページに戻り、リフレッシュし、追加した
Cards-Showを有効にします。 - Obsidian ファイル内で指定の Callout 構文を入力すると、カードスタックビューとして表示されます。詳細は以下の「使用例」を参照してください。
使用例#
使用方法は組み込みの Callout 構文と同じです。マークダウンで一般的な太字、リンクなどのマークアップをサポートしています。以下は上記の画像の例です：
> [!cards-show]- **【2024-4 ログ】これはタイトルで、カードスタックの最初のカードに表示され、クリックしてカードスタックを展開できます**
>
> 1. **自分の立場を明確にする**。言うべきことを言い、やるべきことをやり、無駄な心配はしないでください。多くの年配者は立場を明確にできず、何でもかんでも管理しようとしますが、それが世代間の衝突を引き起こします。
>
> 2. **以前に借りたお金は、次に借りるときのチップになる**。だから、簡単にお金を借りないでください。小額の借金をする人には警戒が必要です。彼らはあなたの信頼を積み上げ、大きな借金をしても返さない可能性があります。
>
> 3. まだ財務的に自由になれない場合は、まず精神的に自由になりましょう。
>
> 4. チームで重要なのは、**何をしているか**を知り、**どこに向かっているか**を知ることです。
>
> 5. 家を買うか賃貸するかについて、賃貸の最大の懸念は老後の不安ですが、この40〜50年後の不確実性のために、私たちは最高の20〜30年を投資する必要があります。それは価値がありますか？
>
> 6. 私は、一部の人々が他の人を「のろま」と言うのが好きだと気づきました、特に親しい人々です。これは**他人を判断する典型的なもの**であり、自分の基準で他人を要求し、自分の要求に合わない場合は「のろま」と言います。一般的な例は、シャワーを催促することです。
>
> 7. 保健所には多くの子供がマッサージを受けていますが、それはこの問題やあの問題のためだと言われています。ひとつの考え：いわゆる問題が一般的であるならば、それはもはや問題ではないのではないかということです。もちろん、マッサージを受けている子供の割合はわかりませんので、単なる考えです。
>
> 8. 張愛玲の「秧歌」では、彼女の**観察と予測**を巧妙に、農村の集団的な出来事に投影しています。彼女を単なるロマンス小説作家と見なすのは彼女を過小評価することです。彼女の洞察力と文体は疑いようもありません。
Cards-Show.cssファイルのコードは以下の通りです：
/**
* カードビュー
* @author: 稻米鼠
* @description: カードのcalloutビューを表示するためのもの
* @created: 2024-05-04
* @updated: 2024-05-04
* @version: 0.0.1
*/
.callout[data-callout="cards-show"] {
--callout-color: 255, 233, 160; /** メインカラー、背景色には影響しない */
--callout-icon: panel-top-open; /** アイコン、デフォルトでは非表示 */
--callout-width: 25% - 1rem; /** カードの幅、デフォルトは25%、-1remは余白 */
--callout-height: 12rem; /** カードの高さ */
background: rgba(0, 0, 0, 0.03);
container-type: inline-size;
container-name: cards-show;
}
@container cards-show (max-width: 768px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 33% - 1rem;
}
}
@container cards-show (max-width: 600px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 50% - 1rem;
}
}
@container cards-show (max-width: 480px) {
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content {
--callout-width: 100%;
}
}
.callout[data-callout="cards-show"] > .callout-title,
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
position: relative;
display: block;
box-sizing: border-box;
width: calc(var(--callout-width));
height: var(--callout-height);
padding: 1rem;
margin: 0;
color: var(--text-normal);
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
}
.callout[data-callout="cards-show"].is-collapsed {
background: none;
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before,
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
background-color: rgb(var(--callout-color));
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
content: " ";
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::before {
transform: rotate(3deg);
}
.callout[data-callout="cards-show"].is-collapsed > .callout-title::after {
transform: rotate(-3deg);
}
.callout[data-callout="cards-show"] > .callout-title > .callout-icon,
.callout[data-callout="cards-show"] > .callout-title > .callout-fold {
display: none;
}
.callout[data-callout="cards-show"] > .callout-title > .callout-title-inner {
font-weight: normal;
font-size: 1rem;
}
.callout[data-callout="cards-show"] > .callout-content {
padding: 1rem 0;
overflow: auto;
}
.callout[data-callout="cards-show"] > .callout-content ul,
.callout[data-callout="cards-show"] > .callout-content ol {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: start;
margin: 0;
padding: .5rem 0;
}
.callout[data-callout="cards-show"] > .callout-content ul > li,
.callout[data-callout="cards-show"] > .callout-content ol > li {
margin-bottom: 0.5rem;
overflow: scroll;
text-align: justify;
list-style: none;
background-color: rgba(var(--callout-color), 0.5);
}