Ankiで文字サイズを変える方法

Ankiで文字サイズを変える方法

カードをめくったときに答えを先に目に入れたいなら、答えになる部分だけ24〜32pxに大きくし、補足情報を14〜16pxに小さくすれば直ります。Ankiの既定のテンプレートはカード全体が20pxひとつでできているため、答えも発音も例文も同じサイズで表示されるためです。ankieditorでは、プレビューで変えたい部分をクリックして「文字の書式」の文字サイズを調節するだけです。

なぜカードがひとかたまりに見えるのか

Ankiが標準で用意しているノートタイプのスタイルにはfont-size: 20px.cardに一度だけ設定されています。その値がカードの中のすべての要素に継承されるため、フィールドをいくつ入れても全部同じサイズになります。

単語ひとつだけのカードなら問題ありません。発音・意味・例文・メモまで入れ始めると、目がどこから見ればよいのか分からなくなって全体をひと通り眺めることになり、本来いちばん確認したい答えが目に入るのが遅くなります。

サイズはいくつに分ければよいか

カードごとに、最初に見るべきものを1つだけ大きくするのが基準です。

  • 答え(単語・意味) — 24〜32px。カードをめくったときにいちばん先に目に入るべき内容です。
  • 本文・説明 — 既定の20pxのままにします。
  • 発音・例文・メモ — 14〜16px。色も薄いグレー(#888888)に落とすと、さらに後ろに下がります。

段階は2〜3段階で十分です。4段階以上にすると、どれが重要なのか区別しにくくなり、最初の「全部同じサイズ」の状態と変わらなくなります。この数値も測定された最適値ではなく推奨の出発点で、画面やフォントによって変わります。

ankieditorで文字サイズを変える方法

  1. プレビューでサイズを変えたいフィールドをクリックして選びます。何もない場所をクリックすると「カード全体」が対象になります。
  2. 左パネルの「文字の書式」にある文字サイズのスライダーを動かすか、横の入力欄に数字を入れます。10から60pxまで調節できます。
  3. 補足情報なら、文字色も一緒に薄いグレーに落とします。
  4. [コードをコピー]で修正後のコードをコピーし、Ankiのツール → ノートタイプを管理 → カード...(Tools → Manage Note Types → Cards...)の画面に貼り付けます。

サイズを分けるとCSSはこうなる

フィールドを選んでサイズを変えると、ankieditorがそのフィールド名を使ったクラスを生成し、そこに書き込みます。

.card { font-size: 20px; }
.裏面 { font-size: 28px; }
.例文 { font-size: 15px; color: #888888; }

.cardの20pxは、サイズを個別に指定していない残りの要素の既定値として残り、クラスを受け取ったフィールドだけが自分の値を使います。3つのルールが同時にあっても、それぞれ別の要素を指しているので衝突しません。

サイズを分けるときの注意

段階を4つ以上に増やさないでください。サイズが細かく分かれすぎると、どれが答えなのか目が判断できなくなり、サイズを分けた意味がなくなります。

薄いグレーは夜間モードで見えにくくなることがあります。暗い背景では#888888はコントラストが低く、見えにくくなります。夜間だけ別の色を使う方法は夜間モードで文字色が見えないときにまとめてあります。

pxは画面サイズと関係のない固定値です。デスクトップでちょうどよく見える32pxは、スマートフォンでは大きく感じることがあります。スマートフォンで主に復習するなら、その画面で一度確認してください。

ノートタイプごとに設定が必要です。テンプレートはノートタイプに属するカードタイプに保存されるので、複数のノートタイプを使っているならそれぞれに適用する必要があります。

よくある質問

Ankiで文字サイズを変えるにはどうすればよいですか?

スタイルの.cardfont-sizeを変えるとカード全体が変わります。特定のフィールドだけ変えたい場合は、そのフィールドに対応するクラスを作ってfont-sizeを指定します。ankieditorでフィールドをクリックして文字サイズを調節すると、このクラスが自動で作られます。

答えだけ大きくして例文は小さくできますか?

できます。プレビューで各フィールドをクリックして選んでから、文字サイズを別々に指定すればよいです。答えは24〜32px、例文は14〜16px程度が出発点です。

文字サイズを変えたのに一部だけ変わりません。

その部分に別のサイズが指定されている場合です。該当する要素をクリックして選び、文字サイズをもう一度指定してください。ankieditorは適用しようとする属性と衝突するインラインスタイルを消してルールに記録するので、もう一度指定するだけで直ります。

行が窮屈に見えるならAnkiで行間を変える方法を、行が長すぎるならAnkiでカードの幅を変える方法もあわせてご覧ください。