Tools

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

投稿日:2021年9月19日 更新日:

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;
}

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Anki

Anki: 新しい復習間隔は 0% が良い

Ankiの設定項目「新しい復習間隔」についての持論です。

Anki

Anki: 学習の流れを図にしました

Ankiにおける学習の流れを図にしました。

PayPay

PayPay「本人確認」申請のコツ

PayPay「本人確認」のコツを紹介します。

GIMP

GIMP: 縦横比を指定して切り抜く

GIMPで縦横比を指定して切り抜く手順を紹介します。

Anki

Anki: テンプレート内でのみ使う画像ファイルとマスターとしての画像ファイル

Ankiにおける、テンプレート内でのみ使う画像ファイルと、マスターとしての画像ファイルについて書きました。