Anki用CSSテンプレート(韓国語編)

自分のメモ的なものですが、現時点で自分が使っているAnki用のCSSテンプレート貼っておきますね。日々ちょこちょこ変えてるので、Backupの意味も込めて。韓国語学習用のリンクを埋め込んでいます。

画像2

画像1

前提ですが、私は以下の感じでFieldを使っています。
1. Front = 外国語
2. Back = 意味(ときどきここに一緒に画像も貼ります)
3. UD1(User Defined 1) = ダジャレ用メモ
4. UD2(User Defined 2) = 発音のヒント
5. 音声

では、以下貼ります。

【Front用コード】
<a class="button" href="">{{Front}}</a><br><br>

(pronunciation): <br> {{hint:UD2}}<br><br>

<a href="https://www.google.co.jp/search?q={{Front}}&tbm=isch">Image Search</a><br>
<a href="https://mobile.twitter.com/search?q={{Front}}&src=typed_query">Search Tweets</a><br>
<a href="http://translate.google.com/#auto/en/{{Front}}">Google Translation</a>

【Back用コード】
<a class="button" href="">{{Front}} </a><br><br>

<a class="button" href="">{{Back}} <br>/{{UD2}}/</a><br><br>

{{UD1}}<br><br><br>

<a href="https://www.kpedia.jp/s/3/{{Front}}">Kpedia例文</a><br>
<a href="https://www.google.co.jp/search?q={{Front}}&tbm=isch">Image Search</a><br>
<a href="https://mobile.twitter.com/search?q={{Front}}&src=typed_query">Search Tweets</a><br>
<a href="http://translate.google.com/#auto/en/{{Front}}">Google Translation</a> <br>

{{Sound}}

【CSS】
@font-face { src: url('_VLPGothic.ttf'); font-family: monospace; }

html { height: 100%; }

.card {
height: 100%;
display: -webkit-box;
-webkit-box-align: stretch;
-webkit-box-pack: center;
-webkit-box-orient: vertical;
margin: 0;
padding: 0;
font-family: Optima-Bold, Times, Menlo, baskerville, sans;
font-size: 18px;
text-align: center;
color: #white ;
background-color: #dcc2ff ;
background-image:
linear-gradient(135deg, #fff0f5 0.85em, transparent 0),
linear-gradient(-135deg, #fff0f5 0.85em, transparent 0),
radial-gradient(circle at 7.4em 7.4em,#b2ebf2 0.85em, transparent 0.85em),
radial-gradient(circle at 0.56em 7.4em,#FF82B2 0.85em, transparent 0.85em),
linear-gradient(135deg, #CAA846 0.85em, transparent 0),
linear-gradient(-135deg, #CAA846 0.85em, transparent 0),
radial-gradient(circle at 7.4em 7.4em,#40E0D0 0.85em, transparent 0.85em),
radial-gradient(circle at 0.56em 7.4em,#4b0082 0.85em, transparent 0.85em);
background-position: 0 4em, 0 4em, 0 -4em, 0 -4em, 4em 0, 4em 0, 4em 0, 4em 0;
background-size: 8em 8em;
background-repeat: repeat;
}

.button {
position: relative;
display: inline-block;
text-align: center;
text-decoration: none;
outline: 0;
overflow: hidden;
color: #fff ;
background: #4b0082 ;
border-radius: 8px;
box-shadow: 0 0 0 5px #4b0082 , 0 2px 3px 5px rgba(0,0,0,0.5);
border: 3px dashed #ffffff ;
padding: .5em 1em;
}



いいなと思ったら応援しよう!