Ankiで♦型の特殊な文字修飾を再現する方法(コード配布)

♦型とは、

の
のようなおしゃれな文字修飾を意味している。試行錯誤したら再現できたので、以下Ankiでも使えるコードを配布する。コピペして張り付けるだけである。

 

HTML(このコードをコピペしてAnkiの表面、裏面の好きな場所に張り付ける)

<div class="border">
  <span>の</span>
</div>

 

CSS(このコードをコピペしてAnkiの書式欄に張り付ける)

.border {
    color: white;
    border: solid 1.2px white;    /* 内側の線になる一本線の枠線をひく*/
    background-color: black; 
    outline: solid 2px #000;    /* 外側の線になる一本線の枠線をひく*/
    outline-offset: 0px;        /* 外側の線と内側の線の空き具合を調整*/
    margin: 2px;                /* 外側の線を広げた分、要素の大きさを調整する*/
    display: inline-block;      /* 中身の幅に合わせる */
    transform: rotate(45deg);   /* 45度回転 */
    padding: 0.09em 0.37em;     /* テキストを微調整するためのパディング */
    width: fit-content;         /* 中身に合わせた幅に設定 */
    height: fit-content;        /* 中身に合わせた高さに設定 */
    font-size: 10px;            /* テキストのフォントサイズ */
}

.border > span {
  transform: rotate(-45deg) scale(1.4);  /* -45度回転＆文字のみを1.4倍に拡大 */
    display: inline-block;      /* インラインブロックに設定 */
    margin-right: 0px;          /* テキストの位置を調整 */

}

 

 

 

配布したコードでは、薬屋のひとりごとの特殊文字を再現してある。iPad版のAnkiMobileでも確認したが、問題なく表示された。文字を拡大してもレイアウトが崩れないようになっている。

 

次回は円形(ドーナツ型)の進捗度メーターをAnkiで再現する方法をご紹介する。

 

 

スターおしまいスター