Anki カードの背景をストライプにする

Anki のカードの背景をストライプにする方法を紹介します。

方法と言っても、[書式] のところに 以下のCSSを書くだけです。

.card {
  /* 省略 */
  background-color: #b2e0f0; // 薄い方の色
  background-size: auto auto; 
  background-image: repeating-linear-gradient(180deg, transparent, transparent 1px, #8cd1e8 2px, #8cd1e8 8px);
  /* 省略 */
}

• .card のところに記述します。

こんなふうになります。

この場合、文字が見づらくなってしまうので、文字の部分だけ白い背景にしてあります。

そうする場合は、まず 表面や裏面のテンプレートで、こんなふうにクラス属性を指定したタグ（今回は <p>）でフィールドを囲んでおきます。

<p class="box">{{表面}}</p>

続いて、[書式] のところで、このクラスのスタイルを記述します。

.box {
  background-color: white;
  padding: 10px 5px;
  border-radius: 5px;
}