スタイリングとHTML

カードのスタイリング

YouTubeでカードのスタイリングについてのビデオを見ることができます。このビデオはAnki 2.0のインターフェースを示していますが、概念はほぼ同じです。

カード画面のスタイリングセクションには、「裏テンプレート」ボタンの隣にある「スタイリング」ボタンをクリックしてアクセスできます。そのセクションでは、カードの背景色、デフォルトフォント、テキストの配置などを変更できます。

利用可能な標準オプションは次のとおりです：

font-family
カードで使用するフォントの名前。フォント名に「MS Unicode」のようにスペースが含まれている場合は、この文のようにフォント名を二重引用符で囲む必要があります。1つのカードで複数のフォントを使用することも可能です。その情報については、以下を参照してください。

font-size
フォントのサイズをピクセル単位で指定します。変更する際には、末尾にpxを付けることを忘れないでください。

text-align
テキストを中央、左、または右に揃えるかどうかを指定します。

color
テキストの色。'blue'、'lightyellow'などの簡単な色名が使用できます。また、任意の色を選択するためにHTMLカラーコードを使用することもできます。詳細については、このウェブページを参照してください。

background-color
カードの背景色。

スタイリングセクションには任意のCSSを配置できます。上級ユーザーは、例えば背景画像やグラデーションを追加するなどの操作を行うことができます。特定のフォーマット方法について知りたい場合は、CSSに関する情報をウェブで検索してください。多くのドキュメントが利用可能です。

スタイリングはすべてのカードで共有されるため、調整を行うとそのノートタイプのすべてのカードに影響します。ただし、カードごとに特定のスタイリングを指定することも可能です。次の例では、最初のカードを除くすべてのカードに黄色の背景を使用します：

.card {
  background-color: yellow;
}
.card1 {
  background-color: blue;
}

画像のリサイズ

Ankiはデフォルトで画像を画面に収まるように縮小します。これを変更するには、スタイリングセクションの一番下に次のコードを追加します（デフォルトの .card { ... } の外側に追加してください）：

img {
  max-width: none;
  max-height: none;
}

AnkiDroidは時々画像を画面に合わせてスケーリングするのに問題があります。CSSを使用して画像の最大寸法を設定することでこれを修正できるはずですが、AnkiDroid 2.9では無視されるようです。修正方法として、各スタイル指示に !important を追加することが挙げられます。例えば：

img {
  max-width: 300px !important;
  max-height: 300px !important;
}

画像のスタイルを変更しようとして、マークされたカードに表示される星が影響を受ける（例えば、星が非常に大きくなる）場合は、次のコードでターゲットにできます：

img#star {
  ...;
}

Chromeを使用してカードのスタイリングをインタラクティブに調査できます：

https://addon-docs.ankiweb.net/porting2.0.html#webview-changes

Anki 2.1.50+ はエディタ内での画像リサイズをネイティブにサポートしています。

フィールドのスタイリング

デフォルトのスタイリングはカード全体に適用されますが、特定のフィールドやカードの一部に異なるフォントや色などを使用することもできます。これは特に外国語を学習する際に重要です。適切なフォントが選択されていないと、Ankiが文字を正しく表示できない場合があるためです。

例えば、「Expression」フィールドがあり、それにOSXのタイフォント「Ayuthaya」を適用したいとします。テンプレートがすでに次のようになっているとします：

What is {{Expression}}?

{{Notes}}

スタイルを適用したいテキストをHTMLで囲む必要があります。テキストの前に次のように記述します：

<div class=mystyle1>

そして、テキストの後ろに次のように記述します：

</div>

このようにテキストを囲むことで、Ankiに「mystyle1」というカスタムスタイルを使用して囲まれたテキストをスタイリングするよう指示します。このカスタムスタイルは後で作成します。

したがって、「What is …​?」という表現全体にタイフォントを使用したい場合は、次のようにします：

<div class=mystyle1>What is {{Expression}}?</div>

{{Notes}}

そして、表現フィールド自体にのみタイフォントを使用したい場合は、次のようにします：

What is <div class=mystyle1>{{Expression}}</div>?

{{Notes}}

テンプレートを編集した後、テンプレート間のスタイリングセクションに移動する必要があります。編集する前は次のようになっているはずです：

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

新しいスタイルを下部に追加し、次のようにします：

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

.mystyle1 {
  font-family: ayuthaya;
}

スタイルには任意のスタイリングを含めることができます。フォントサイズも大きくしたい場合は、mystyle1セクションを次のように変更します：

.mystyle1 {
  font-family: ayuthaya;
  font-size: 30px;
}

カスタムフォントをデッキにバンドルすることも可能ですので、コンピュータやモバイルデバイスにインストールする必要はありません。詳細については、フォントのインストールセクションを参照してください。

オーディオ再生ボタン

カードにオーディオやテキスト読み上げが含まれている場合、Ankiはオーディオを再生するためのボタンを表示します。

ボタンを表示したくない場合は、設定画面で非表示にすることができます。

カードのスタイリングでボタンの外観をカスタマイズすることもできます。例えば、ボタンを小さくして色を付けるには、次のようにします：

.replay-button svg {
  width: 20px;
  height: 20px;
}
.replay-button svg circle {
  fill: blue;
}
.replay-button svg path {
  stroke: white;
  fill: green;
}

テキストの方向

アラビア語やヘブライ語など、右から左に書かれる言語を使用する場合、復習中に正しく表示されるようにするために、.cardセクションにCSSのdirectionプロパティを追加できます：

.card {
  direction: rtl;
}

これにより、カード全体の方向が変更されます。特定のフィールドの方向だけを変更するには、フィールドの参照をHTMLで囲みます：

<div dir="rtl">{{Front}}</div>

エディタ内でフィールドの方向を変更する方法については、編集セクションを参照してください。

その他のHTML

テンプレートには任意のHTMLを含めることができるため、インターネットのウェブページで使用されるすべてのレイアウトをカードにも使用できます。例えば、表、リスト、画像、外部ページへのリンクなどがすべてサポートされています。表を使用すると、カードの表と裏を上下ではなく左右に表示するようにレイアウトを変更することもできます。

HTMLのすべての機能を網羅することはこのマニュアルの範囲外ですが、HTMLについてもっと学びたい場合は、ウェブ上にたくさんの良い入門ガイドがあります。

ブラウザの外観

カードテンプレートが複雑な場合、カードリストの質問と回答の列（「Front」と「Back」と呼ばれる）を読みづらくなることがあります。「ブラウザの外観」オプションを使用すると、ブラウザ内でのみ使用されるカスタムテンプレートを定義できます。これにより、重要なフィールドのみを含めたり、順序を変更したりすることができます。構文は標準のカードテンプレートと同じです。

プラットフォーム固有のCSS

Ankiは、異なるプラットフォームごとに異なるスタイリングを定義できる特別なCSSクラスを定義しています。以下の例は、復習している場所に応じてフォントを変更する方法を示しています：

/* Windows */
.win .example {
  font-family: "Example1";
}
/* macOS */
.mac .example {
  font-family: "Example2";
}
/* Linux desktops */
.linux:not(.android) .example {
  font-family: "Example3";
}
/* both Linux desktops, and Android devices */
.linux .example {
  font-family: "Example4";
}
/* both Android and iOS */
.mobile .example {
  font-family: "Example5";
}
/* iOS */
.iphone .example,
.ipad .example {
  font-family: "Example6";
}
/* Android */
.android .example {
  font-family: "Example7";
}

テンプレートでは次のようにします：

<div class="example">{{Field}}</div>

AnkiWebを使用する際に特定のブラウザを選択するために、.gecko、.opera、および.ieのようなプロパティを使用することもできます。オプションの全リストについては、http://rafael.adm.br/css_browser_selector/を参照してください。

フォントのインストール

新しいフォントをインストールする権限がない職場や学校のコンピュータでAnkiを使用している場合や、モバイルデバイスでAnkiを使用している場合、フォントを直接Ankiに追加することが可能です。

Ankiにフォントを追加するには、TrueType形式である必要があります。TrueTypeフォントは、"Arial.ttf"のようにファイル名が.ttfで終わります。TrueTypeフォントを見つけたら、メディアフォルダに追加する必要があります：

  1. ファイル名の先頭にアンダースコアを追加して、"_arial.ttf"のように名前を変更します。アンダースコアを追加することで、このファイルがテンプレートで使用されることをAnkiに知らせ、未使用のメディアをチェックする際に削除されないようにします。

  2. コンピュータのファイルブラウザでAnkiフォルダに移動し、「User 1」（またはプロファイル名を変更/追加した場合はそのプロファイル名）のフォルダに移動します。

  3. フォルダ内にcollection.mediaというフォルダがあるはずです。名前を変更したファイルをそのフォルダにドラッグします。

その後、テンプレートを更新する必要があります：

  1. メイン画面の上部にある追加をクリックし、左上のボタンで変更したいノートタイプを選択します。

  2. カードをクリックします。

  3. スタイリングセクションで、最後の"}"文字の後に次のテキストを追加し、メディアフォルダにコピーしたファイルの名前に"_arial.ttf"を置き換えます：

@font-face {
  font-family: myfont;
  src: url("_arial.ttf");
}

「myfont」部分ではなく、「arial」部分のみを変更してください。

その後、カード全体のフォントを変更するか、個々のフィールドのフォントを変更するかを選択できます。カード全体のフォントを変更するには、.cardセクションのfont-family:行を見つけて、フォントを「myfont」に変更します。特定のフィールドのみのフォントを変更するには、上記のフィールドのスタイリングの指示を参照してください。

ファイル名が正確に一致していることを確認してください。ファイル名がarial.TTFで、カードテンプレートにarial.ttfと書かれている場合、動作しません。

ナイトモード

ナイトモードが有効になっているときのテンプレートの表示方法を、設定画面でカスタマイズできます。

例えば、背景をより明るいグレーにしたい場合は、次のようにします：

.card.nightMode {
  background-color: #555;
}

「myclass」スタイルがある場合、ナイトモードが有効になっているときにテキストを黄色で表示するには、次のようにします：

.nightMode .myclass {
  color: yellow;
}

フェードインとスクロール

Ankiはデフォルトで自動的に答えまでスクロールします。id=answerを持つHTML要素を探し、それにスクロールします。スクロール位置を調整するために異なる要素にidを配置するか、id=answerを削除してスクロールをオフにすることができます。

カードの質問側はデフォルトでフェードインします。この遅延を調整したい場合は、次のコードを表側のカードテンプレートの先頭に配置します：

<script>
  qFade = 100;
  if (typeof anki !== "undefined") anki.qFade = qFade;
</script>

100（ミリ秒）がデフォルトです。フェードを無効にするには0に設定します。

Javascript

Ankiカードはウェブページのように扱われるため、カードテンプレートにJavascriptを埋め込むことが可能です。良い参考資料として、フォーラムのこの投稿を読んでください。

Javascriptは高度な機能であり、多くの問題が発生する可能性があるため、Javascriptの機能はサポートや保証なしで提供されます。Javascriptの記述に関する支援は提供できず、将来のAnkiのアップデートでコードが変更なしに動作し続けることを保証できません。問題に対処する自信がない場合は、Javascriptの使用を避けてください。

各Ankiクライアントはカード表示を異なる方法で実装しているため、プラットフォーム間で動作をテストする必要があります。いくつかのクライアントは、長時間実行されるウェブページを保持し、カードが復習されるときにその一部を動的に更新することで実装されています。そのため、Javascriptはdocument.write()のような操作ではなく、document.getElementById()のようなものでドキュメントのセクションを更新する必要があります。

window.alertのような関数も使用できません。AnkiはJavascriptのエラーをターミナルに書き込みますので、MacやWindowsのコンピュータを使用している場合は、エラーを手動でキャッチしてドキュメントに書き込む必要があります。デバッガは利用できないため、問題を解決するにはコードを分解して、どの部分が問題を引き起こしているかを特定する必要があります。