Anki のカードデザイン用テンプレート

Photo by Free-Photos on Pixabay

Anki のカードデザイン用テンプレートです。

使い方

フィールド名を同じにするか、フィールド名を書き換えると使えます。
テンプレートでは、{{Sentence}}のように二重の中括弧(波括弧)で括ってるところがフィールドを指してますので、ご自身のデッキのフィールド名が違う場合には編集してくださいね。

パターンA

センタリングはテーブルでやっています。


ちなみに、こちらは自作で「実践IELTS3500」から作成したもの。

①フィールド

  1. WordID
  2. Sentence
  3. Sentence Meaning
  4. Sentence Sound
  5. Word
  6. Word Sound
  7. Word IPA
  8. Word Meaning
  9. Info
  10. Picture

②表面のテンプレート

<font size="5" color="#000000">{{Sentence}}{{Sentence Sound}}</font><br>
<div style='font-size: 20px; text-align:right; color:#FF9999'>No.{{WordID}}</div>

③裏面のテンプレート

{{FrontSide}}

<hr id=answer >

<TABLE align="center" width="90%";>
<tr>
<td height="40"><font size="4" face="Georgia" color="#000000">{{Sentence Meaning}}</font></td>
</tr>
</TABLE>

<TABLE border="0" cellspacing="0" cellpadding="3" bordercolor="grey" cellpadding="10" align="center" width="90%";>
<tr align="left" bgcolor="#FFC0CB" style="font-size: 12pt; "><td></td></tr>
<tr align="left" style="font-size: 20pt; "><td bgcolor="white"><font color="#CC0000"><b>{{Word}}{{Word Sound}}</b></font></td></tr>
<tr align="left"><td bgcolor="white"><font color="#000000">/{{Word IPA}}/</font></td><tr>
<tr align="left" style="font-size: 11pt; "><td bgcolor="white"><font color="#000000">{{Word Meaning}}</font></td><tr>
<tr align="left" bgcolor="#FFC0CB" style="font-size: 12pt; "><td></td></tr>
</TABLE>

{{Picture}}<br>

<TABLE border="0" cellspacing="0" cellpadding="3" cellpadding="10" align="center" width="90%";>
<tr align="left"style="font-size: 16px; ">
<td bgcolor="#EEEEEE">{{Info}}</td>
</tr>
</TABLE>

<TABLE border="0" cellspacing="0" cellpadding="3" bordercolor="grey" cellpadding="10" align="center" width="90%";>
<tr align="left"><td>
<button type=“button” onclick="location.href='https://www.lexico.com/definition/{{text:Word}}'">Oxford</button> <sp>
<button type=“button” onclick="location.href='https://ejje.weblio.jp/content/{{text:Word}}'">Weblio</button> <sp>
<button type=“button” onclick="location.href='https://eow.alc.co.jp/search?q={{text:Word}}'">英辞朗</button><sp>
<button type=“button” onclick="location.href='https://www.google.co.jp/search?tbm=isch&hl=ja&source=hp&biw=1026&bih=781&q={{text:Word}}'">Google Images </button><sp>
<button type=“button” onclick="location.href='https://www.google.co.jp/search?tbm=isch&hl=ja&source=hp&biw=1026&bih=781&q={{text:Sentence}}'">Google Images (Sentence)</button><br>
<button type=“button” onclick="location.href='https://www.wordhippo.com/what-is/another-word-for/{{text:Word}}.html'">Synonyms</button><sp>
<button type=“button” onclick="location.href='https://www.wordhippo.com/what-is/the-opposite-of/{{text:Word}}.html'">Antonyms</button><br>
</td></tr>
</TABLE>

④書式

.card {
font-family: Segoe UI;
font-size: 21px;
text-align: center;
color: black;
background-color: #FFFFFF;
}

パターンB

こちらもセンタリングはテーブルでやっています。書籍名はテンプレートに直書き。表のフィールドは音声のみ。

ちなみに、こちらは自作で「ビジネス英語フレーズブック4500」から作成したもの。

①フィールド

  1. PhraseNo
  2. Sentence_EN_Sound
  3. Sentence_EN
  4. Sentence_JP
  5. Tips
  6. Picture
  7. Info

②表面のテンプレート

{{Sentence_EN_Sound}}

③裏面のテンプレート

{{FrontSide}}

<hr id=answer>

<TABLE width="40%";>
<tr ><td><h5>©ビジネス英語<br>フレーズブック 4500</h5></tr></td>
</TABLE>

<font size="4" color="#000000">{{PhraseNo}}</font><br>
<b><font size="6" color="#000000">{{Sentence_EN}}</font><br><br></b>

<TABLE border="0" cellspacing="0" cellpadding="3" cellpadding="10" align="center" width="90%";>
<tr align="center"><td bgcolor="white"><font color="#000000">{{Sentence_JP}} </font></td><tr>
</TABLE>

{{Picture}}<br>

<font size="4" font color="#AAAAAA">{{Tips}}</font><br>

<TABLE border="0" cellspacing="0" cellpadding="3" bordercolor="grey" cellpadding="10" align="center" width="90%";>
<tr align="left"><td>
<button type=“button” onclick="location.href='https://ejje.weblio.jp/content/{{text:Sentence_EN}}'">Weblio</button> <sp>
<button type=“button” onclick="location.href='https://eow.alc.co.jp/search?q={{text:Sentence_EN}}'">英辞朗</button><sp><br>
<button type=“button” onclick="location.href='https://www.google.co.jp/search?tbm=isch&hl=ja&source=hp&biw=1026&bih=781&q={{text:Sentence_EN}}'">Google Images(jp)</button><sp>
<button type=“button” onclick="location.href='https://www.google.co.jp/search?&q={{text:Sentence_EN}}'">Google</button><sp>
<button type=“button” onclick="location.href='https://youglish.com/pronounce/{{text:Sentence_EN}}/english/uk?'">YouGlish (UK)</button> <sp><br>

</td>
<td>
</TABLE>

④書式

.card {
font-family: Segoe UI;
font-size: 21px;
text-align: center;
color: black;
background-color: #FFFFFF;
}
h5{

font-size: 12px;
font-weight:normal;
background: #eeeeee;  /*背景色*/
padding: 0.1em;       /*文字周りの余白*/
color: 00008b;        /*文字色*/
border-radius: 0.5em; /*角の丸み*/
}

パターンC

フィールド

  1. WordID
  2. Word
  3. Word Sound
  4. Word IPA ArE
  5. Word Meaning
  6. Word Conjugation
  7. Word Origin
  8. Sentence
  9. Sentence Sound
  10. Sentence Meaning
  11. Tips
  12. Info
  13. Picture
  14. Category1
  15. Category2

②表面のテンプレート

<!-- ★単語 -->
<table width="100%" bgcolor="#DAE2FA">
<tr>
<td width="5">
</td>
<td>
<font size="6" color="#000000">
<b>{{Word}}{{Word Sound}}</b></font>
</td>
</tr>
</table><!-- ★ID -->
<table width="100%" bgcolor="#FFFFFF">
<tr>
<td width="5"></td><td align="right"><font size="2" color="#666666"">{{Category1}} {{Category2}} No.{{WordID}}</td><td width="5"></td>
</tr>
</table>

③裏面のテンプレート

{{FrontSide}}
<!-- ★発音・意味 -->
<font size="5"color="#333333">/{{Word IPA ArE}}/</font><br>
<font size="5" color="#1A49C8"><b>{{Word Meaning}}</b><br></font>
<font size="4">{{Word Conjugation}}<br>{{Word Origin}}</font>
<p>
<!-- ★例文 -->
<TABLE align="left" width="100%";>
<tr><td><font size="5" color="#000000">{{Sentence}}{{Sentence Sound}}</font></td></tr>
<tr><td>{{Sentence Meaning}}</td></tr>
</TABLE>
<p><font size="3"><div class="balloon1-right">{{Tips}}</div></font></p>
<p>{{Picture}}</p>
<TABLE border="0" cellspacing="0" cellpadding="3" bordercolor="grey" cellpadding="10" align="center" width="100%";>
<tr align="left" style="font-size: 10pt;"><td bgcolor="white"><font color="#000000">{{Info}}</font></td><tr>
</TABLE>
<hr>
<!-- ★リンク -->
<font size="2">
画像
<button type="button" onclick="location.href='https://www.google.co.jp/search?tbm=isch&hl=ja&source=hp&biw=1026&bih=781&q={{text:Word}}'">Google.co.jp Images</button>><button type="button" onclick="location.href='https://www.google.co.jp/search?tbm=isch&hl=ja&source=hp&biw=1026&bih=781&q={{text:Sentence}}'">Google.co.jp Images (Sentence)</button><br>
用例
<button type="button" onclick="location.href='https://www.playphrase.me/#/search?q={{text:Word}}'">playphrase.me</button>
<button type="button" onclick="location.href='https://twitter.com/search?q={{text:Word}}%20&src=typed_query&f=live'">Twitter</button>
<button type="button" onclick="location.href='https://tatoeba.org/ja/sentences/search?query={{text:Word}}'">Tatoeba</button>
<button type="button" onclick="location.href='https://sentence.yourdictionary.com/{{text:Word}}'">Your dictionary(Sentence)</button><br>辞書
<button type="button" onclick="location.href='https://www.dictionary.com/browse/{{text:Word}}#'">dictionary.com</button>><button type="button" onclick="location.href='https://en.oxforddictionaries.com/definition/{{text:Word}}'">Oxford Dictionary</button>
<button type="button" onclick="location.href='https://ejje.weblio.jp/content/{{text:Word}}'">Weblio</button>
<button type="button" onclick="location.href='https://eow.alc.co.jp/search?q={{text:Word}}'">Eow.arc</button>
<br>
語源 <button type="button" onclick="location.href='https://www.etymonline.com/word/{{text:Word}}'">Etymonline</button><button type="button" onclick="location.href='https://www.google.co.jp/search?q={{text:Word}}+origin'">Google+origin</button><br>
etc...
<button type="button" onclick="location.href='https://wordpandit.com/{{text:Word}}'">Wordpandit</button>
<button type="button" onclick="location.href='https://wordinfo.info/results?searchString={{text:Word}}'">Word Information</button>
<button type="button" onclick="location.href='https://www.thesaurus.com/browse/{{text:Word}}?s=t'">thesaurus.com</button>
</font>
<!-- ★書籍タイトル -->
<TABLE width="160">
<tr ><td><h5>©書籍タイトルフィールド</h5></td></tr>
</TABLE>

④書式

.card {
font-family: Segoe UI;
font-size: 21px;
text-align: left;
color: black;
background-color: #FFFFFF;
}/* 書籍タイトルに利用 */
h5{
font-size: 12px;
font-weight:normal;
background: #eeeeee; /*背景色*/
padding: 0.1em;/*文字周りの余白*/
color: 00008b;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

終わりに

こういうのがほしいというリクエストがある方はフィードバックからご連絡ください。需要がありそうなら作るかもしれません(作らないかもしれません)。

タイトルとURLをコピーしました